🌐 Read this article in English
Claude Codeの公式情報はAnthropic公式ドキュメントを参照。MCPの仕様はModel Context Protocol公式サイトで確認できる。
Claude Codeは自動化だけでなく、本格的なアプリ開発にも活用できる。自分はClaude Codeとのペアプログラミングで家計管理ダッシュボード「THE STASH」を開発した。
freee APIと連携して収支を可視化し、AIが節約アドバイスまでくれるWebアプリだ。この記事では、Claude Code app developmentの実践事例として、設計から運用までの全工程を紹介する。
THE STASHとは
THE STASHはStreamlitで構築した家計管理ダッシュボードだ。年間100万円の貯蓄を目標に、毎月の収支をリアルタイムで追跡する。
主な機能は以下のとおり：
- freee API連携 — 銀行口座・クレジットカードの取引データを自動取得
- 収支ダッシュボード — 月次の収入・支出・貯蓄額をグラフで視覚化
- カテゴリ分析 — 食費、交通費、サブスクリプションなどカテゴリ別の詳細分析
- AI分析 — Claude APIを使って支出パターンを分析し、具体的な節約提案を生成
- 月次サマリ — 毎月の振り返りレポートを自動生成
📊 THE STASHシステム構成
技術スタックの詳細
the-stash/
├── app.py # Streamlitメインアプリ
├── src/
│ ├── analyzer.py # 分析エンジン
│ ├── narrator.py # AI文章生成
│ ├── database.py # SQLite管理
│ └── freee_client.py # freee API連携
├── scripts/
│ └── daily_sync.py # 日次データ同期
└── docs/
├── design-guidelines.md
└── detailed-design.md技術選定は以下の基準で行った：
- フロントエンド: Streamlit — PythonだけでWebアプリが作れる。デザイン力不要
- データベース: SQLite — 軽量で設定不要。個人用途には十分
- 会計API: freee API — 銀行口座やクレカの取引を自動取得
- AI分析: Claude API（Anthropic SDK） — 支出パターンの分析と節約アドバイス生成
- 公開: ngrok固定URL — 外出先からスマホでもダッシュボードにアクセス可能
Claude Code app developmentの開発プロセス
このアプリはほぼ全てClaude Codeとの対話で開発した。具体的な進め方を3つのステップで紹介する。
Step 1: 設計フェーズ
まず「家計管理アプリを作りたい。freeeのデータを使って、月の貯蓄目標を管理したい」と伝えた。するとClaude Codeが設計ドキュメントを自動生成してくれた。
自分はそのドキュメントをレビューし、「ここはこうしたい」「この機能は不要」とフィードバックを返す。数往復のやりとりで設計が固まった。この設計ドキュメントはdocs/配下に保存され、以降の開発でClaude Codeが常に参照する。
Step 2: 実装フェーズ
設計が決まったら、あとは「作って」と指示するだけだ。Claude Codeがファイルを作成し、コードを書き、テストを実行する。一方で、自分が手動で行った作業もある：
- freee APIのOAuth認証 — セキュリティ上、認証情報の設定は手動で実施
- UIデザインのフィードバック — 「もっとシンプルに」「グラフの色を変えて」など視覚的な調整
- ビジネスロジックの判断 — 「この支出は固定費として分類」「この口座は除外」など分類ルールの決定
つまり、Claude Code app developmentでは人間は「何を作りたいか」「どう見せたいか」の判断に集中し、コーディングの大部分はAIに任せるスタイルになる。
Step 3: 運用フェーズ
日次データ同期はスケジュールタスクとして自動化した。毎日freee APIから最新の取引データを取得してSQLiteデータベースを更新する。
さらに、ngrokの固定URLを設定して外出先からスマホでもアクセスできるようにした。その結果、いつでもどこでも家計状況を確認できる。
AIとアプリ開発するための5つのコツ
- 設計ドキュメントを先に作る — いきなりコードを書かせると方向性がブレる。設計書で合意してから実装に入る
- 小さく作って頻繁にフィードバック — 一気に全機能を作らせると修正コストが膨大になる
- セキュリティは自分で管理 — APIキーやOAuth認証は手動で設定する。AIに認証情報を扱わせない
- デプロイまで含めて自動化 — 開発して終わりではなく、公開・運用・データ同期まで含めて設計する
- 段階的に機能追加 — 最初はMVP（最小限の機能）でリリースし、使いながら機能を追加していく
Claude Code app developmentの最大の魅力は、プログラミングスキルの有無に関わらず、アイデアを素早く形にできる点だ。設計力と判断力さえあれば、AIが実装を担当してくれる。
📋 AIとアプリ開発する時のチェックリスト
🎯 設計フェーズ
🔨 実装フェーズ
🚀 運用フェーズ
次回予告
次回は最終回、デスクトップ自動化編。Windows MCPとk-chrome MCPを使った、ブラウザとデスクトップアプリの自動操作テクニックを実践的に紹介する。
