Claude CodeでREADME.mdのアーキテクチャを適用させたら素敵なアプリができた
はじめに
2025年6月、ClaudeのProプランで「Claude Code」が利用可能になりました。今回、最初から「このアプリを作りたい」という明確なゴールは持たずに、プロジェクト設計の方針だけを記載したREADME.mdをClaude Codeに渡し、何を作るかから提案してもらうというアプローチで開発を進めました。
提示した条件はシンプルで、「このアーキテクチャと使いたいパッケージを活かせるオープンソースのAPIを提案して」という一言だけです。Claude Codeは複数のAPIを候補として挙げ、それぞれの特徴まで説明してくれました。その中からPokéAPIを選択すると、即座にプロジェクト構成を提案し、コーディングを開始。なんと一発で動作する素晴らしいアプリが完成しました。
Claude Codeの提案力
Claude Codeに「Dio と Retrofit を使ったFlutterサンプルアプリを作りたい。これらのパッケージが活かせるオープンソースのAPIを提案して」と依頼したところ、以下の提案をしてくれました：
- OpenWeatherMap API - 天気予報データ
- NewsAPI - 世界中のニュース記事
- PokéAPI - ポケモンの詳細データ
- REST Countries - 国の情報
各APIの特徴や使いやすさ、認証の有無まで説明してくれた上で、PokéAPIを選択すると、即座にコーディングを開始しました。
渡したREADME.md
実際にClaude Codeに指示したREADME.mdは以下のような内容です：
# Flutter 基本開発方針
## アーキテクチャ
MVVM + Repository
## 利用パッケージ
### 状態管理
- hooks_riverpod
- state_notifier
### API通信
- dio
- retrofit
### モデルユーティリティ
- freezed
- json_serializable
### その他
- logger
- flutter_lints
- mocktail
このシンプルな情報だけで、Claude Codeは完全に動作するアプリを作成してくれました。
できあがったアプリの特徴
1. 一貫性のあるコード生成
- 既存プロジェクトのパターンを理解し、同じスタイルでコードを生成
- ネーミング規則やディレクトリ構造を自動で踏襲
-
pokemon_list_page.dartとpokemon_detail_page.dartで一貫したファイル構造
2. 包括的な機能実装
- API通信、状態管理、UI構築を一括で実装
- エラーハンドリング、ロギング、ローディング状態の管理も含めて実装
- テストコードまで生成
3. ベストプラクティスの自動適用
- MVVM + Repository パターンの適切な実装
- Freezed によるイミュータブルなモデル設計
- Riverpod のプロバイダー設計のベストプラクティス
4. リッチなUI
かなりデザイン面もリッチにしてくれました：
- キャラクターのサムネイル画像を丸く括る
- パラメータをカードのようなレイアウトに
- センタリングなど配置も良い感じ
5. インフィニティスクロール対応
リストは20件ずつ読み込むインフィニティスクロールに自動対応。スクロール位置がリストの下端に近づくと、続きの20件を読み込んでリストを延長する実装になっていました。
更新されたREADME.md
開発結果に合わせて、Claude CodeはREADME.mdも丁寧にアップデートしてくれました：
# Pokemon App
PokéAPIを使用したFlutterサンプルアプリケーション。
MVVM + Repositoryアーキテクチャ、hooks_riverpod、
freezed、retrofitなど、モダンなFlutter開発の
ベストプラクティスを実装しています。
## セットアップ
1. 依存関係のインストール
2. コード生成
3. アプリの起動
## 機能
- ポケモン一覧表示（無限スクロール対応）
- ポケモン詳細表示
- プルダウンリフレッシュ
- エラーハンドリング
- ロギング
もともとの使用したいパッケージ一覧とざっくりとしたフォルダ構成も、きちんと整理してまとめてくれています。そしてセットアップ手順や適用アーキテクチャ、簡単な機能概要まで追加してくれる親切っぷりです。
実装の詳細
Dio/Retrofitを活用したAPI通信
@RestApi(baseUrl: "https://pokeapi.co/api/v2/")
abstract class PokemonApi {
factory PokemonApi(Dio dio, {String baseUrl}) = _PokemonApi;
@GET("/pokemon")
Future<PokemonListResponse> getPokemonList(
@Query("limit") int limit,
@Query("offset") int offset,
);
@GET("/pokemon/{name}")
Future<PokemonDetail> getPokemonDetail(
@Path("name") String name,
);
}
型安全で保守性の高いAPI通信を実現してくれました。
MVVM + Repository アーキテクチャ
[UI層]
View (HookConsumerWidget)
↓
ViewModel (StateNotifier)
↓
[データ層]
Repository
↓
ApiClient (Retrofit)
↓
Dio
明確な責務分離により、テストがしやすく、変更に強い設計が実現されています。
Claude Codeを使った開発のポイント
1. プロジェクトの方向性を明確に伝える
「Dio と Retrofit を使ったFlutterサンプルアプリを作りたい。これらのパッケージが活かせるオープンソースのAPIを提案して」
2. 技術スタックを事前に指定
- 使用するパッケージ（hooks_riverpod, freezed, retrofit など）
- アーキテクチャパターン（MVVM, Clean Architecture など）
- コーディング規約やスタイル
3. 段階的に機能を追加
- まず基本機能を実装してもらい、動作確認
- その後、追加機能を段階的に依頼
- 各段階で生成されたコードをレビュー
4. 不明点や改善点は積極的に質問
- 「なぜこの実装にしたの？」
- 「この部分をもっと効率化できない？」
- 「エラーハンドリングを追加して」
まとめ
Claude Codeは、README.mdに記載したアーキテクチャとパッケージ情報だけで、以下を自動的に実現してくれました：
✅ API候補の提案と特徴説明
✅ プロジェクト全体の設計と実装
✅ ベストプラクティスに基づいたコード生成
✅ エラーハンドリングやロギングの実装
✅ リッチなUIとUX
✅ README.mdの自動更新
特に印象的だったのは、「何を作るか」から提案してくれる点です。単にコードを生成するだけでなく、開発の方向性から一緒に考えてくれるのがClaude Codeの大きな強みだと感じました。
Flutter開発者にとって、Claude Codeは圧倒的な開発速度の向上と、ベストプラクティスを学ぶ機会を提供してくれるツールです。ただし、生成されたコードを理解し、必要に応じてカスタマイズできる能力は、これまで以上に重要になってきています。
詳細な実装内容や、Dio/Retrofit、MVVM+Repositoryパターンの具体的な解説は、以下の記事で詳しく紹介しています：
👉 Claude CodeでREADME.mdのアーキテクチャを適用させたら素敵なアプリができた
記事では以下の内容も詳しく解説しています：
- Dio/Retrofitの型安全なAPI通信の実装
- MVVM + Repositoryアーキテクチャの詳細
- hooks_riverpod、freezed、go_routerの活用方法
- 実際の開発フローと生成されたコード
- Flutter開発者にとってのメリット・デメリット
ぜひ本編記事もご覧ください！