日本語によるTypeScript中心のSvelte 5/SvelteKit完全マスター学習コンテンツです。最新のSvelte 5 Runesシステムを使用し、Mermaidダイアグラムによる視覚的な解説も充実。実際に動作するAPI連携例（JSONPlaceholder、GitHub Search API）を含む実践的な内容。Load関数のデータフローや実行環境別アーキテクチャ（SSR/SSG/SPA）についても詳細に解説。フォーム処理のActions実行フローもシーケンス図とフローチャートで完全可視化。
🌐 公開サイト: https://shuji-bonji.github.io/Svelte-and-SvelteKit-with-TypeScript/
このドキュメントは、TypeScriptを使用してSvelte 5とSvelteKitを学習するための包括的なガイドです。最新のSvelte 5 Runesシステムを中心に、実践的なコード例と共に解説しています。
学習内容を実際のコードで確認できる実装例プロジェクトを提供しています。
-
基礎版 - svelte5-blog-example ✅完成
- 静的データによる基本的なブログサイト
- デモサイト
-
Markdown版 - svelte5-blog-markdown ✅完成
- Markdownファイルベースの実践的なブログシステム
- 全文検索、タグクラウド、読了時間計算機能付き
- デモサイト
- TODOマネージャー - svelte5-todo-example ✅完成
- Svelte 5 Runesシステムを使用した完全なTODOアプリ
- GitHub風のモダンなUI/UXデザイン
- ダークモード対応、LocalStorage永続化
- フィルタリング（全て/アクティブ/完了）機能
- 基本認証 - svelte5-auth-basic ✅完成
- Cookie + Session認証の基礎
- SQLite（Prisma）を使用したユーザー管理
- デモサイト
これらのプロジェクトは本ドキュメントの学習内容と連動し、実際に動作するコードとして提供されています。
- TypeScript/JavaScriptでのWeb開発経験がある方
- SPA/WebAPI開発経験があるがSSR/SSGは不慣れな方
- Svelteの公式ドキュメントでTypeScript情報が少なく苦労している方
- SvelteKitでビジネスレベルのサービスを構築したい方
- エンタープライズ開発者（Spring Boot、ASP.NET Core、Angular等の経験者）
- 🎯 TypeScript中心 - すべてのコード例でTypeScriptを使用
- 🚀 Svelte 5対応 - 最新のRunesシステムを完全網羅（
$derived.by()など最新構文） - 📊 Mermaidダイアグラム - Load関数、Actions、フォーム処理の実行フローを視覚的に解説
- 📖 日本語 - 日本語による詳細な解説
- 💡 実践的 - Universal LoadとServer Loadの使い分けを具体例で解説
- 🌙 ダークモード対応 - テーマ切り替えに完全対応
- 🔧 SSR完全対応 - サーバーサイドレンダリングのエラーを回避する実装
- 🌐 実API連携 - JSONPlaceholder、GitHub APIを使用した実動作例
- 🏗️ アーキテクチャ詳解 - SSR/SSG/SPAの実行環境別の動作を詳細に解説
- 📈 アクセスログ分析 - レンダリング戦略がWebサーバーログに与える影響を説明
- 🏢 エンタープライズ対応 - レイヤードアーキテクチャ、DDD、Clean Architecture対応（計画中）
- Svelte 5の概要
- なぜSvelteか
- 環境構築
- TypeScript設定
- 学習パス
- Hello World
- コンポーネントの基本構造
- テンプレート構文
- TypeScript統合
- Actions
- トランジション・アニメーション
$state- リアクティブな状態管理$derived/$derived.by()- 計算値と明示的な派生値$effect/$effect.pre- 副作用の処理とDOM更新前実行- 他フレームワークとの比較
- Runesシステム詳細
$props- プロパティ定義$bindable- 双方向バインディング$inspect- デバッグツール
- リアクティブストア（.svelte.ts）
- クラスとリアクティビティ
- 組み込みリアクティブクラス
- Snippets機能
- コンポーネントパターン
- TypeScriptパターン
- スクリプトコンテキスト
- SPA + 既存API統合パターン
- BaaS統合（Firebase、Supabase）
- GraphQL統合
- マイクロフロントエンド
- SvelteKit概要とアーキテクチャ
- プロジェクト構造
- 特殊ファイルシステム
- レンダリング戦略（基礎）
- app.d.tsの役割
- 基本ルーティング
- 動的ルーティング
- 高度なルーティング
- Load関数の基礎
- TypeScript型の自動生成システム
- データフローの詳細
- SPAモードとデータ無効化
- ストリーミングSSR
- データフェッチング戦略
- 高度なデータフェッチング戦略
- レンダリング戦略（詳解）
- レンダリングパイプライン
- アクセスログと分析戦略
- データロードアーキテクチャ
- ルーティング内部動作
- フォーム処理とActions（✨ 実行フロー図を大幅拡充）
- Actions実行タイミングのシーケンス図
- Named Actions（複数Actions）のフロー
- use:enhanceライフサイクル図
- バリデーションフロー図
- ファイルアップロードフロー図
- WebSocket/SSE
- サーバーサイド処理（準備中）
- APIルート設計（準備中）
- Hooks（準備中）
- セッション管理と認証戦略
- 認証ベストプラクティス
- テスト戦略
- 状態管理パターン
- 認証・認可（準備中）
- データベース統合（準備中）
- 環境変数管理（準備中）
- エラーハンドリング（準備中）
- レイヤードアーキテクチャ
- ドメイン駆動設計（DDD）
- リポジトリパターン
- 依存性注入（DI）
- Clean Architecture実装
- ビルド最適化
- キャッシュ戦略
- パフォーマンス最適化（準備中）
- SEO最適化（準備中）
- プラットフォーム別デプロイ
- 実行環境とランタイム
- セキュリティ（準備中）
- モニタリング（準備中）
- ブログシステム（基礎・発展）
- Cookie/Session認証
- JWT認証
- TODOアプリ
- データフェッチング
- WebSocket実装
- Mermaidダイアグラム（SSR対応）
- Svelte 5 完全リファレンス
- SvelteKit 2.x 完全リファレンス
Svelte 5の内部実装や高度なトピックを扱います。
- Proxyオブジェクトの活用
- リアクティブ状態変数とバインディングの違い
$state.rawvs$stateの使い分け$derivedvs$effectvs$derived.byの違い- コンパイル時最適化
- HTMLテンプレートとSnippets
- カスタム要素とSvelteコンポーネント
このドキュメントでは、複雑な概念を視覚的に理解できるよう、Mermaidダイアグラムを豊富に使用しています。
- フローチャート - プロセスや処理フローの表現
- シーケンス図 - コンポーネント間の相互作用
- クラス図 - TypeScript型定義や構造の表現
- ガントチャート - 学習ロードマップや進捗管理
- 円グラフ - データの割合や構成比
- 🌙 ダークモード完全対応 - システムテーマに自動追従
- 🎨 Svelteブランドカラー - 統一されたデザイン
- 📱 レスポンシブ対応 - モバイルでも見やすい表示
- 🔄 リアルタイム切り替え - テーマ変更時に即座に更新
<script>
import Mermaid from '$lib/components/Mermaid.svelte';
const diagramCode = `graph TD
A[開始] --> B[処理]
B --> C[終了]`;
</script>
<Mermaid diagram={diagramCode} />詳細はMermaidデモページをご確認ください。
- Svelte 5 (5.0.0+) - 最新のRunesシステム対応
- SvelteKit (2.8.1+) - フルスタックフレームワーク
- TypeScript (5.3.3+) - 型安全な開発環境
- Vite (5.1.4+) - 高速ビルドツール
- SveltePress (6.0.4+) - 静的サイト生成
- Mermaid (11.9.0+) - ダイアグラム描画
- Rehype-Mermaid (3.0.0+) - Markdown統合
- AutoPageNavigation - ページ間の自動ナビゲーション生成
- navigation-from-config - vite.config.tsから自動的にナビゲーション構造を生成
- Node.js 18.19+ (推奨: 20.x LTS)
- pnpm 9.15.0+ (パッケージマネージャー)
- Node.js 18.19以上（推奨: 20.x LTS）
- pnpm 9.15.0以上（推奨パッケージマネージャー）
# リポジトリのクローン
git clone https://github.com/shuji-bonji/Svelte-and-SvelteKit-with-TypeScript.git
cd Svelte-and-SvelteKit-with-TypeScript
# 依存関係のインストール
pnpm install
# 開発サーバーの起動
pnpm dev開発サーバーは http://localhost:5173 で起動します。
本プロジェクトではSveltePressの標準機能に加えて、独自の自動ナビゲーションシステムを実装しています。
- 自動生成: 各ページに前後のページへのナビゲーションリンクが自動的に追加
- 単一情報源:
src/lib/config/sidebar.tsのサイドバー構造から自動的に生成（二重管理不要） - メンテナンス性: 新しいページを追加するだけで自動的にナビゲーションに反映
src/lib/components/AutoPageNavigation.svelte- ナビゲーション表示コンポーネントsrc/lib/utils/navigation-from-config.ts- sidebar.tsから構造を生成するユーティリティsrc/lib/config/sidebar.ts- サイドバー構造の単一情報源（Single Source of Truth）
詳細はCLAUDE.mdを参照してください。
# プロダクションビルド
pnpm build
# ビルド結果のプレビュー
pnpm previewプロダクションビルドは自動的にGitHub Pagesにデプロイされます。
# 開発サーバー起動
pnpm dev
# プロダクションビルド
pnpm build
# ビルド結果をローカルでプレビュー
pnpm previewIssuesからお願いします。
- このリポジトリをフォーク
- 機能ブランチを作成 (
git checkout -b feature/amazing-feature) - 変更をコミット (
git commit -m 'Add some amazing feature') - ブランチにプッシュ (
git push origin feature/amazing-feature) - プルリクエストを作成
- すべてのコード例でTypeScriptを使用
- Svelte 5のRunesシステムを使用（古い文法は避ける）
- 複雑な派生値には
$derived.by()を使用 - 型定義を明確に記述
- 日本語でコメントを記述
- SSR対応のためOptional chainingを活用
詳細はCLAUDE.mdを参照してください。
このプロジェクトはCreative Commons Attribution 4.0 International Licenseの下で公開されています。 学習目的での自由な利用・改変・配布が可能です。
- Svelte - The Svelte contributors
- SvelteKit - The SvelteKit team
- SveltePress - Documentation framework
- Mermaid - Diagramming and charting tool
- GitHub: @shuji-bonji
- Issues: GitHub Issues
Note: このドキュメントは継続的に更新されています。Svelte 5の最新機能やMermaidダイアグラムによる視覚的解説を随時追加しています。最新の情報は公開サイトをご確認ください。
Last Updated: 2025年9月20日 - 実装例プロジェクトの最新化完了。resolveRouteをresolveに移行、svelte5-todo-exampleプロジェクトの追加
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}