レシピ#1-2: AI開発ツールの導入

基本的なFlutter開発環境(キッチン)の準備が整いました。次に行うのは、私たちの学習と開発を劇的に加速させる最新の開発ツール、すなわちAIをキッチンに導入することです。

このCookbookでは、以下の構成を使います。

1. Claude (Anthropic): Flutterエージェント開発に最適なAIモデル
2. Claude Code: このCookbook一押しの開発環境(Anthropic公式CLI)
3. Web版AIチャット: 設計や仕様整理を助けてくれる「相談役」

1. Claude: Flutterエージェント開発に最適なAIモデル

Claude (特にOpus 4.5) は、2025年12月時点でFlutterエージェント開発に最も適したAIモデルです。

なぜClaudeがFlutter開発で優れているのか？

1. 構造化コードの生成と再構成に強い - Flutterのツリー構造の把握が得意 - 大量ファイルにまたがる依存関係の理解 - デザイン → コードの変換 - 大規模リファクタリングの安定性

2. 説明が丁寧で一貫性がある - なぜこの構造になるのか - なぜこの依存関係を選ぶのか - Flutter公式ガイドラインとの対応 - バージョンの違いによる差異の説明

3. 長文の仕様 → コードが壊れにくい - 仕様文を正確に読み取る - 矛盾を自動で解消 - 一貫性を保った実装

4. ファイルセット全体を見た上で修正 - 構成ファイルのズレ検出 - インポートの整合性 - 依存性注入の整理 - 状態管理コードの粒度調整

5. 保守的で慎重なコード変更 - 必要な箇所だけを最小限に修正 - 予期せぬ破壊的変更が少ない - ベストプラクティスに沿ったコード

他のモデルとの比較（2025年12月時点）

重要な注意点： - Gemini 2.0 Flash Thinking: 高速で強力なモデルだが、実装時の書き換えが大きく、依存関係を壊しやすい傾向がある。設計相談やアイデア出しには優れているが、安定した実装にはClaudeを推奨。

2. Claude Code: このCookbook一押しの開発環境

Claude Codeは、Anthropic公式のAI開発環境です。ターミナルで claude と打つだけで、Claudeがプロジェクトのファイルを読み、編集し、コマンドを実行し、Gitまで扱う——コードを書くのはAI、人間は指示と確認という本書の開発スタイルを、そのまま形にしたツールです。

なぜClaude Codeを一押しにするのか

1. エージェントとして働く - 「機能を追加して」の一言で、関係ファイルを自分で探して読み、編集する - flutter analyze や flutter test を自分で実行し、エラーを見て自分で直す - 編集 → 実行 → 確認 → 修正のループを一人で回せる

2. モデルの力を直接使える - Anthropic公式なので、常に最新のClaudeモデルをそのまま使える - /model でOpus(難しい仕事)とSonnet(日常の仕事)を切り替え

3. プロジェクトの約束事を覚えさせられる - CLAUDE.md に前提(バージョン・設計方針・禁止事項)を書いておけば、起動のたびに自動で読み込まれる

4. エディタを選ばない - ターミナルさえあれば動くので、普段のエディタ(VS Code、Zed等)はそのまま - エディタ側のAI機能に依存しないため、環境が変わっても同じ流儀で開発できる

2-1. Claude Codeを始めよう

# Claude Code CLIをインストール
npm install -g @anthropic-ai/claude-code

# プロジェクトディレクトリで起動
cd /path/to/your/flutter-project
claude

初回起動時にAnthropicアカウントでログインします(Claude Proなどの課金で利用できます)。

2-2. 基本的な使い方

起動したら、日本語で指示するだけです。

> カウンターアプリにリセットボタンを追加してください
[Claude Codeが main.dart を読み、編集する]

> flutter run で動かして確認してください
[アプリが起動する]

> ここまでの変更をコミットしてください
[git commit まで実行される]

よく使う操作:

2-3. GitHub連携版 — リモート/PR開発

