macOS × Blazor WASM × SQLiteで始めるPWA開発ロードマップ（＋MCP連携・AI活用）
趣味でPWAアプリを作ろうと思ったとき、以下の構成を全部盛りしたくなりました。
- macOS 開発環境
- Blazor WebAssembly（WASM）
- PWA（オフライン対応）
- SQLite（sql.jsでブラウザ対応）
- Cursor または VS Code + Continue（AIエディタ）
- Model Context Protocol（MCP）を使ってAIに文脈を渡す
- Docker で開発・テスト・本番の環境分離
- テスト環境では「現在時刻」を自由に変更可能にする
- クリーンアーキテクチャで整理された構成
- GitHub + GitHub Actions で CI/CD
- Azureでの本番ホスティング
- 自動テスト（xUnit / bUnit）対応
ただ、いきなり全部盛り込むのは難しい…。
ということで、習熟度と難易度を考慮したロードマップ形式でタスクを分割しました！
ステップ0：準備フェーズ
| タスク | 内容 |
|---|---|
| 開発環境の整備 | .NET SDK / Node.js / Docker / GitHub |
| エディタ設定 | Cursor or VS Code + Continue |
| GitHubリポジトリ作成 | ソース管理・CI/CDに備える |
ステップ1：PWAの基本構築（Blazor WASM × SQLite）
- Blazor WASM + PWA テンプレートで新規作成
- SQLiteは
sql.js（SQLiteをWebAssemblyで動かすライブラリ）を使用 - C# から JSInterop を使って sql.js を操作
- データを
.sqliteや.json形式でエクスポートできる仕組みを追加
ステップ2：クリーンアーキテクチャ化
-
Domain,Application,Infrastructure,UIに分割 -
ISqliteServiceなど抽象化してテスト対応 - DIコンテナで依存注入を整理
ステップ3：Docker対応（開発・テスト・本番環境）
- Dockerfile作成 → Blazorアプリをコンテナ化
- docker-composeでdev/test環境を分離
ステップ4：現在時刻制御（テスト用）
-
IDateTimeProviderで現在時刻の抽象化 - テスト用Docker環境で日時を自由に設定
ステップ5：自動テストの導入
- xUnit でアプリ層ロジックのユニットテスト
- bUnit でUIコンポーネントのテスト
- SQLiteデータを使った検証も可能
ステップ6：Model Context Protocol（MCP）との連携
- SQLiteファイル（*.sqlite）やJSON形式でデータをエクスポート
- MCPに読み込ませることで、設計やデータレビューに活用
- GitHub ActionsやローカルスクリプトからMCP連携も可能に
ステップ7：CI/CD + Azureデプロイ
- GitHub Actionsで自動ビルド・テスト
- Azure Static Web Apps にデプロイ
- CI内でJSONデータも出力しMCP連携まで自動化
ステップ8：拡張・まとめ
- コード整理・コメント追加
- 必要なら Azure Functions でAPI/バッチ追加
- 公開してポートフォリオ化！
SQLiteはPWAでどう動かす？ → sql.js（WASM）が鍵！
SQLiteはPWA（=ブラウザ）では通常使えませんが、
sql.js を使うことで WebAssembly 経由でSQLiteを実行できます。
- ブラウザ上で完全なSQL構文が使える
-
.sqlite形式または JSON でエクスポート可能 - MCPと組み合わせてAIコンテキスト化できる
注意点：
- 一部SQLiteの機能は非対応（大半はOK）
- バイナリデータ・大規模DBには不向き（PWAの制約）
おわりに
「最初から全部は無理」だからこそ、
段階的に実用性あるタスクに落とし込むのがポイントです！
同じように構成を模索している人の参考になれば嬉しいです。
🧠 この投稿は、ChatGPTなどのAIアシスタントのサポートを受けながら執筆されています。
アイデア整理や構成の検討、記述内容の一部においてAIの支援を活用しています。