学習ガイド
このガイドで学べること
🎯 Svelte 5の基礎
- ✅ Runesシステムの完全理解
- ✅ コンポーネント開発の基本
- ✅ TypeScriptとの統合
- ✅ リアクティビティの仕組み
🚀 SvelteKitの活用
- ✅ ルーティングシステム
- ✅ SSR/SSGの実装
- ✅ APIエンドポイント
- ✅ 本番環境へのデプロイ
📚 レベル別学習パス
🎯 はじめに
📚 Runes応用編
🔬 技術詳細（Deep Dive）
内部実装を理解する
Svelte 5の内部動作について、より深く理解したい方向けの技術記事です。
- 📦 コンパイル時最適化 - Virtual DOMを使わない理由と仕組み
- 🔍 Proxyオブジェクトの活用 - リアクティビティシステムの中核技術
- ⚡ リアクティブ状態とバインディング - 違いを理解して正しく使う
- 🔧 $state.raw vs $state - パフォーマンス最適化のための使い分け
- 🔄 $derived vs $effect vs $derived.by - 派生値の違いと適切な使い方
- 🎨 HTMLテンプレートとSnippets - 再利用可能なUIパーツの作成
🗺️ 推奨学習ロードマップ
🌱 初心者コース（3-4週間）
Week 1: 基礎を固める
Week 2-3: 実践開発
Runesシステムの理解
簡単なアプリケーション作成
TypeScript統合
Week 4: プロジェクト
🚀 経験者コース（1-2週間）
Phase 1: Svelteの哲学（2-3日）
- なぜSvelteか - 他フレームワークとの違いを理解
- コンパイル時最適化の仕組み
- Proxyオブジェクトの活用 - Svelte 5の内部実装
Phase 2: Runesマスター（3-4日）
- useState → $state への移行
- useEffect → $effect への移行
- useMemo → $derived への移行
Phase 3: SvelteKit（4-5日）
⚡ 移行者コース（3-5日）
Svelte 4 → Svelte 5 移行ガイド
| Svelte 4 | → | Svelte 5 |
|---|---|---|
let count = 0 | → | let count = $state(0) |
$: doubled = count * 2 | → | let doubled = $derived(count * 2) |
export let prop | → | let { prop } = $props() |
✅ スキルチェックリスト
基礎スキル
- □ Svelteプロジェクトの作成
- □ コンポーネントの作成と使用
- □ $stateによる状態管理
- □ イベントハンドリング
- □ 条件分岐とループ
応用スキル
- □ Runesシステムの完全理解
- □ TypeScript統合
- □ SvelteKitルーティング
- □ SSR/SSG/SPAの使い分け
- □ パフォーマンス最適化
💡 学習のコツ
✅ 推奨事項
- コードを実際に書いて試す
- 小さなプロジェクトから始める
- TypeScriptを最初から使う
- 公式ドキュメントを参照する
❌ 避けるべきこと
- Svelte 4の古い記法を使う
- Reactの書き方をそのまま適用
- TypeScriptを後回しにする
- 大規模プロジェクトから始める