レシピ#4-1: Claude Codeを使った効率的な開発ワークフロー

はじめに

Section 3では、AIを使った基本的な開発プロセスを学びました。このセクションでは、より実践的に、Claude Codeを使った効率的な開発方法を学びます。

ここで紹介する「AIに任せやすい設計」は、ビルダーが一人で開発を回し、作ったものを人に届けるまでのスピードを落とさないための秘伝でもあります。

Claude Codeでの開発フロー

1. プロジェクトで起動する

# プロジェクトディレクトリに移動
cd ~/Development/ai-x-flutter/my_app

# Claude Codeを起動
claude

ターミナルに対話画面が開きます。以後は日本語で指示するだけで、Claude Codeがファイルを読み、編集し、flutter run などのコマンドも実行してくれます。

2. AIモデルを選択

Claude Codeでは /model コマンドでモデルを切り替えられます。

使い分けの目安: - Opus — 設計判断・大きな実装・難しいバグ調査 - Sonnet — 日常の実装・小さな修正(高速で安定)

避けるべき: コード生成を他社の不安定なモデルに任せること(書き換えが大きい、依存関係を壊しやすい)

3. 効果的なプロンプトの書き方

❌ 悪い例

TODOアプリを作って

✅ 良い例

StatefulWidgetを使ったシンプルなTODOアプリを作ってください。

要件:
- TODOの追加（TextFieldとボタン）
- TODOリストの表示（ListView）
- 完了/未完了の切り替え（Checkbox）
- TODOの削除（スワイプまたはボタン）

状態管理:
- Riverpodなどの外部パッケージは使わない
- StatefulWidgetで状態を管理
- データ構造はシンプルなListで

ファイル構成:
- lib/main.dart に全て記述
- 後で分割しやすい構造にする

4. コードレビューをAIに依頼

生成されたコードを必ず確認します：

このコードをレビューしてください：

1. Flutter 3.27のベストプラクティスに従っているか
2. 不要な複雑さはないか
3. パフォーマンス上の問題はないか
4. より良い書き方があれば提案してください

5. エラー修正の依頼

エラーが出たら、エラーメッセージをそのまま貼り付けます：

以下のエラーを修正してください：

[エラーメッセージ全文をコピペ]

このエラーが発生した状況:
- ◯◯の機能を追加しようとした
- △△のボタンを押したら発生

Claude Code自身が flutter analyze や flutter test を実行してエラーを確認しながら直せるのが、エディタ型ツールとの大きな違いです。

Claude Codeの便利な機能

1. ファイル名で参照

ファイル名を書くだけで、そのファイルを読んで作業してくれます。

main.dart のコードと一貫性を保ちながら、
新しい設定画面 lib/screens/settings_page.dart を作成してください

2. コマンドの実行まで任せる

flutter test を実行して、失敗したテストがあれば直してください

編集 → 実行 → 確認 → 修正のループを、Claude Codeが一人で回します。

3. CLAUDE.md: プロジェクトの約束事を覚えさせる

プロジェクト直下に CLAUDE.md を置くと、起動のたびに自動で読み込まれます。

# CLAUDE.md
- Flutter 3.27 / Dart 3.6 / Material Design 3
- 状態管理は StatefulWidget（Riverpod等は使わない）
- 小さな自己完結型Widgetパターンで書く

毎回同じ前提を伝え直す必要がなくなります。

4. /clear: 話題を切り替える

一つのタスクが終わったら /clear で会話を新しくします。長い会話を引きずらないことが、精度とコスト(トークン)の両方に効きます。

5. Gitもそのまま頼める

ここまでの変更をコミットしてください。メッセージは日本語で。

実践的なワークフロー例

Step 1: アプリのアイデアを整理

まずWeb版Claudeなどで設計を相談：

個人開発で、Flutterを使って以下のアプリを作りたいです：
- シンプルな家計簿アプリ
- 収入/支出の記録
- カテゴリ別の集計
- グラフ表示

個人開発なので、できるだけシンプルな構成にしたいです。
アーキテクチャの提案をお願いします。

