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

はじめに

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

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

Cursorでの開発フロー

1. プロジェクトを開く

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

# Cursorでプロジェクトを開く
cursor .

2. AIモデルを選択

重要: Cursorの設定でメインモデルをClaude Sonnet 4.5に設定します。

理由: - Flutterのツリー構造理解が最も優れている - 大規模コードの一貫性が高い - 破壊的な変更が少ない - エラーが出にくい

避けるべき: Geminiをコード生成に使うのは避ける（書き換えが大きい、依存関係を壊しやすい）

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. エラー修正の依頼

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

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

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

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

Cursorの便利な機能

1. Cmd+K（Ctrl+K）: インライン編集

コードの一部を選択してCmd+Kを押すと、その部分だけを編集できます。

使用例:

// この部分を選択して Cmd+K
Widget build(BuildContext context) {
  return Container(
    child: Text('Hello'),
  );
}

// プロンプト: "このWidgetをカード風のデザインにして"

2. Cmd+L（Ctrl+L）: チャット

AIとの対話画面を開きます。設計相談や質問に使います。

3. @ファイル名: 特定のファイルを参照

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

4. Composer: 複数ファイルの編集

複数のファイルを同時に編集する必要がある場合に使います。

実践的なワークフロー例

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

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

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

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

Step 2: Cursorでプロジェクト作成

flutter create kakeibo_app
cd kakeibo_app
cursor .

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

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

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

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

以下の形式で提案してください:
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

よくある問題と解決策

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

解決策:

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

問題2: 不要な複雑さ

解決策:

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

問題3: 依存関係の問題

解決策:

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

まとめ

Cursor + Claudeでの開発フロー：

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

重要な原則: - 小さく始める - 段階的に改善 - 外部パッケージは最小限 - バージョンを明示 - AIを信頼しすぎない（必ず確認）

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

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