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

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

このCookbookでは、プログラミング初心者や学習者にとって最高の「教師」となりうる、以下のツールを中心に活用していきます。

Claude (Anthropic): Flutterエージェント開発に最適なAIモデル
Cursor: Claudeを使うAIコーディングエディタ
Web版AIチャット: 設計や仕様整理を助けてくれる「相談役」
Claude Code: ターミナルやGitHubで使えるAI開発環境

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

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

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

構造化コードの生成と再構成に強い - Flutterのツリー構造の把握が得意 - 大量ファイルにまたがる依存関係の理解 - デザイン → コードの変換 - 大規模リファクタリングの安定性
説明が丁寧で一貫性がある - なぜこの構造になるのか - なぜこの依存関係を選ぶのか - Flutter公式ガイドラインとの対応 - バージョンの違いによる差異の説明
長文の仕様 → コードが壊れにくい - 仕様文を正確に読み取る - 矛盾を自動で解消 - 一貫性を保った実装
ファイルセット全体を見た上で修正 - 構成ファイルのズレ検出 - インポートの整合性 - 依存性注入の整理 - 状態管理コードの粒度調整
保守的で慎重なコード変更 - 必要な箇所だけを最小限に修正 - 予期せぬ破壊的変更が少ない - ベストプラクティスに沿ったコード

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

モデル	コーディング安定性	大規模コード	Flutter/UI	特徴
Claude Opus 4.5	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	最高峰の理解力、複雑な実装に最適
Claude Sonnet 4.5	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	高速で安定、簡易タスクに最適
ChatGPT GPT-5.1	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐	速度は速いが最新Flutter機能に弱い
Gemini 2.0 Flash Thinking	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	高速で強力だが、実装の安定性に課題

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

2. Cursor: Claudeを使うAIコーディングエディタ

Cursorは、Claudeが統合された次世代のコードエディタです。VS Codeをベースにしており、使い慣れた環境で強力なAI機能を利用できます。

なぜCursorがFlutter開発に向いているのか？

安定したコード生成 - ファイルの破損や予期せぬ変更が少ない - 既存コードの構造を尊重した修正 - Flutter/Dartの構文理解が安定している
コンテキスト理解 - プロジェクト全体を理解した上でコード生成 - ファイル間の依存関係を正確に把握 - 一貫性のあるコード提案
エラー修正が速い - エラーログを読んで自動修正 - 依存関係の問題も解決 - 初心者がつまずくポイントを解消
UI構築の効率化 - Flutterのウィジェット構造を理解 - Material DesignやCupertinoとの整合性 - デザイン → コードへの変換

2-1. Cursorを始めよう

Cursorにアクセスします
ソフトウェアをダウンロードして、PCにインストールします
VS Codeの設定をインポートできます（既にVS Codeを使っている場合）

2-2. Cursorでの基本的な使い方

Cursorには、Claudeと対話するための3つの主要な機能があります。

A. Composer（Ctrl+I / Cmd+I）- プロジェクト全体に対する指示

特徴: - プロジェクト全体を見て、複数ファイルにまたがる変更を実行 - 新しいファイルの作成や、大規模なリファクタリングに最適 - 変更内容をプレビューして、承認/拒否できる

使い方: 1. Ctrl+I（Windows/Linux）またはCmd+I（Mac）を押す 2. 画面下部にComposerが開く 3. 指示を入力（例：「TODOアプリのホーム画面を作成してください」） 4. Claudeが提案を生成したら、AcceptまたはReject

使用例:

lib/配下にhome_page.dartを作成して、以下の機能を実装してください：
1. TODOリストの表示
2. 新しいTODOを追加するボタン
3. 完了したTODOをチェックする機能

B. Chat（Ctrl+L / Cmd+L）- 質問と相談

特徴: - コードの説明を求める - 実装方法を相談する - エラーの原因を調べる - コードは変更せず、情報だけを得る

使い方: 1. Ctrl+L（Windows/Linux）またはCmd+L（Mac）を押す 2. サイドバーにChatが開く 3. 質問を入力（例：「StatefulWidgetとStatelessWidgetの違いは？」） 4. Claudeが回答を返す

使用例:

このエラーの原因を教えてください：
The method 'setState' isn't defined for the class 'MyWidget'

