🍳 AI x Flutter Cookbook

レシピ#1-3: 最初のFlutterアプリ作成とプロジェクト探検

キッチン（開発環境）の準備が整い、AIという名の先生も隣にいます。いよいよ、最初の料理、つまり最初のFlutterアプリを作成してみましょう。

このレシピでは、プロジェクトを管理するための親フォルダを作成し、その中にflutter createコマンドでカウンターアプリを生成し、中身を探検するまでを解説します。

【超重要】Step 0: プロジェクト管理用の親フォルダを作成する

FlutterプロジェクトをPCのあちこちに散らかしてしまうと、後でどこに何があるか分からなくなってしまいます。最初に、すべてのFlutterプロジェクトをまとめて入れておくための「親フォルダ」を作成する習慣をつけましょう。

お使いのOSの文化に合わせて、以下の手順で親フォルダを作成してください。

Windowsの場合

  1. 場所を決める:

    • C:\ドライブの直下がおすすめです。C:\dev や C:\src といった名前が一般的です。
    • 重要: C:\Users\あなたの名前\Documents のように、パスに日本語やスペースが含まれる場所は、予期せぬエラーの原因になることがあるため避けるのが賢明です。

  2. フォルダを作成し、移動する:

    • ターミナル（PowerShellまたはコマンドプロンプト）を開き、以下のコマンドを順番に実行します。

    ```bash

    Cドライブ直下に移動

    cd C:\

    devフォルダを作成 (もしなければ)

    mkdir dev

    ai-x-flutterフォルダを作成・移動

    mkdir dev\ai-x-flutter cd dev\ai-x-flutter `` これで、あなたの現在地はC:\dev\ai-x-flutter` になりました。

macOSの場合

  1. 場所を決める:

    • macOSは、DesktopやDocumentsのように、標準フォルダが大文字で始まるGUI中心の文化があります。そのため、開発プロジェクト用の親フォルダも~/Developmentのように、大文字で始めるのが自然で、見た目にも一貫性があります。

  2. フォルダを作成し、移動する:

    • ターミナルを開き、以下のコマンドを順番に実行します。

    ```bash

    ホームディレクトリに移動

    cd ~

    Developmentフォルダを作成 (もしなければ)

    mkdir Development

    developmentフォルダに移動

    cd Development

    ai-x-flutterフォルダを作成・移動

    mkdir ai-x-flutter cd ai-x-flutter `` これで、あなたの現在地は~/Development/ai-x-flutter` になりました。

Linuxの場合

  1. 場所を決める:

    • Linuxは、効率性を重視するコマンドライン（CUI）中心の文化が根付いています。そのため、開発プロジェクト用の親フォルダも~/devや~/srcのように、短くタイピングしやすい小文字の名前が広く使われています。

  2. フォルダを作成し、移動する:

    • ターミナルを開き、以下のコマンドを順番に実行します。

    ```bash

    ホームディレクトリに移動

    cd ~

    devフォルダを作成 (もしなければ)

    mkdir dev

    devフォルダに移動

    cd dev

    ai-x-flutterフォルダを作成・移動

    mkdir ai-x-flutter cd ai-x-flutter `` これで、あなたの現在地は~/dev/ai-x-flutter` になりました。

これからのFlutterプロジェクトは、必ずこの親フォルダの中で作成していくことになります。このシンプルな一手間が、将来のあなたを助けます。

Step 1: flutter createでアプリを生成する

準備が整ったので、いよいよアプリを作成します。先ほど移動した親フォルダ（ai-x-flutter）の中で、以下のコマンドを実行してください。

flutter create my_first_app

⚠️ Application IDの設定

公開するアプリを開発をする場合は、この時点でApplication IDを指定することが強く推奨されます。これは、後から変更不可能な、アプリの「戸籍」です。

独自ドメインを持っている場合は、--orgオプションを使って逆ドメイン名を指定します。 bash flutter create --org com.yourdomain my_first_app 詳しくは、次章をご覧ください。

Step 2: プロジェクトのフォルダ構成を探検する

生成されたmy_first_appフォルダの中身を見てみましょう。たくさんのファイルやフォルダがありますが、最初に着目すべきは以下の3つです。

