下記のイメージで進めていきますが途中で変更などを加えていきます。
Svelte 5 チュートリアル目次
1. はじめに
- Svelte とは何か？
- Svelte の特徴と他のフレームワークとの違い
- チュートリアルのゴールと対象読者
2. Svelte 環境の準備
- Node.js のインストール方法
- Vite を使った Svelte プロジェクトのセットアップ
- 開発環境の確認と初期起動
3. 基本の使い方
- Svelte の構造とコンポーネント
- 初めてのコンポーネントを作成する
- HTML、CSS、JavaScript の統合
4. データのバインディング
- 変数とリアクティブな変更 (
$を使ったリアクティブステート) - 双方向バインディング (
bind:を使ったフォーム操作) - 算出プロパティ (
$:の活用)
5. 条件分岐とループ
- 条件レンダリング (
{#if}{:else}{/if}) - 繰り返しレンダリング (
{#each}{/each}) keyディレクティブによる効率的なリスト操作
6. イベントハンドリング
- イベントの基本 (
on:ディレクティブ) - カスタムイベントの作成と伝播
- イベント修飾子（
preventDefaultなど）
7. コンポーネント間のデータのやりとり
- Props を使った親子コンポーネント間のデータ受け渡し
- カスタムイベントでデータを親に送る方法
- コンポーネントの再利用
8. ストアを使った状態管理
- ストアの種類（
$store,readable,writable,derived） - ストアの作成と利用
- コンポーネント間での共有ステートの実現
9. Svelte 5 の新機能
- Runes を使ったリアクティブな動作の拡張
$effectと$memoの活用方法- その他の Svelte 5 特有の機能
10. SvelteKit の導入
- SvelteKit とは？
- SvelteKit プロジェクトのセットアップ方法
- ルーティングの基本
- データフェッチとサーバーサイドレンダリング（SSR）
- SvelteKit の構造とファイルシステムベースのルーティング
11. 実践：簡単なアプリケーションを作る
- ToDo リストアプリの作成
- コンポーネントの分割と整理
- データの管理とストアの利用
- アプリケーションのナビゲーション
12. Vercel でのデプロイ
- Vercel のアカウント作成とセットアップ
- SvelteKit アプリケーションの Vercel へのデプロイ手順
- GitHub リポジトリとの連携
- デプロイ後の確認とカスタマイズ
13. よくある質問とトラブルシューティング
- 初心者がつまづきやすいポイント
- エラーの対処法
- オンラインリソースの活用方法
14. 次のステップ
- アニメーションとトランジション
- テストの導入（単体テスト・E2E テスト）
- Svelte を使った大規模アプリケーションの構築