C. Inline Edit（Ctrl+K / Cmd+K）- コード内での直接編集

特徴: - カーソル位置のコードを直接編集 - 選択範囲のコードを書き換える - 素早い修正や小さな変更に最適

使い方: 1. 編集したいコード部分を選択（または行にカーソルを置く） 2. Ctrl+K（Windows/Linux）またはCmd+K（Mac）を押す 3. 指示を入力（例：「このボタンを赤色にして」） 4. Claudeが変更を提案し、自動的に適用される

使用例:

// このコードを選択してCtrl+K
ElevatedButton(
  onPressed: () {},
  child: Text('Click me'),
)

// 指示: 「このボタンを大きくして、角を丸くしてください」

D. @マークでのファイル・コード参照

Claudeに特定のファイルやコードを見せる方法:

@ファイル名    - 特定のファイルを参照
@フォルダ名/   - フォルダ全体を参照
@コードブロック - 選択中のコードを参照
@Web          - Web検索結果を参照
@Docs         - 公式ドキュメントを参照

使用例:

@lib/main.dart を見て、このアプリの構造を説明してください。

@pubspec.yaml に http パッケージを追加してください。

@lib/ フォルダ全体をレビューして、改善点を教えてください。

2-3. Cursorでのモデル選択

Cursor Settings（Settings > Features > AI）で設定:

Composer用のモデル: - 推奨: Claude Opus 4.5（複雑な実装） - または: Claude Sonnet 4.5（簡易な実装）
Chat用のモデル: - 推奨: Claude Sonnet 4.5（質問・相談）
Inline Edit用のモデル: - 推奨: Claude Sonnet 4.5（小さな修正）

推奨設定（2025年12月時点）： - メインモデル: Claude Opus 4.5（複雑なタスク・本格的な開発） - 補助モデル: Claude Sonnet 4.5（簡易な修正・小さなタスク）

2-4. 実践的な使い分け

場面	使う機能	ショートカット
新しいページを作りたい	Composer	Ctrl+I
複数ファイルを修正したい	Composer	Ctrl+I
エラーの原因を知りたい	Chat	Ctrl+L
コードの説明がほしい	Chat	Ctrl+L
ボタンの色を変えたい	Inline Edit	Ctrl+K
関数名を変更したい	Inline Edit	Ctrl+K

2-5. 実践例

例1: 新しい画面を作成

Composer（Ctrl+I）で：

lib/screens/settings_page.dart を作成して、以下の設定項目を持つ画面を作ってください：
1. ダークモード切り替え
2. 通知のオン/オフ
3. 言語選択（日本語/英語）

例2: エラーを相談

Chat（Ctrl+L）で：

以下のエラーが出ました。原因と解決方法を教えてください：

[エラーメッセージをペースト]

例3: 既存コードを修正

コードを選択 → Inline Edit（Ctrl+K）で：

このListViewを GridView に変更して、2カラムで表示してください。

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

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

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

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

Chat（Ctrl+L）で質問: このエラーを修正してください： [エラーメッセージをコピー＆ペースト]

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

Composer（Ctrl+I）で指示: カウンターアプリにリセットボタンを追加してください。ボタンを押すとカウンターが0に戻るようにしてください。

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

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

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

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

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

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

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

4. Claude Code: ターミナルで使えるAI開発環境

Claude Codeは、Anthropic公式のCLIツールで、Claude Proの課金で利用できます。2つの使い方があります。

4-1. Claude Codeの2つの使い方

A. ターミナル版（CLI版）- ローカル開発

特徴： - PCのターミナルから直接起動 - ローカルファイルを直接編集可能 - リアルタイムでコード実行・テスト - Git操作も自分でコントロール

使い方：

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

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

# Claudeと対話しながら開発
> ボタンウィジェットを追加してください
> このエラーを修正してください

メリット： - ローカル環境で即座に実行・確認 - 自分のPCで完結 - Cursorと併用可能

デメリット： - CLIのインストールが必要 - ターミナル操作に慣れる必要あり

B. GitHub連携版（Web版）- リモート開発

特徴： - クラウド環境でリポジトリをクローン - ファイルの直接編集が可能 - Git操作（コミット・プッシュ）を実行 - ブランチベースの開発 - 変更履歴を明確に管理 - Pull Requestでレビュー可能

