Svelte-and-SvelteKit-with-TypeScript Svelte Themes

Svelte And Sveltekit With Typescript

TypeScriptとSPA経験者が、Svelte・Sveltekitの学習するコンテンツを提供

#svelte#svelte5#learning-content#japanese-language#sveltekit#typescript
Demo Download

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

日本語による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システムを中心に、実践的なコード例と共に解説しています。

🚀 実装例プロジェクト

学習内容を実際のコードで確認できる実装例プロジェクトを提供しています。

ブログシステム実装例

  1. 基礎版 - svelte5-blog-example ✅完成

  2. Markdown版 - svelte5-blog-markdown ✅完成

    • Markdownファイルベースの実践的なブログシステム
    • 全文検索、タグクラウド、読了時間計算機能付き
    • デモサイト

TODOアプリ実装例

  1. TODOマネージャー - svelte5-todo-example ✅完成
    • Svelte 5 Runesシステムを使用した完全なTODOアプリ
    • GitHub風のモダンなUI/UXデザイン
    • ダークモード対応、LocalStorage永続化
    • フィルタリング（全て/アクティブ/完了）機能

認証システム実装例

  1. 基本認証 - 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対応（計画中）

🗂 コンテンツ構成

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️⃣ Svelteアーキテクチャ（計画中）

  • SPA + 既存API統合パターン
  • BaaS統合（Firebase、Supabase）
  • GraphQL統合
  • マイクロフロントエンド

7️⃣ SvelteKit基礎編

  • SvelteKit概要とアーキテクチャ
  • プロジェクト構造
  • 特殊ファイルシステム
  • レンダリング戦略（基礎）
  • app.d.tsの役割

8️⃣ SvelteKitルーティング

  • 基本ルーティング
  • 動的ルーティング
  • 高度なルーティング

9️⃣ SvelteKitデータ取得

  • Load関数の基礎
  • TypeScript型の自動生成システム
  • データフローの詳細
  • SPAモードとデータ無効化
  • ストリーミングSSR
  • データフェッチング戦略
  • 高度なデータフェッチング戦略

🔟 SvelteKitアーキテクチャ詳解

  • レンダリング戦略（詳解）
  • レンダリングパイプライン
  • アクセスログと分析戦略
  • データロードアーキテクチャ
  • ルーティング内部動作

1️⃣1️⃣ SvelteKitサーバーサイド編

  • フォーム処理とActions（✨ 実行フロー図を大幅拡充）
    • Actions実行タイミングのシーケンス図
    • Named Actions（複数Actions）のフロー
    • use:enhanceライフサイクル図
    • バリデーションフロー図
    • ファイルアップロードフロー図
  • WebSocket/SSE
  • サーバーサイド処理（準備中）
  • APIルート設計（準備中）
  • Hooks（準備中）

1️⃣2️⃣ SvelteKitアプリケーション構築編

  • セッション管理と認証戦略
  • 認証ベストプラクティス
  • テスト戦略
  • 状態管理パターン
  • 認証・認可（準備中）
  • データベース統合（準備中）
  • 環境変数管理（準備中）
  • エラーハンドリング（準備中）

1️⃣3️⃣ SvelteKitエンタープライズ開発（計画中）

  • レイヤードアーキテクチャ
  • ドメイン駆動設計（DDD）
  • リポジトリパターン
  • 依存性注入（DI）
  • Clean Architecture実装

1️⃣4️⃣ SvelteKit最適化編

  • ビルド最適化
  • キャッシュ戦略
  • パフォーマンス最適化（準備中）
  • SEO最適化（準備中）

1️⃣5️⃣ SvelteKitデプロイ・運用編

  • プラットフォーム別デプロイ
  • 実行環境とランタイム
  • セキュリティ（準備中）
  • モニタリング（準備中）

1️⃣6️⃣ 実装例

  • ブログシステム（基礎・発展）
  • Cookie/Session認証
  • JWT認証
  • TODOアプリ
  • データフェッチング
  • WebSocket実装
  • Mermaidダイアグラム（SSR対応）

1️⃣7️⃣ リファレンス

  • Svelte 5 完全リファレンス
  • SvelteKit 2.x 完全リファレンス

1️⃣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統合

カスタム機能

  • 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 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の下で公開されています。 学習目的での自由な利用・改変・配布が可能です。

🙏 謝辞

📬 連絡先

Note: このドキュメントは継続的に更新されています。Svelte 5の最新機能やMermaidダイアグラムによる視覚的解説を随時追加しています。最新の情報は公開サイトをご確認ください。

Last Updated: 2025年9月20日 - 実装例プロジェクトの最新化完了。resolveRouteをresolveに移行、svelte5-todo-exampleプロジェクトの追加

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes