TypeScriptで学ぶ Svelte 5/SvelteKit 完全ガイド

日本語によるTypeScript中心のSvelte 5/SvelteKit完全マスター学習コンテンツです。最新のSvelte 5 Runesシステムを使用し、Mermaidダイアグラムによる視覚的な解説も充実。実際に動作するAPI連携例（JSONPlaceholder、GitHub Search API）を含む実践的な内容。

🌐 公開サイト: https://shuji-bonji.github.io/Svelte-and-SvelteKit-with-TypeScript/

📚 このドキュメントについて

このドキュメントは、TypeScriptを使用してSvelte 5とSvelteKitを学習するための包括的なガイドです。最新のSvelte 5 Runesシステムを中心に、実践的なコード例と共に解説しています。

対象読者

• TypeScript/JavaScriptでのWeb開発経験がある方
• SPA/WebAPI開発経験があるがSSR/SSGは不慣れな方
• Svelteの公式ドキュメントでTypeScript情報が少なく苦労している方
• SvelteKitでビジネスレベルのサービスを構築したい方

特徴

• 🎯 TypeScript中心 - すべてのコード例でTypeScriptを使用
• 🚀 Svelte 5対応 - 最新のRunesシステムを完全網羅（$derived.by()など最新構文）
• 📊 Mermaidダイアグラム - 視覚的な図解でわかりやすく解説
• 📖 日本語 - 日本語による詳細な解説
• 💡 実践的 - 実際のプロジェクトで使えるパターンを紹介
• 🌙 ダークモード対応 - テーマ切り替えに完全対応
• 🔧 SSR完全対応 - サーバーサイドレンダリングのエラーを回避する実装
• 🌐 実API連携 - JSONPlaceholder、GitHub APIを使用した実動作例

🗂 コンテンツ構成

1️⃣ はじめに

• Svelte 5の概要
• なぜSvelteか
• 環境構築
• TypeScript設定
• 学習パス

2️⃣ Svelteの基本

• Hello World
• コンポーネントの基本構造
• テンプレート構文
• TypeScript統合
• Actions
• トランジション・アニメーション

3️⃣ Runes基礎編

• $state - リアクティブな状態管理
• $derived / $derived.by() - 計算値と明示的な派生値
• $effect / $effect.pre - 副作用の処理とDOM更新前実行
• 他フレームワークとの比較

4️⃣ Runes応用編

• Runesシステム詳細
• $props - プロパティ定義
• $bindable - 双方向バインディング
• $inspect - デバッグツール

5️⃣ 実践編

• リアクティブストア（.svelte.ts）
• クラスとリアクティビティ
• 組み込みリアクティブクラス
• Snippets機能
• コンポーネントパターン
• TypeScriptパターン
• スクリプトコンテキスト

6️⃣ SvelteKit

• ルーティング
• Load関数
• サーバーサイド処理
• フォーム処理
• APIルート
• デプロイメント

7️⃣ 実装例

• TODOアプリ
• 認証システム
• データフェッチング
• WebSocket実装
• Mermaidダイアグラム
• 機能デモ

8️⃣ ディープダイブ（技術詳細）

Svelte 5の内部実装や高度なトピックを扱います。

• Proxyオブジェクトの活用
• リアクティブ状態変数とバインディングの違い
• $state.raw vs $stateの使い分け
• $derived vs $effect vs $derived.byの違い
• コンパイル時最適化
• HTMLテンプレートとSnippets
• カスタム要素とSvelteコンポーネント

📊 Mermaidダイアグラム機能

このドキュメントでは、複雑な概念を視覚的に理解できるよう、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統合

推奨環境

• 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 で起動します。

ビルド・デプロイ

# プロダクションビルド
pnpm build

# ビルド結果のプレビュー
pnpm preview

プロダクションビルドは自動的にGitHub Pagesにデプロイされます。

利用可能なコマンド

# 開発サーバー起動
pnpm dev

# プロダクションビルド
pnpm build

# ビルド結果をローカルでプレビュー
pnpm preview

📝 コントリビューション

バグ報告・機能要望

Issuesからお願いします。

プルリクエスト

1. このリポジトリをフォーク
2. 機能ブランチを作成 (git checkout -b feature/amazing-feature)
3. 変更をコミット (git commit -m 'Add some amazing feature')
4. ブランチにプッシュ (git push origin feature/amazing-feature)
5. プルリクエストを作成

コーディング規約

• すべてのコード例で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年8月 - SSR対応改善、実API連携例追加、$derived.by()構文の正しい使用法を反映、ビルドエラー修正