SvelteKit入門 -TypeScript-

WEB

実践重視のプログラムで「わかる」を「できる」に！

株式会社カサレアル

No. RJ2014CRL 2014CRL

25/12/30 更新

お申込みはこちら

研修内容・特徴
到達目標
研修プログラム
留意事項・備考
スケジュール
お申込後の流れ
似たテーマの研修

対象者target

■ SvelteとSvelteKitを順序立てて学びたい方
■ メタフレームワークでのWebアプリケーション開発を体験したい方

前提知識

下記をご受講済みの方、もしくは同等の技能をお持ちの方
■ 「モダンJavaScript入門」「TypeScriptイントロダクション」をご受講いただいた方もしくは、同等の技術を習得している方
■ ECMAScript2015以降の文法でJavaScriptのコーディングを行ったことのある方

研修内容・特徴outline・feature

※2025年3月～より、コース内容が一部変更されました。内容をご確認のうえ、お申込みください。フロントエンド/バックエンド双方を備えたWebアプリケーションを高い生産性で開発するためのSvelteKit入門コースです。本コースでは、最新のフロントエンドフレームワークであるSvelteとそのサーバーサイドフレームワークSvelteKitを用いたWebアプリケーション開発の基礎を学びます。まず、Svelteの基礎として、コンポーネント、props、リアクティブなどの概念を学習します。次に、SvelteKitを導入し、ルーティング、レイアウト、フォームアクション、APIルートといったWebアプリケーション開発に必要な要素を学びます。 ※受講に関する注意点※ 進行の都合上、研修開始時間を過ぎてからのご参加はご遠慮いただいております。大変恐れ入りますが、研修開始時間までにご参加いただけていない場合、当日キャンセル扱いをさせていただく場合がございますのでご注意ください。

到達目標goal

・SvelteKitを用いて、フロントエンド/バックエンド双方を備えたWebアプリケーションを開発できる

主催団体organizer

本コースは、株式会社カサレアルが主催しております。

研修プログラムprogram

■ Svelte概要
　□ Svelteとは
　□ Svelteの特徴
　□ エディタの設定
　□ 雛形作成
　□ シンプルなサンプル
■ コンポーネント基礎
　□ コンポーネントとは
　□ コンポーネントの親子関係
　□ コンポーネントの構成要素
　□ 式の埋め込み
　□ 分岐と繰り返し表示
　□ イベントハンドラ
　□ 親子関係とprops
■ リアクティブ
　□ 状態とは
　□ 状態の作成と更新
　□ 変更に連動して動作
　□ 入力値の受け取り
　□ 配列やオブジェクトを状態として扱う
■ SvelteKit概要
　□ SvelteKitとは
　□ SSRとは
　□ 雛形作成
　□ シンプルなサンプル
■ ルーティング
　□ ページの定義
　□ URLパラメータの取得
　□ プログラム的な遷移
■ レイアウト
　□ レイアウト定義
　□ レイアウトのデータ取得
■ 状態管理
　□ 状態管理
　□ Context API
　□ 状態と状態を操作する関数を共有
　□ xxx.svelte.ts ファイル
■ APIルートとデータ取得
　□ APIルートでWeb API作成
　□ Fetch APIでデータを取得
■ フォームアクション
　□ フォームアクション
　□ プログレッシブエンハンスメント
　□ プログレッシブエンハンスメントのカスタマイズ

■ 付録 : BFFとリクエストの受け渡し
■ 付録 : TypeScript要点速習
■ 付録 : Fetch APIによるHTTP通信
■ 付録 : npmの利用

※最新でより良い内容をお届けするため、一部の学習項目を予告なく変更する可能性がありますのでご了承ください。

配布資料demo

オンライン参加の方は、研修当日にPDFのテキストを配布いたします。
オフライン（対面）参加の方は、研修当日に紙媒体のテキストを配布いたします。

お問合せフォームへ

留意事項・備考notice

【事前に必ず以下をご確認の上お申込みください】
＊本コースのキャンセル期限は研修開始日の７営業日前17:00までです。
＊主催団体によりキャンセルポリシーが異なります。詳細はこちらをご確認ください。
＊キャンセル期限までは無料にてキャンセルを承ります。
＊キャンセル期限を過ぎた後は、受講料全額をキャンセル料として頂戴いたします。
＊事前のお席の確保は原則承っておりません。
＊お申込み内容は、翌営業日以降に確定いたします。
＊お申込み後、満席などでご受講できない場合がございますので、あらかじめご了承ください。満席の場合は、別途ご連絡申し上げます。

※受講に関する注意点※
進行の都合上、研修開始時間を過ぎてからのご参加はご遠慮いただいております。大変恐れ入りますが、研修開始時間までにご参加いただけていない場合、当日キャンセル扱いをさせていただく場合がございますのでご注意ください。

◆オンライン研修環境 ※オンラインでご受講の方は以下必ずご確認ください。 【使用ツール】 動画配信：Zoom 質疑応答：オンラインチャットシステム（Mattermost）演習環境：仮想デスクトップ
※業務用PCにZoomアプリをインストールできない場合は、ブラウザからのご参加をお願いします。 ※Zoomのシステム要件について、より詳細な情報は、こちらをご参照ください。 ※Mattermostおよび演習環境は弊社にてご用意いたします。 【システム要件】 ・インターネットに常時接続できること　（アクセス制限のないネットワーク環境をご利用ください）・Webカメラおよびマイク ※PC本体の他に、モニターやiPad等の拡張ディスプレイをご用意いただくことを推奨いたします。　（1台：Zoom、オンラインチャットシステム用、1台：演習環境用） ※事前にアクセス確認をご希望される方はお問い合わせください 【対応OS】 Windows 上記以外の環境でもご受講いただくことが可能ですが、操作感が異なる可能性がある点をご了承ください。 【WEBブラウザ】 Google Chrome 上記以外の環境でもご受講いただくことが可能ですが、操作感が異なる可能性がある点をご了承ください。 【事前環境確認】 事前にアクセス確認をご希望される方は以下のフォームからお問い合わせください。接続確認をする

動作環境operating

■ Node.js v18.13以降
■ SvelteKit v2.16以降
■ Svelte v5以降
■ TypeScript v5.0以降
■ Chrome
■ Visual Studio Code

※ 使用するソフトウェアおよびバージョンについては予告なく変更する可能性がありますのでご了承ください。