ファイルアップロード不要： - すでにリポジトリがクローン済み - PCとの同期はGit経由 - クラウド環境で完結

4-2. GitHub連携版の開発ワークフロー

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

4-3. それぞれの使い所

ターミナル版が適している場面： - ローカル開発でAIの助けが欲しい - 即座にコードを実行・確認したい - Cursorの補完として使いたい - コマンドライン操作に慣れている

GitHub連携版が適している場面： - GitHubベースの開発 - リモートでのコード修正 - Pull Requestベースのレビュー - チーム開発での協働

GitHub連携版の注意点： - PC内のローカルファイルは直接編集不可 - Gitリポジトリが前提 - 変更は専用ブランチにプッシュされる

4-4. 実際の使用例

ターミナル版の例：

# プロジェクトで起動
cd ~/my-flutter-app
claude

# 対話例
You: カウンターアプリにリセットボタンを追加して
Claude: わかりました。main.dartを編集してリセットボタンを追加します...
[ファイルが編集される]

You: flutter run で動かして
Claude: flutter runを実行します...
[アプリが起動]

# その場で確認・修正が可能

GitHub連携版の例：

作業ディレクトリ: /home/user/cookbook
現在のブランチ: claude/github-todo-guidelines-xxxxx

# Claude Codeが実行
1. ファイルを編集
2. git commit -m "機能追加"
3. git push -u origin claude/github-todo-guidelines-xxxxx

# あなたが実行
git fetch origin
git checkout claude/github-todo-guidelines-xxxxx
# または GitHub上でPRを確認

4-5. 各ツールの使い分け

ツール	用途	ローカル実行	GitHub連携	GUI/CLI
Cursor	ローカル開発（GUI）	⭐⭐⭐	手動	GUI
Claude Code（CLI版）	ローカル開発（CLI）	⭐⭐⭐	手動	CLI
Claude Code（GitHub連携版）	リモート/PR開発	-	⭐⭐⭐	Web

推奨： - 日常開発（GUI好き）: Cursor（ローカル環境で即座に実行） - 日常開発（CLI好き）: Claude Code CLI版（ターミナルから対話） - GitHub Issue対応: Claude Code GitHub連携版（ブランチ管理が明確） - レビュー依頼: Claude Code GitHub連携版（PRベースで共有） - 併用パターン: Cursor + Claude Code CLI版（両方使い分け）

5. Google Antigravity について

注意: Google Antigravityは2025年11月に発表された新しいAI統合開発環境ですが、2025年12月時点では以下の問題が報告されています：

⚠️ 既知の問題： - ファイルの破損や予期せぬコード削除 - 破壊的な変更が頻発 - 依存関係の誤った修正 - まだ実験段階で本番開発には不向き

結論: 学習やプロトタイプ作成での実験は可能ですが、メインの開発環境としてはCursorを推奨します。

もしAntigravityを試す場合は： - モデルにClaudeを使用（かなり実用レベルに近づく） - 必ずGit管理する - 重要コードはバックアップ - 小さなプロトタイプから始める

6. 実践的な開発フロー

推奨される開発環境構成

メイン開発:

Cursor (エディタ)
  ↓
Claude Sonnet 4.5 (AIモデル)
  ↓
Flutter プロジェクト

補助ツール: - Web版Claude: 設計相談、アーキテクチャ検討 - ChatGPT: アイデア出し、概念理解 - Google AI Studio: 情報収集（※コード生成は避ける）

学習のコツ

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

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

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

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

まとめ

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

最適な構成: - メイン開発環境: Cursor + Claude Sonnet 4.5（GUI派） - ターミナル開発: Claude Code CLI版（CLI派） - GitHub連携開発: Claude Code GitHub連携版（リモート/PR開発） - 補完的な相談: Web版AIチャット（Claude、ChatGPT） - 避けるべき: Geminiでのコード生成、不安定なAntigravity（現時点）

開発スタイル別の推奨: - GUI好き: Cursor - CLI好き: Claude Code CLI版 - 両方使いたい: Cursor + Claude Code CLI版を併用 - チーム開発: Claude Code GitHub連携版でPR管理

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

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

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