Step 2: プロジェクト作成とClaude Code起動

flutter create kakeibo_app
cd kakeibo_app
claude

Step 3: データ構造を決める

Claude Codeで以下のようにプロンプト：

家計簿アプリのデータ構造を設計してください。

必要な情報:
- 日付
- 金額
- カテゴリ（食費、交通費など）
- 収入/支出の区別
- メモ（任意）

以下の形式で提案してください:
1. Dartのクラス定義
2. JSONシリアライゼーション（必要なら）
3. サンプルデータ

注意: できるだけシンプルに。freezedなどの複雑なパッケージは避ける。

Step 4: 画面を作る

先ほど定義したデータ構造を使って、
メイン画面を作成してください。

画面構成:
- AppBar: タイトルと追加ボタン
- Body: 取引リスト（新しい順）
- BottomNavigationBar: ホーム/統計/設定

状態管理: StatefulWidget
データ保存: まずはメモリ内のListで（後でSharedPreferences化）

Step 5: 機能を追加

段階的に機能を追加していきます：

取引の追加機能を実装してください。

1. FloatingActionButtonを押すとダイアログ表示
2. ダイアログの内容:
   - 金額入力（数値キーボード）
   - カテゴリ選択（ドロップダウン）
   - 収入/支出の切り替え（Switch）
   - メモ入力（TextField）
3. 保存ボタンでリストに追加
4. リストを更新して表示

Step 6: リファクタリング

現在のコードを以下の方針でリファクタリングしてください:

1. ファイル分割
   - lib/models/transaction.dart
   - lib/screens/home_screen.dart
   - lib/widgets/transaction_list_item.dart

2. コードの整理
   - 不要なコメント削除
   - マジックナンバーを定数化
   - 重複コードの削減

3. 一貫性の確保
   - 命名規則の統一
   - インデントの統一

ベストプラクティス

1. 小さく始める

最初から完璧を目指さず、まず動くものを作ります。

✅ まず: 基本機能だけの動くアプリ
❌ 最初から: 完璧な設計 + 全機能

2. 段階的に改善

Step 1: メモリ内のデータ
Step 2: SharedPreferencesで永続化
Step 3: SQLiteで高度な検索

3. AIにレビューを依頼

このコードの問題点を指摘してください:
1. バグの可能性
2. パフォーマンス問題
3. 保守性の問題
4. Flutter/Dartのベストプラクティス違反

4. バージョンを明示

このプロジェクトは以下の環境を前提にしてください:
- Flutter 3.27
- Dart 3.6
- Material Design 3

前提はプロンプトに書くより、CLAUDE.md に書いておくのが確実です。

よくある問題と解決策

問題1: AIが古い書き方を提案

解決策:

Flutter 3.27 の最新の書き方で書き直してください。
特に以下に注意:
- Material Design 3
- 最新のナビゲーション
- 非推奨APIを使わない

問題2: 不要な複雑さ

解決策:

このコードをシンプルにしてください。
- 不要な抽象化を削除
- 使われていないクラス/メソッドを削除
- より直感的な実装に変更

問題3: 依存関係の問題

解決策:

pubspec.yamlの依存関係を最小限にしてください。
本当に必要なパッケージだけを残し、
不要なものは標準ライブラリで代替してください。

まとめ

Claude Codeでの開発フロー：

アイデア整理 - Web版Claudeで設計相談
プロジェクト作成 - flutter create + claude 起動
データ構造設計 - シンプルなクラス定義
画面作成 - 段階的に機能追加
リファクタリング - コードの整理と分割
レビュー - AIに問題点を指摘してもらう

重要な原則: - 小さく始める - 段階的に改善 - 外部パッケージは最小限 - 前提は CLAUDE.md に書く - AIを信頼しすぎない（必ず確認）

次のレシピでは、なぜRiverpodなどの複雑な状態管理ライブラリを避けるべきかを解説します。

➡️ 次のレシピへ: 02_why_avoid_riverpod.md