🍳 AI x Flutter Cookbook

レシピ#3-1: AIと決めるシンプルなプロジェクト構成

新しいFlutterプロジェクトを始めるとき、「どのファイルをどこに置けばいいの？」というのは、誰もが最初に悩む問題です。このレシピでは、Cursor + Claudeを「相談役の先輩」として、シンプルで分かりやすいプロジェクトのフォルダ構成を一緒に決めていく方法を学びます。

ここでのゴールは、複雑な設計論に振り回されず、あなたのアプリの規模に合った、管理しやすいフォルダ構成を素早く手に入れることです。

このセクション全体では、アイデアがアプリになり、ストアを通じて人の手元に届くまでの全行程をたどります。自分のために作ったもの（内側）が、誰かに使ってもらえるもの（外側）へ変わっていく過程です。

1. なぜフォルダ分けが必要なのか？

flutter createで生成された直後のプロジェクトでは、すべてのコードがlib/main.dartに書かれています。小さなカウンターアプリならこれでも問題ありませんが、機能が増えてくると、main.dartはすぐに数千行の巨大なファイルになってしまい、修正や管理が非常に困難になります。

そこで、機能や役割に応じてファイルをフォルダに分けて整理することで、コードを見つけやすく、理解しやすくするのです。

2. Cursor + Claudeに「シンプルな構成」を提案させる

複雑なアーキテクチャは後からでも導入できます。まずは、直感的で分かりやすい、基本的なフォルダ構成をCursor + Claudeに提案してもらいましょう。

💬 Cursor活用プロンプト (シンプルな構成案)

あなたはFlutterプロジェクトの整理整頓が得意な開発者です。

これから、写真メモアプリを作ろうと思います。現時点では、すべてのコードがlib/main.dartにあります。 このプロジェクトを、初心者にも分かりやすい、シンプルなフォルダ構成に整理したいです。

提案してほしいフォルダ構成のルール: - 画面ごとにファイルを分ける (screens/ フォルダ) - 画面間で共有して使う部品（ウィジェット）をまとめる (widgets/ フォルダ) - アプリのデータ構造（モデル）を定義するファイルをまとめる (models/ フォルダ)

上記のルールに基づいた、lib/フォルダ以下の理想的なディレクトリ構成を提案してください。

Claudeの応答（例）:

承知いたしました。写真メモアプリのための、シンプルで直感的なフォルダ構成を提案します。

### 提案するディレクトリ構成 (`lib/`以下)

- `main.dart`         # アプリの起動点。MaterialAppなどをここに置きます。

- `screens/`          # 各画面のメインUIを格納するフォルダ
  - `home_screen.dart`    # メモの一覧を表示する画面
  - `add_memo_screen.dart`# 新しいメモを追加する画面
  - `memo_detail_screen.dart` # メモの詳細を表示する画面

- `widgets/`          # 複数の画面で再利用する小さなウィジェットを格納するフォルダ
  - `memo_card.dart`      # 一覧画面で使う、メモ1件分のカードUI
  - `custom_button.dart`  # アプリ内で共通のデザインを持つボタン

- `models/`           # アプリで使うデータ構造を定義するクラスを格納するフォルダ
  - `memo.dart`         # メモのデータ（ID, 画像パス, タイトルなど）を保持するクラス

この構成は、多くの小〜中規模アプリにとって、非常に優れた出発点となります。

3. 対話を通じて、自分のアプリに合わせて調整する

Claudeの応答を元に、あなたのアプリの具体的な機能に合わせて、さらに質問を重ねてみましょう。

💬 Cursor活用プロンプト (具体例の要求)

良い構成ですね！では、この構成に合わせて、models/memo.dart に書くべきクラスの具体的なコードを書いてください。

メモは、以下の情報を持つ必要があります。 - 一意のID (文字列) - 画像のファイルパス (文字列) - タイトル (文字列) - 詳細な説明文 (文字列) - 作成日時 (DateTime)

なぜこれが良いのか？ * 具体的で実践的: 読者は、自分のアプリで必要になるであろうMemoモデルの作り方を、具体的なコードで学べます。 * ステップバイステップ: 最初に全体像（フォルダ構成）を決め、次にその中身（具体的なファイル）を一つずつ作っていく、という自然な開発フローを体験できます。

4. まずはシンプルに始めよう

このレシピで紹介した「画面」「ウィジェット」「モデル」という3つの基本的なフォルダ分けは、多くの個人開発プロジェクトにとって十分すぎるほど強力です。

重要なのは、最初から完璧を目指さないことです。

アプリが成長し、より複雑なロジックが必要になった時に、初めて「リポジトリ層」や「ユースケース層」といった、より高度なフォルダを追加することを検討すれば良いのです。その時も、Cursor + Claudeはあなたの優秀な相談相手になってくれるでしょう。

まずはこのシンプルな構成で、快適なFlutter開発をスタートさせましょう！