SvelteKit 基礎編
SvelteKitはSvelteをベースにしたフルスタックWebアプリケーションフレームワークです。このセクションでは、SvelteKitの核となる概念とアーキテクチャについて体系的に学びます。
SvelteKitの特徴
SvelteKitは、モダンなWebアプリケーション開発に必要なすべての機能を提供します。
主な特徴
- ファイルベースルーティング - ディレクトリ構造がそのままURLに対応
- SSR/SSG/SPA対応 - レンダリング戦略を柔軟に選択
- TypeScript完全対応 - 型安全な開発が可能
- エッジ対応 - Cloudflare Workers等での動作
- 開発者体験 - HMR、自動インポート、Viteベース
基礎編の内容
🎯
SvelteKit概要 →
SvelteKitの全体像とフレームワーク設計を理解します。
- MPA vs SPA: ハイブリッドアプローチ
- レンダリング戦略: SSR/SSG/CSR
- データフロー: サーバーとクライアント
- ビルド最適化: コード分割とプリロード
- 開発ツール: Viteとの統合
📁
プロジェクト構造 →
SvelteKitプロジェクトのディレクトリ構造と命名規約を学びます。
src/routes: ページとレイアウトsrc/lib: 共有コンポーネント+page/+layout: 特殊ファイル+server: APIエンドポイントapp.html: アプリケーションシェル
📂
特殊ファイルシステム →
SvelteKitの特殊ファイル（+page、+layout等）の役割と実行環境を詳細に理解します。
+page.svelte: ページコンポーネント+page.server.ts: サーバー専用処理+layout: レイアウト継承+server.ts: APIエンドポイント- 実行環境: サーバー/クライアント
🎨
レンダリング戦略 →
SSR、SSG、SPAの基本的な違いと選択基準を学び、最適な戦略を選択できるようになります。
- SSR: 動的コンテンツ向け
- SSG: 静的サイト生成
- SPA: クライアントレンダリング
- ハイブリッド: ページごとに選択
- パフォーマンス: 各戦略の比較
🌍
app.d.tsの役割 →
プロジェクト全体で共有されるグローバルな型定義
- App.Locals: サーバーサイドのリクエスト固有データ
- App.PageData: すべてのページで共通のデータ型
- App.Error: カスタムエラー型
- App.PageState: 履歴エントリの状態
- App.Platform: プラットフォーム固有のAPI
関連セクション
基礎編を学んだら、次のセクションでSvelteKitのコア機能を習得しましょう。
🛤️
ルーティング
ファイルベースルーティングの完全ガイド。動的ルート、レイアウト、ルートグループなどを詳しく解説。
📊
データ取得
Load関数を使った効率的なデータフェッチング。Universal LoadとServer Loadの使い分け、ストリーミングSSRなど。
学習の進め方
推奨学習順序
- 概要とアーキテクチャ - まずSvelteKitの全体像を理解
- プロジェクト構造 - ディレクトリ構造と命名規約を習得
- 特殊ファイルシステム - 各ファイルの役割と実行環境を理解
- レンダリング戦略 - SSR/SSG/SPAの使い分けを習得
- TypeScript型の自動生成 -
./$typesによる型安全な開発
学習目標
このセクションを完了すると、以下ができるようになります。
- SvelteKitプロジェクトの構造を理解し、適切に構成できる
- ファイルベースルーティングを活用して複雑なURL構造を実装できる
- load関数を使って効率的にデータを取得・管理できる
- SSR/SSG/SPAの違いを理解し、適切に選択できる
./$typesを活用して型安全なアプリケーションを構築できる
次のステップ
基礎編を習得したら、 サーバーサイド編 でより高度なサーバーサイド機能を学びましょう。
TypeScript推奨
すべてのコード例はTypeScriptで記述されています。型安全性を最大限に活用するため、TypeScriptの使用を強く推奨します。
前提知識
このセクションは Svelte 5の基本 を理解していることを前提としています。Svelteの基礎がまだの方は、先にSvelteセクションを学習してください。