mypage マイページ cart カート
コース検索
サイト内検索


ホーム > SvelteKit入門 -TypeScript-

SvelteKit入門 -TypeScript-


対応チケット/ポイント等

  • New！
    新規コース(過去6ヶ月)
期間  2日間 時間  9:30～17:00
価格(税込)  110,000円(税込) 主催  株式会社カサレアル
形式  講義＋実機演習 コースコード  WSC0127R
日程 会場 空席状況 実施状況 選択

2025年5月19日(月) ～ 2025年5月20日(火)

カサレアル(オンライン)

  お申し込み後確認

2025年6月23日(月) ～ 2025年6月24日(火)

カサレアル東京(品川)

  お申し込み後確認

2025年7月22日(火) ～ 2025年7月23日(水)

カサレアル(オンライン)

  お申し込み後確認

2025年8月20日(水) ～ 2025年8月21日(木)

カサレアル東京(品川)

  お申し込み後確認

2025年9月8日(月) ～ 2025年9月9日(火)

カサレアル(オンライン)

  お申し込み後確認

※「キャンセル待ち」でお申し込みの方には、別途メールにてご連絡いたします。
※「実施確定」表示のない日程は、お申し込み状況により開催中止になる場合がございます。
※ お申込期日が過ぎた日程は、「お問い合わせください」と表示されます。
※ トレノケート主催コース以外の空席状況は、残席数に関わらず「お申し込み後確認」と表示されます。
※ トレノケート主催コース以外では、主催会社のお席を確保した後に受付確定となります。
お申込みに関するお問い合わせはこちらから

ワンポイントアドバイス

・弊社経由で他社主催研修へお申込みの場合、弊社が「訓練の実施機関」ではないため、人材開発支援助成金の申請書類にトレノケートは署名できません。「主催」欄をご確認ください。本研修コースはトレノケート経由のお申込では人材開発支援助成金の申請ができない旨を予めご了承のうえ、お申込みください。

重要なご連絡・ご確認事項

※ オンライン研修へのご参加の場合、以下の環境でご受講可能なことご確認いただいてからお申し込みください。

＜オンライン研修環境＞
■使用ツール
・動画配信：Zoom
　※業務用PCにZoomアプリをインストールできない場合は、ブラウザからのご参加をお願いします。
・質疑応答：オンラインチャットシステム （Mattermost）
・演習環境：仮想デスクトップ

■システム要件
・インターネットに常時接続できること
・Webカメラおよびマイク
※PC本体の他に、モニターやiPad等の拡張ディスプレイをご用意いただくことを推奨いたします。
　（1台：Zoom、オンラインチャットシステム用、1台：演習環境用）

■OS
・Windows

■Webブラウザ
・Google Chrome (最新版)

※Mattermostおよび演習環境は主催会社(株式会社カサレアル)にてご用意いたします。

対象者情報

対象者
・SvelteとSvelteKitを順序立てて学びたい方
・メタフレームワークでのWebアプリケーション開発を体験したい方
前提条件
□カサレアル社オープンコース「モダンJavaScript入門」「TypeScriptイントロダクション」をご受講いただいた方もしくは、同等の技術を習得している方
□ECMAScript2015以降の文法でJavaScriptのコーディングを行ったことのある方

学習内容の詳細

コース概要
フロントエンド/バックエンド双方を備えたWebアプリケーションを高い生産性で開発するためのSvelteKit入門コースです。

本コースでは、最新のフロントエンドフレームワークであるSvelteとそのサーバーサイドフレームワークSvelteKitを用いたWebアプリケーション開発の基礎を学びます。まず、Svelteの基礎として、コンポーネント、props、リアクティブなどの概念を学習します。次に、SvelteKitを導入し、ルーティング、レイアウト、フォームアクション、APIルートといったWebアプリケーション開発に必要な要素を学びます。
学習目標
● SvelteKitを用いて、フロントエンド/バックエンド双方を備えたWebアプリケーションを開発できる
学習内容 
1. Svelte概要
  - Svelteとは
  - Svelteの特徴
  - エディタの設定
  - 雛形作成
  - シンプルなサンプル

2. コンポーネント基礎
  - コンポーネントとは
  - コンポーネントの親子関係
  - コンポーネントの構成要素
  - 式の埋め込み
  - 分岐と繰り返し表示
  - イベントハンドラ
  - 親子関係とprops

3. リアクティブ
  - 状態とは
  - 状態の作成と更新
  - 変更に連動して動作
  - 入力値の受け取り
  - 配列やオブジェクトを状態として扱う

4. SvelteKit概要
  - SvelteKitとは
  - SSRとは
  - 雛形作成
  - シンプルなサンプル

5. ルーティング
  - ページの定義
  - URLパラメータの取得
  - プログラム的な遷移

6. レイアウト
  - レイアウト定義
  - レイアウトのデータ取得

7. 状態管理
  - 状態管理
  - Context API
  - 状態と状態を操作する関数を共有
  - xxx.svelte.ts ファイル

8. APIルートとデータ取得
  - APIルートでWeb API作成
  - Fetch APIでデータを取得

9. フォームアクション
  - フォームアクション
  - プログレッシブエンハンスメント
  - プログレッシブエンハンスメントのカスタマイズ

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

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

実習/演習内容詳細

ソフトウェア
ハードウェア
■ Node.js v18.13以降
■ SvelteKit v2.16以降
■ Svelte v5以降
■ TypeScript v5.0以降
■ Chrome
■ Visual Studio Code

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

コース関連付加情報

ご注意・ご連絡事項

・本コースは株式会社カサレアルが開催いたします。
・株式会社カサレアル開催コースのキャンセル・日程変更・受講者変更は9営業日前までとさせていただきます。
※受講に関する注意点※
進行の都合上、研修開始時間を過ぎてからのご参加はご遠慮いただいております。
大変恐れ入りますが、研修開始時間までにご参加いただけていない場合、当日キャンセル扱いをさせていただく場合がございますのでご注意ください。