Claude CodeでREADME.mdのアーキテクチャを適用させたら素敵なアプリができた
スポンサーリンク

Claude Codeで一発!AIの提案を受けてDio/Retrofit使ったPokemon APIによるポケモン図鑑アプリを作ってみた

生成AIを活用して、Flutterのアーキテクチャを記載したREADME.mdを渡すだけで 簡単にサンプルアプリができた

ヒーラー
アプリを作る上で、適用したいアーキテクチャなどの希望を記載したREADME.mdを渡したら、Claudeがアプリを提案して一発で作ってくれた

はじめに

2025年6月、ClaudeのProプランとMaxプランで「Claude Code」が利用可能になり、AIコーディングツールの世界に大きな変革が訪れました。
GitHub Copilot、Gemini CLIに続き、Anthropic社が満を持してリリースしたこのツールは、ターミナルから直接Claudeと対話しながらコード生成ができる画期的な開発支援ツールです。

今回の試みは、最初から「このアプリを作りたい」という明確なゴールは持たずに、プロジェクト設計の方針だけを記載したREADME.mdをClaude Codeに渡し、何を作るかから提案してもらうというアプローチで開発を進めました。

提示した条件はシンプルで、「このアーキテクチャと使いたいパッケージを活かせるオープンソースのAPIを提案して」という一言だけです。
Claude Codeは複数のAPIを候補として挙げ、それぞれの特徴まで説明してくれました。その中からPokéAPIを選択すると、即座にプロジェクト構成を提案し、コーディングを開始。なんと一発で動作する素晴らしいアプリが完成しました。

この記事では、README.md主導のClaude Code開発がどのように進んだか、できあがったアプリの詳細まで、順を追って解説します。

概要