Claude CodeはターミナルのCLI版のほかに、GitHub連携版があります。クラウド環境でリポジトリをクローンし、編集・コミット・プッシュまで実行して、Pull Requestでレビューできます。

使い所: - GitHub Issue対応(ブランチ管理が明確) - Pull Requestベースのレビュー・チーム開発 - 手元にPCがない場面での修正

[Claude Code環境]
1. ファイル編集・修正 → 2. Gitコミット → 3. ブランチにプッシュ
[あなたのPC]
4. git pull または PR確認

2-4. 学習プロンプト例

💡 学習プロンプト #1 (基本的なウィジェット)

Flutterの`Column`と`Row`ウィジェットの違いを、コード例付きで説明してください。 簡単なサンプルアプリも作成してください。

💡 学習プロンプト #2 (エラー修正)

このエラーを修正してください： [エラーメッセージをコピー＆ペースト]

💡 学習プロンプト #3 (新機能実装)

カウンターアプリにリセットボタンを追加してください。 ボタンを押すとカウンターが0に戻るようにしてください。

3. Web版AIチャット: 補完的な相談役

Claude Codeに加えて、Web版のAIチャットサービスも併用すると、より効果的な開発が可能です。

3-1. 推奨されるWeb版AIチャット

• Claude - 設計整理やエラー解決に最適
• ChatGPT - アイデア出しや概念理解に有用
• Google AI Studio - Geminiを使った開発（※コード生成は避ける）

3-2. 効果的な使い分け

Claude Codeを使う場面： - コード実装 - リファクタリング - エラー修正 - UI構築

Web版AIチャットを使う場面： - アプリのアイデア出し - 設計の壁打ち - 概念の理解（「状態管理とは？」など） - エラーメッセージの解読

4. その他のツールについて

AI搭載エディタ: VS CodeベースのAI搭載エディタも存在しますが、本書では扱いません。エディタ固有の機能に依存すると、環境が変わったときに開発の流儀ごと作り直しになるためです。Claude Codeなら、どのエディタとも組み合わせられます。

Google Antigravity: 2025年11月に発表されたAI統合開発環境ですが、ファイルの破損や破壊的な変更が報告されており、現時点では実験段階です。メインの開発環境としてはClaude Codeを推奨します。試す場合は、モデルにClaudeを使用し、必ずGit管理のうえ、小さなプロトタイプから始めてください。

5. 実践的な開発フロー

推奨される開発環境構成

メイン開発:

Claude Code (エージェント)
  ↓
Claude Opus 4.5 / Sonnet 4.5 (AIモデル)
  ↓
Flutter プロジェクト

補助ツール: - 普段のエディタ(VS Code、Zed等): コードを読む・眺める - Web版Claude: 設計相談、アーキテクチャ検討 - ChatGPT: アイデア出し、概念理解

学習のコツ

小さく始める - 最初は簡単なウィジェットから - 徐々に複雑な機能に挑戦

AIを「教師」として使う - 分からないことは遠慮なく質問 - コードの説明を求める - なぜそうなるのか理由を聞く

構造を理解する - ウィジェットの配置や役割を把握する - 全てのコードを理解しようとしない - どの部分が何をしているか大枠を掴む

どんどん試す - 思いついたアイデアをすぐ実装してみる - うまく動かなければAIに相談 - 試行錯誤から多くを学べる

まとめ

これで、あなたの開発環境(キッチン)には、強力なAI開発ツールが揃いました。

最適な構成: - メイン開発環境: Claude Code(+ 普段のエディタ) - モデル: Claude Opus 4.5(難所)/ Sonnet 4.5(日常) - GitHub連携開発: Claude Code GitHub連携版(リモート/PR開発) - 補完的な相談: Web版AIチャット(Claude、ChatGPT) - 避けるべき: Geminiでのコード生成、不安定なAntigravity(現時点)

この構成は、プログラミング学習において、あなたの成長を強力にサポートしてくれます。分からないことを恐れずに、どんどんAIに質問してみましょう。

次のステップ: 実際にFlutterアプリを作成してみましょう。

➡️ 次のレシピへ: 03_creating_first_app.md