Svelte と SvelteKit で実際のインターフェースを構築する
Svelte は React と Vue とは根本的に異なるアプローチをとっています。ランタイムをブラウザに送信するのではなく、ビルド時にコンポーネントを高度に効率的なバニラ JavaScript にコンパイルします。結果として、バンドルがより小さく、読み込み時間が短くなり、ボイラープレートが減ります。公式アプリケーションフレームワークである SvelteKit は、ファイルベースのルーティング、サーバーサイドレンダリング、フォームアクション、デプロイメントアダプターを追加し、あらゆるプラットフォームでプロダクショングレードのアプリをデプロイできます。このトラックは両方をカバーしており、最初のコンポーネントからフルスタックアーキテクチャまで学べます。
学習内容
Svelte のコンポーネントモデル（props、テンプレート構文、条件分岐、ループ、双方向バインディング）から始まり、リアクティビティシステム、ライフサイクル関数、ストアプリミティブ（writable、readable、derived、カスタムストア）に進みます。UI 側では、slots、Context API、CSS トランジション、アニメーション、Svelte Motion を扱います。SvelteKit の章ではルーティング、データローディング、SSR とプリレンダリング、フォームアクション、API ルート、hooks、エラーハンドリング、高度なレイアウト、認証パターン、デプロイメントアダプターをカバーします。このトラックはまた、Svelte 5 の rune システム、unit テストと Playwright E2E によるテスト、サードパーティライブラリの統合、SvelteKit のセキュリティプラクティスもカバーしています。
学習パス
41 のコースが A1 から C1 まで段階的に進みます。最初の 7 つのコースは基礎を確立します：コンポーネント、props、イベント、テンプレート構文。B1 では stores、slots、トランジション、最初の SvelteKit ページとデータローディングパターンを紹介します。B2（最大のブロック）では、フォームアクション、API ルート、hooks、高度なリアクティビティ、Svelte Actions、カスタムアニメーション、認証パターン、アダプター、Svelte 5 rune、テスト、セキュリティを扱います。トラックは C1 で終わり、高度な rune、高度なコンポーネントパターン、SvelteKit ストリーミング、パフォーマンス最適化、大規模な状態管理、フルスタック SvelteKit アプリケーションのキャップストーンプロジェクトをカバーします。
仕組み
各コースは、組み込みコードエディターでリアルタイムフィードバックを得ながら完了する短く焦点を絞ったレッスンに分割されています。困ったときはいつでも AI チューターが利用でき、次のトピックに進む前に、すべての概念は実践的な練習で強化されます。