今回の開発では、README.mdに記載したアーキテクチャとともに、使用したいパッケージの中でも特に「Dio と Retrofit を活かせるAPIを提案して」という曖昧な要求をしました。
これに対して、Claude Codeは以下のような提案をしてくれました:

  • OpenWeatherMap API - 天気予報データ(https://openweathermap.org/api)
  • NewsAPI - 世界中のニュース記事 (https://newsapi.org/)
  • PokéAPI - ポケモンの詳細データ (https://pokeapi.co/)
  • REST Countries - 国の情報(国旗、人口、通貨、言語など)(https://restcountries.com/)

各APIの特徴や使いやすさ、認証の有無まで説明してくれた上で、最終的にPokéAPIを選択すると、即座にプロジェクト構成を提案し、コーディングを開始しました。

環境

試した環境・用意したものは以下のとおりです。

  • Mac (macOS Tahoe: バージョン26.0.1)
  • Xcode (Version 26.0)
  • Android Studio (Android Studio Narwhal 4 Feature Drop | 2025.1.4)
  • Claude Proプランアカウント

適応したアーキテクチャ

MVVM + Repositoryアーキテクチャを採用し、hooks_riverpod、freezed、retrofitなど使用したモダンなFlutter開発を想定しています。

実際にClaude Codeに指示したREADME.mdは以下のとおりです。

# Flutter 基本開発方針

## アーキテクチャ
`MVVM + Repository`

参考: https://docs.flutter.dev/app-architecture/guide

## 利用パッケージ
### 状態管理
[hooks_riverpod](https://pub.dev/packages/hooks_riverpod)  
[state_notifier](https://pub.dev/packages/state_notifier)

### ルーティング
[go_router](https://pub.dev/packages/go_router)

### API通信
[dio](https://pub.dev/packages/dio) 
[retrofit](https://pub.dev/packages/retrofit)

### モデルユーティリティ
[freezed](https://pub.dev/packages/freezed)  
[json_serializable](https://pub.dev/packages/json_serializable)

### ロギング
[logger](https://pub.dev/packages/logger)

### コードスタイル
[flutter_lints](https://pub.dev/packages/flutter_lints)

### デザイン
[flutter_gen](https://pub.dev/packages/flutter_gen)

### テスト
[mocktail](https://pub.dev/packages/mocktail)
or
[mockito](https://pub.dev/packages/mockito)

### コード自動生成
[riverpod_annotation](https://pub.dev/packages/riverpod_annotation)  
[riverpod_generator](https://pub.dev/packages/riverpod_generator)  
[retrofit_generator](https://pub.dev/packages/retrofit_generator)  
[build_runner](https://pub.dev/packages/build_runner)  

参考: https://qiita.com/softbase/items/401d574a44a7b947b275

## フォルダ構成
    ├── lib
    |   ├── models
    │   ├── apis
    |   ├── repositories
    |   ├── pages
    │   ├── constants
    |   ├── views
    │   ├── providers    
    │   ├── utils
    │   ├── extensions
    ├── assets                      
    │   ├── images/

プロンプト

プロンプト指示

1. プロジェクトの方向性を明確に伝える

実際に実行したプロンプトは以下のとおりです。
先程のREADME.mdを添付して、以下のプロンプトを指示しました。

# 例:今回の最初の指示
「Dio と Retrofit を使ったFlutterサンプルアプリを作りたい。
これらのパッケージが活かせるオープンソースのAPIを提案して」

2. 技術スタックを事前に指定

この時点でREADME.mdに記載しておくポイントは以下のとおりかと思います。

  • 使用するパッケージ(hooks_riverpod, freezed, retrofit など)
  • アーキテクチャパターン(MVVM, Clean Architecture など)
  • コーディング規約やスタイル

3. 段階的に機能を追加

初期で作成されたコードから開発をスタートする上で、心構えとしてもっておきたいこと、その後繰り返し実施することになるだろうことは以下のとおりです。

  • まず基本機能を実装してもらい、動作確認
  • その後、追加機能を段階的に依頼
  • 各段階で生成されたコードをレビュー

4. 不明点や改善点は積極的に質問

そして想定外の動きをしたり機能が違ったりした場合には以下のようにQAを繰り返して品質を上げていくことができます。

  • 「なぜこの実装にしたの?」
  • 「この部分をもっと効率化できない?」
  • 「エラーハンドリングを追加して」

プロンプト実行結果

先程の曖昧なプロンプト指示に対し、以下のようなオープンAPIの使用を提案してくれました。

> 1. OpenWeatherMap API - 天気予報データ(https://openweathermap.org/api)
  2. NewsAPI - 世界中のニュース記事 (https://newsapi.org/)
  3. PokéAPI - ポケモンの詳細データ (https://pokeapi.co/)
  4. REST Countries - 国の情報(国旗、人口、通貨、言語など)(https://restcountries.com/)

ここでは、PokeAPIを選択しました。

その後は自動的に一連の動きが見られるサンプルアプリを作成してくれることになり、自動的にコーディングが進みました。
こちらは定期的に実行の許可をしながら待つのみです。

アプリ完成

初版のアプリが完成しました

実行が終了し、初版のアプリが完成しました。
画面はポケモンのキャラクターの一覧画面とキャラクターごとの詳細を表示する詳細画面の2つです。

かなりデザイン面もリッチにしてくれていることが分かります。

キャラクターのサムネイル画像を丸く括ってくれたり、パラメータを別にカードのようなレイアウトにしたり、センタリングなど配置も良い感じで仕上げてくれていることが分かります。

リストは20件ずつ読み込むインフィニティスクロールに対応してくれました。
以下のとおりスクロール位置がリストの下端に近づくと、続きの20件を読み込んでリストを延長するになっています。かなりアドリブが効いていますね。

README.mdアップデート

開発結果に合わせて、README.mdもアップデートしてくれました。

もともとの使用したいパッケージ一覧とざっくりとしたフォルダ構成も、きちんと整理しまとめてくれています。
そしてセットアップ手順や適用アーキテクチャ、簡単な機能概要まで追加してくれる親切っぷりです。

# Pokemon App

PokéAPIを使用したFlutterサンプルアプリケーション。
MVVM + Repositoryアーキテクチャ、hooks_riverpod、freezed、retrofitなど、モダンなFlutter開発のベストプラクティスを実装しています。

## 使用技術

### 状態管理
- hooks_riverpod - 状態管理
- flutter_hooks - Hooksを使用したWidget開発
- state_notifier - ViewModelの状態管理

### ルーティング
- go_router - 宣言的ルーティング

### API通信
- dio - HTTPクライアント
- retrofit - 型安全なRESTクライアント

### モデル
- freezed - イミュータブルなモデルクラス生成
- json_serializable - JSONシリアライゼーション

### その他
- logger - ロギング
- flutter_lints - Lintルール
- mocktail - テスト用モック

## セットアップ

### 1. 依存関係のインストール

```bash
fvm flutter pub get
```

### 2. コード生成

```bash
fvm flutter pub run build_runner build --delete-conflicting-outputs
```

または、ファイル変更を監視して自動生成する場合:

```bash
fvm flutter pub run build_runner watch --delete-conflicting-outputs
```

または、シェルスクリプトで一括実行:

```bash
./generate.sh
```

### 3. アプリの起動

```bash
fvm flutter run
```

## 開発コマンド

### コード生成
```bash
# 一度だけ実行
fvm flutter pub run build_runner build --delete-conflicting-outputs

# ファイル変更を監視
fvm flutter pub run build_runner watch --delete-conflicting-outputs
```

### テスト実行
```bash
# 全テスト実行
fvm flutter test

# 特定のテストファイル実行
fvm flutter test test/repository/pokemon_repository_test.dart

# カバレッジ付き実行
fvm flutter test --coverage
```

### コード解析
```bash
fvm flutter analyze
```

### コード整形
```bash
fvm flutter format .
```

## アーキテクチャ

```
[UI層]
 View (HookConsumerWidget)
 ↓
 ViewModel (StateNotifier)
 ↓
[データ層]
 Repository
 ↓
 ApiClient (Retrofit)
 ↓
 Dio
```

## フォルダ構成

```
lib/
├── model/                  # データモデル (Freezed)
├── api/                    # APIクライアント (Retrofit)
├── repository/             # リポジトリ層
├── page/                   # 画面UI
│   ├── pokemon_list_page/
│   │   ├── pokemon_list_page.dart
│   │   └── component/
│   │       ├── pokemon_list_state.dart
│   │       └── pokemon_list_viewmodel.dart
│   └── pokemon_detail_page/
│       ├── pokemon_detail_page.dart
│       └── component/
│           ├── pokemon_detail_state.dart
│           └── pokemon_detail_viewmodel.dart
├── provider/               # Riverpod Provider
├── util/                   # ユーティリティ
└── main.dart               # エントリーポイント
```

## 機能

- ポケモン一覧表示(無限スクロール対応)
- ポケモン詳細表示
- プルダウンリフレッシュ
- エラーハンドリング
- ロギング

## 参考リンク

- [PokéAPI](https://pokeapi.co/)
- [Flutter Architecture Guide](https://docs.flutter.dev/app-architecture/guide)

ここまでのまとめ

具体的なメリット

実際の開発で感じた具体的なメリットは以下のとおりです。

1. 一貫性のあるコード生成

  • 既存プロジェクトのパターンを理解し、同じスタイルでコードを生成
  • ネーミング規則やディレクトリ構造を自動で踏襲
  • 例:pokemon_list_page.dartpokemon_detail_page.dart で一貫したファイル構造

2. 包括的な機能実装

  • API通信、状態管理、UI構築を一括で実装
  • エラーハンドリング、ロギング、ローディング状態の管理も含めて実装
  • テストコードまで生成

3. ベストプラクティスの自動適用

  • MVVM + Repository パターンの適切な実装
  • Freezed によるイミュータブルなモデル設計
  • Riverpod のプロバイダー設計のベストプラクティス

4. 説明的なコメントとドキュメント

  • 各クラスやメソッドに適切なコメント
  • README.md の自動生成と更新
  • セットアップ手順やコマンドの明記

次のページでは適用したパッケージごとの具体的な有効性を説明し、最後にまとめています。
詳しく知りたい人は次のページも参考にしてください。


楽天ブックス
¥3,080 (2026/02/26 14:23時点 | 楽天市場調べ)
楽天ブックス
¥1,760 (2026/02/27 11:23時点 | 楽天市場調べ)
スポンサーリンク

Xでフォローしよう

おすすめの記事