my_first_app/
├── android/      # Androidアプリ固有のファイル群
├── ios/          # iOSアプリ固有のファイル群
├── lib/          # ★最も重要なフォルダ！Dartのコードはすべてここに書く
│   └── main.dart # アプリが最初に起動するファイル
├── test/         # テストコードを置く場所
└── pubspec.yaml  # ★プロジェクトの設計図

🤖 AI活用プロンプト (ファイル役割の質問)

他のファイルやフォルダの役割が気になったら、すぐにAI先生に質問してみましょう。 ``` あなたはFlutterのエキスパートです。

Flutterプロジェクトのルートにある pubspec.lock ファイルと analysis_options.yaml ファイルは、それぞれどのような役割を持っていますか？初心者にでも分かるように、簡潔に説明してください。 ```

Step 3: アプリを動かしてみる（実行）

いよいよ、生成されたカウンターアプリを実際に動かしてみましょう。

方法1: コマンドラインで実行（推奨）

1. デバイスを準備する: * PCにAndroidスマートフォンをUSB接続するか、Android Studioからエミュレータを起動します。 * または、Chromeブラウザで実行することもできます。

2. 接続されているデバイスを確認:

flutter devices

実行すると、接続されているデバイスの一覧が表示されます：

3 connected devices:

Pixel 6 (mobile) • 1A2B3C4D • android-arm64 • Android 13 (API 33)
Chrome (web)     • chrome   • web-javascript • Google Chrome 120.0
macOS (desktop)  • macos    • darwin-arm64   • macOS 13.0

3. プロジェクトフォルダに移動:

cd my_first_app

4. アプリを実行:

# デバイスが1つだけの場合
flutter run

# デバイスを指定する場合
flutter run -d chrome        # Chromeブラウザで実行
flutter run -d 1A2B3C4D       # デバイスIDを指定
flutter run -d Pixel          # デバイス名の一部で指定

5. ホットリロードを試す（重要！）:

アプリが起動している状態で、別のターミナルまたはエディタでlib/main.dartを開き、何か変更してみましょう（例：タイトルを変更）。そして、ターミナルで以下を実行：

# ターミナルで「r」を押す
r  # ホットリロード（すぐに反映）
R  # ホットリスタート（アプリを再起動）
q  # アプリを終了

またはエディタで保存するだけで自動的にホットリロードされます。

方法2: エディタから実行

好みのエディタでプロジェクトを開いて実行することもできます。

Cursorで実行

  1. Cursorでプロジェクトを開く:

    • Cursorを起動し、「File」>「Open Folder」からmy_first_appフォルダを選択します。

  2. 実行方法:

    • Cursorには、ターミナルが統合されているので、内蔵ターミナルでflutter runコマンドを実行するのが最もシンプルです。
    • または、Flutter拡張機能をインストールしていれば、画面右下のデバイス選択 → F5キーでデバッグ実行も可能です。

Android Studioで実行

  1. Android Studioでプロジェクトを開く:

    • Android Studioを起動し、「Open」からmy_first_appフォルダを選択します。

  2. デバイスを選択して実行:

    • 画面上部のツールバーで実行デバイスを選択します。
    • 緑色の「▶」（再生）ボタンをクリックしてアプリを実行します。

VS Codeで実行

  1. VS Codeでプロジェクトを開く:

    • VS Codeを開き、「ファイル」>「フォルダを開く」からmy_first_appフォルダを選択します。

  2. 実行デバイスを選択:

    • VS Codeの右下にあるステータスバーに、接続したデバイス名（例: Pixel 6）が表示されます。
    • 表示されていない場合は、そこをクリックしてデバイスを選択します。

  3. デバッグ実行:

    • 上部メニューから「実行」>「デバッグの開始」を選択するか、F5キーを押します。

おめでとうございます！ あなたはFlutter開発者として、コードを書き（生成し）、ビルドし、実行するという、開発の基本サイクルを体験しました。

重要なポイント: * コマンドライン実行が基本: どのエディタを使っていても、flutter runコマンドは共通です。 * エディタは自由に選択: Cursor、Android Studio、VS Codeなど、好きなエディタでコードを編集できます。 * ホットリロードの魔法: コードを変更して保存するだけで、アプリが瞬時に更新されます。この機能がFlutter開発を超高速にします。

これで、最初のFlutterアプリを作成し、実行できるようになりました。 次のレシピでは、日本で重要なiOS開発環境のセットアップ方法を学びます。

➡️ 次のレシピへ: #1-4: iOS開発の準備とセットアップ