プロジェクト作成とアプリ起動（flutter create）前半 | Flutter概論：クロスプラットフォーム開発の構造と環境構築 | Flutterアプリケーション開発概論

はじめに

この教材は、Flutter の初回アプリ起動を「なんとなく成功した」で終わらせず、何を確認すれば本当に環境が使えると言えるのかまで理解するための実践編です。

Flutter 公式の導線でも、インストールのあとに新規アプリ作成、実行先の確認、アプリの起動、Hot Reload の確認へ進む流れが用意されています。

具体的には

初回起動の全体像
新規 Flutter プロジェクトの作成
作成直後のプロジェクト構造
実行先の確認
flutter run による初回起動までを体系的に整理します。

後半では、起動後の確認、Hot Reload、よくあるエラー、まとめへ進みます。

この章で学ぶこと

項目	この前半でできるようになること
初回起動の意味	なぜ flutter run まで確認しないと環境構築完了と言えないのか説明できる
プロジェクト作成	flutter create や IDE から新規プロジェクトを作成できる
構造理解	作成直後のフォルダと最初に見るべきファイルを把握できる
実行先確認	flutter devices の意味と使い方を説明できる
初回起動	flutter run の役割と、起動時に何を見るべきかを説明できる

1. 初回アプリ起動の全体像

Flutter の学習では、SDK のインストールや IDE の導入だけで満足してしまいがちです。

ですが、Flutter 公式の Set up and test drive Flutter や Create a new Flutter app の流れを見ると、本当の区切りは「新規アプリを作成し、起動し、編集結果を確認できること」にあります。

つまり、初回起動は単なる確認作業ではなく、開発環境が実際に機能しているかを検証する工程です。

初回起動で確認したいのは、Flutter SDK だけではありません。CLI、IDE、実行先、ビルド、インストール、起動の一連の流れがつながっているかを見ます。

ここまで通って初めて、「書ける」「動かせる」「試せる」環境になったと言えます。

1-1. 初回起動とは何をすることか

初回起動で行うことは、大きく分けると次の4つです。

新規 Flutter プロジェクトを作る
実行先を確認する
アプリを起動する
起動後に変更が反映されるかを確認する

Flutter 公式でも、新規作成は flutter create、実行確認は flutter run、動作確認は Quick start の流れで案内されています。

1-2. なぜ初回起動が重要なのか

初回起動が重要なのは、環境構築の成否を最も実践的に判定できるからです。

たとえば、SDK が入っていても flutter create が通らないことがあります。
実行先が見えていても flutter run が失敗することがあります。
起動しても Hot Reload が効かないことがあります。

つまり、環境構築は「インストールできた」ではなく、開発ループが成立したかで判断する必要があります。

Flutter 公式の Quick start や VS Code 導入ページも、最終的には新規作成と起動確認を通す構成です。

1-3. 初回起動で見たい成功条件

初回起動の成功条件は、次のように整理できます。

成功条件	意味
flutter create が通る	SDK と CLI が機能している
flutter devices で実行先が見える	実行先との接続が成立している
flutter run で起動する	ビルド・インストール・起動が通る
編集内容が反映される	開発ループが成立している

この4つの条件は、Flutter 公式の導入後の流れと整合しています。

1-4. この節の課題と解決

課題	何が起きるか	解決
インストールだけで満足してしまう	実行不備を見逃す	初回起動までを完了条件にする
起動だけ確認して終わる	開発ループの異常に気づけない	変更反映まで確認する
成功条件が曖昧	何をもって完了かわからない	確認項目を先に定義する

2. 新規Flutterプロジェクトを作成する

Flutter の初回起動は、既存プロジェクトではなく、まず公式の標準テンプレートから始めるのが安全です。

Flutter 公式の Create a new Flutter app でも、新規アプリの生成から始めることが基本導線になっています。

これは、最小限の構成で Flutter 本体・ビルド・実行・状態変化を確認できるからです。

初学者にとって大切なのは、「最初から自分専用の構成を作ろうとしない」ことです。

最初はテンプレートで成功体験を作り、その後に構造を理解しながら変更していくほうが、問題の切り分けがしやすくなります。

2-1. flutter createとは何か

flutter create は、新しい Flutter プロジェクトのひな形を生成する CLI コマンドです。

Flutter 公式の作成ガイドでは、このコマンドによりアプリの基本フォルダ、サンプルコード、各プラットフォーム向け設定などが用意される構成になっています。

これは単なるフォルダ作成ではありません。Flutter アプリとして最低限必要な構造を、各対応プラットフォームを含めて整える処理です。

だからこそ、初回起動では手書きで始めるより flutter create を使うべきです。

2-2. CLIでプロジェクトを作る

CLI から作る場合は、次のように実行します。

flutter create my_first_flutter_app
cd my_first_flutter_app

PowerShell なら次のようになります。

flutter create my_first_flutter_app
Set-Location my_first_flutter_app

Flutter 公式の新規アプリ作成ページでも、flutter create によるプロジェクト生成が基本として扱われています。

この方法の利点は、何が起きているかが見えやすいことです。IDE の裏側で何が呼ばれているのか分からない状態より、CLI から明示的に作成したほうが理解しやすい場面が多いです。

2-3. VS Code から作る

Flutter 公式の Install Flutter using VS Code では、Command Palette から Flutter: New Project を実行する流れが案内されています。

VS Code を使う場合、CLI を直接打たなくてもプロジェクト作成が可能です。

GUIで行う操作

VS Code を開く
Cmd/Ctrl + Shift + P で Command Palette を開く
Flutter: New Project を選ぶ
Application を選ぶ
プロジェクト名と保存先を指定する

この方法は、Flutter 拡張が正しく有効になっているかも同時に確認できるため、VS Code ユーザーには分かりやすい導線です。

2-4. Android Studio から作る

Android Studio / IntelliJ 向けの公式ページでも、Flutter plugin を入れた状態で新規 Flutter プロジェクトを作る流れが案内されています。

Android Studio を主IDEにする場合は、GUI から始めても問題ありません。

GUIで行う操作

Android Studio を開く
New Flutter Project を選ぶ
Flutter SDK の場所を指定する
Application を選ぶ
プロジェクト名や保存先を設定する

この方法の利点は、Android 側の開発環境と Flutter 側のプロジェクト作成を同じ場所で進めやすいことです。

2-5. この節の課題と解決

課題	何が起きるか	解決
何もない状態から書き始めようとする	構成が崩れる	テンプレート生成から始める
CLIとGUIが混ざる	手順が不安定になる	まずは1つの方法に固定する
プロジェクト生成の意味が見えない	ただのコマンド暗記になる	ひな形生成の役割を理解する

3. 作成直後のプロジェクトを見る

プロジェクトを作った直後は、すぐ run したくなります。もちろんそれも大切ですが、最初に何が生成されたのかをざっと見ることにも意味があります。

Flutter 公式の新規作成ページは、作成後のファイル構造や基本編集箇所の理解につながる内容を含んでいます。

ここで全部を理解する必要はありません。むしろ最初は、「どこを触るのか」「どこはまだ触らなくてよいのか」 を分けることが重要です。

3-1. どのフォルダができるのか

flutter create で作られる代表的なフォルダは、次のように整理できます。

Flutter 公式のプロジェクト作成ガイドと、Flutter が複数プラットフォームに対応する前提から、このような構成が生成されます。

フォルダ / ファイル	主な役割
lib	Dart コード本体。最初に最もよく触る
android	Android 向け設定やネイティブ側ファイル
ios	iOS 向け設定やネイティブ側ファイル
macos	macOS 向け設定やネイティブ側ファイル
windows	Windows 向け設定やネイティブ側ファイル
test	テストコード置き場
pubspec.yaml	パッケージ管理、依存関係、アセット設定など

初回起動の段階では、これらを全部読み解く必要はありません。ただ、「Flutter は複数プラットフォーム向けのひな形をまとめて生成している」と理解しておくと十分です。

3-2. 最初に見るべきファイル

初回起動で最初に見るべきなのは、主に次の2つです。

ファイル	理由
lib/main.dart	最初の画面やロジックが入っている
pubspec.yaml	プロジェクト名や依存関係の入口になる

Flutter 公式の Quick start や新規アプリ作成ガイドでも、最初に編集や確認の対象になるのは main.dart を中心とした基本部分です。

main.dart は、アプリの入口です。
pubspec.yaml は、依存関係やパッケージ設定の中心です。

最初の段階では、この2つを押さえておけば十分です。

3-3. なぜ作成直後に構造を見る必要があるのか

理由は、何を編集すべきかを明確にするためです。最初から android や ios の中に入ってしまうと、Flutter 側の基本学習とネイティブ設定が混ざってしまいます。

まずは lib/main.dart を中心に見て、アプリの本体がどこにあるのかを把握するほうが、安全で理解しやすいです。

3-4. この節の課題と解決

課題	何が起きるか	解決
どのファイルを触ればよいかわからない	無駄に迷う	最初に触る場所を限定する
生成物を全部理解しようとする	情報量で疲れる	最初は main.dart と pubspec.yaml に絞る
プロジェクト構造が見えない	後で混乱する	作成直後に全体を眺める

4. 実行先を確認する

Flutter アプリは、作っただけでは動きません。どこに実行するかを決める必要があります。

Flutter 公式の Quick start や Android / iOS セットアップでも、起動前に devices を確認する流れが重視されています。

初回起動でよくある失敗の1つが、「実行先がないのに flutter run を打ってしまう」ことです。これを防ぐために、先に flutter devices を見る習慣をつけることが重要です。

4-1. 実行先とは何か

実行先とは、Flutter アプリを起動する対象です。代表的には次の4種類があります。

実行先	具体例
Android Emulator	Android の仮想端末
iOS Simulator	Mac 上の iPhone / iPad 仮想端末
実機	Android スマートフォンや iPhone
desktop target	Windows / macOS アプリとしての実行先

Flutter 公式の Android setup や iOS setup は、それぞれ Emulator / Simulator を開発用の主要な実行先として扱っています。

4-2. flutter devicesの使い方

Flutter から見えている実行先を確認するには、次のコマンドを使います。

flutter devices

PowerShell でも同じです。

flutter devices

この結果に、Android Emulator、iOS Simulator、実機、desktop target などが表示されます。Flutter 公式の Quick start でも、起動前の確認にこの考え方が必要です。

4-3. なぜ実行前に device 確認が必要なのか

flutter run を打ってから「端末がない」と気づくより、先に devices を見たほうが原因を減らせるからです。

また、複数の実行先がある場合、どこに出しているか分からなくなることがあります。flutter devices で device id を確認しておけば、-d オプションで意図した端末に出せます。

4-4. この節の課題と解決

課題	何が起きるか	解決
実行先を確認せず run する	エラー原因が曖昧になる	先に flutter devices を実行する
実行先が複数あって混乱する	意図しない端末で起動する	device id を確認する
実行先が0件	起動できない	Emulator / Simulator / 実機を先に用意する

5. flutter runで初回起動する

ここまで来たら、いよいよ初回起動です。Flutter 公式の Quick start でも、最終的な確認は アプリを run して動かすこと にあります。

ここで重要なのは、単にコマンドを打つことではなく、run 中に何が起きているのかを理解することです。

5-1. flutter runの基本

基本コマンドは次です。

flutter run

Flutter はこのコマンドで、選択された実行先に対してビルド、インストール、起動を行います。Quick start でも、アプリのテスト起動としてこの流れが前提です。

5-2. 特定の端末を指定して起動する

実行先が複数ある場合は、-d を使って端末を指定できます。

flutter run -d <device-id>

このは、flutter devices の結果に表示される識別子です。複数端末を同時に接続しているときは、こちらのほうが安全です。

5-3. 初回起動中に起きること

flutter run を実行すると、大まかには次の流れが起きます。

アプリをビルドする
実行先へインストールする
アプリを起動する
開発中のセッションとして接続する

この一連の流れが通ることで、単なる環境導入ではなく、Flutter アプリを実際に開発できる状態だと判断できます。Quick start も、run 後のアプリ表示とその後の更新確認を重視しています。

5-4. 初回起動でどこを見ればよいか

初回起動時に見るべきなのは、次の3点です。

見る場所	確認したいこと
ターミナル出力	どこで失敗していないか
実行端末の画面	アプリが表示されているか
エラー表示	その場で止まっていないか

特にターミナル出力は重要です。Flutter の初回 run では、ビルドや接続の流れがそのまま出るため、途中で止まった位置が原因切り分けの入口になります。

5-5. この節の課題と解決

課題	何が起きるか	解決
run の意味を理解せず使う	出力の意味が読めない	build → install → launch の流れで理解する
起動中のログを見ない	失敗地点がわからない	ターミナル出力を追う
実行先を明示しない	想定外の端末で起動する	-d を活用する

後半デェあ、実際にFlutterアプリを動かしていきます。

はじめに

Flutter 公式の導線でも、インストールのあとに新規アプリ作成、実行先の確認、アプリの起動、Hot Reload の確認へ進む流れが用意されています。

具体的には

初回起動の全体像
新規 Flutter プロジェクトの作成
作成直後のプロジェクト構造
実行先の確認
flutter run による初回起動までを体系的に整理します。

後半では、起動後の確認、Hot Reload、よくあるエラー、まとめへ進みます。

この章で学ぶこと

項目	この前半でできるようになること
初回起動の意味	なぜ flutter run まで確認しないと環境構築完了と言えないのか説明できる
プロジェクト作成	flutter create や IDE から新規プロジェクトを作成できる
構造理解	作成直後のフォルダと最初に見るべきファイルを把握できる
実行先確認	flutter devices の意味と使い方を説明できる
初回起動	flutter run の役割と、起動時に何を見るべきかを説明できる

1. 初回アプリ起動の全体像

Flutter の学習では、SDK のインストールや IDE の導入だけで満足してしまいがちです。

つまり、初回起動は単なる確認作業ではなく、開発環境が実際に機能しているかを検証する工程です。

ここまで通って初めて、「書ける」「動かせる」「試せる」環境になったと言えます。

1-1. 初回起動とは何をすることか

初回起動で行うことは、大きく分けると次の4つです。

新規 Flutter プロジェクトを作る
実行先を確認する
アプリを起動する
起動後に変更が反映されるかを確認する

Flutter 公式でも、新規作成は flutter create、実行確認は flutter run、動作確認は Quick start の流れで案内されています。

1-2. なぜ初回起動が重要なのか

初回起動が重要なのは、環境構築の成否を最も実践的に判定できるからです。

たとえば、SDK が入っていても flutter create が通らないことがあります。
実行先が見えていても flutter run が失敗することがあります。
起動しても Hot Reload が効かないことがあります。

つまり、環境構築は「インストールできた」ではなく、開発ループが成立したかで判断する必要があります。

Flutter 公式の Quick start や VS Code 導入ページも、最終的には新規作成と起動確認を通す構成です。

1-3. 初回起動で見たい成功条件

初回起動の成功条件は、次のように整理できます。

成功条件	意味
flutter create が通る	SDK と CLI が機能している
flutter devices で実行先が見える	実行先との接続が成立している
flutter run で起動する	ビルド・インストール・起動が通る
編集内容が反映される	開発ループが成立している

この4つの条件は、Flutter 公式の導入後の流れと整合しています。

1-4. この節の課題と解決

課題	何が起きるか	解決
インストールだけで満足してしまう	実行不備を見逃す	初回起動までを完了条件にする
起動だけ確認して終わる	開発ループの異常に気づけない	変更反映まで確認する
成功条件が曖昧	何をもって完了かわからない	確認項目を先に定義する

2. 新規Flutterプロジェクトを作成する

Flutter の初回起動は、既存プロジェクトではなく、まず公式の標準テンプレートから始めるのが安全です。

Flutter 公式の Create a new Flutter app でも、新規アプリの生成から始めることが基本導線になっています。

これは、最小限の構成で Flutter 本体・ビルド・実行・状態変化を確認できるからです。

初学者にとって大切なのは、「最初から自分専用の構成を作ろうとしない」ことです。

最初はテンプレートで成功体験を作り、その後に構造を理解しながら変更していくほうが、問題の切り分けがしやすくなります。

2-1. flutter createとは何か

flutter create は、新しい Flutter プロジェクトのひな形を生成する CLI コマンドです。

これは単なるフォルダ作成ではありません。Flutter アプリとして最低限必要な構造を、各対応プラットフォームを含めて整える処理です。

だからこそ、初回起動では手書きで始めるより flutter create を使うべきです。

2-2. CLIでプロジェクトを作る

CLI から作る場合は、次のように実行します。

flutter create my_first_flutter_app
cd my_first_flutter_app

PowerShell なら次のようになります。

flutter create my_first_flutter_app
Set-Location my_first_flutter_app

Flutter 公式の新規アプリ作成ページでも、flutter create によるプロジェクト生成が基本として扱われています。

2-3. VS Code から作る

Flutter 公式の Install Flutter using VS Code では、Command Palette から Flutter: New Project を実行する流れが案内されています。

VS Code を使う場合、CLI を直接打たなくてもプロジェクト作成が可能です。

GUIで行う操作

VS Code を開く
Cmd/Ctrl + Shift + P で Command Palette を開く
Flutter: New Project を選ぶ
Application を選ぶ
プロジェクト名と保存先を指定する

この方法は、Flutter 拡張が正しく有効になっているかも同時に確認できるため、VS Code ユーザーには分かりやすい導線です。

2-4. Android Studio から作る

Android Studio / IntelliJ 向けの公式ページでも、Flutter plugin を入れた状態で新規 Flutter プロジェクトを作る流れが案内されています。

Android Studio を主IDEにする場合は、GUI から始めても問題ありません。

GUIで行う操作

Android Studio を開く
New Flutter Project を選ぶ
Flutter SDK の場所を指定する
Application を選ぶ
プロジェクト名や保存先を設定する

この方法の利点は、Android 側の開発環境と Flutter 側のプロジェクト作成を同じ場所で進めやすいことです。

2-5. この節の課題と解決

課題	何が起きるか	解決
何もない状態から書き始めようとする	構成が崩れる	テンプレート生成から始める
CLIとGUIが混ざる	手順が不安定になる	まずは1つの方法に固定する
プロジェクト生成の意味が見えない	ただのコマンド暗記になる	ひな形生成の役割を理解する

3. 作成直後のプロジェクトを見る

Flutter 公式の新規作成ページは、作成後のファイル構造や基本編集箇所の理解につながる内容を含んでいます。

ここで全部を理解する必要はありません。むしろ最初は、「どこを触るのか」「どこはまだ触らなくてよいのか」 を分けることが重要です。

3-1. どのフォルダができるのか

flutter create で作られる代表的なフォルダは、次のように整理できます。

Flutter 公式のプロジェクト作成ガイドと、Flutter が複数プラットフォームに対応する前提から、このような構成が生成されます。

フォルダ / ファイル	主な役割
lib	Dart コード本体。最初に最もよく触る
android	Android 向け設定やネイティブ側ファイル
ios	iOS 向け設定やネイティブ側ファイル
macos	macOS 向け設定やネイティブ側ファイル
windows	Windows 向け設定やネイティブ側ファイル
test	テストコード置き場
pubspec.yaml	パッケージ管理、依存関係、アセット設定など

3-2. 最初に見るべきファイル

初回起動で最初に見るべきなのは、主に次の2つです。

ファイル	理由
lib/main.dart	最初の画面やロジックが入っている
pubspec.yaml	プロジェクト名や依存関係の入口になる

Flutter 公式の Quick start や新規アプリ作成ガイドでも、最初に編集や確認の対象になるのは main.dart を中心とした基本部分です。

main.dart は、アプリの入口です。
pubspec.yaml は、依存関係やパッケージ設定の中心です。

最初の段階では、この2つを押さえておけば十分です。

3-3. なぜ作成直後に構造を見る必要があるのか

まずは lib/main.dart を中心に見て、アプリの本体がどこにあるのかを把握するほうが、安全で理解しやすいです。

3-4. この節の課題と解決

課題	何が起きるか	解決
どのファイルを触ればよいかわからない	無駄に迷う	最初に触る場所を限定する
生成物を全部理解しようとする	情報量で疲れる	最初は main.dart と pubspec.yaml に絞る
プロジェクト構造が見えない	後で混乱する	作成直後に全体を眺める

4. 実行先を確認する

Flutter アプリは、作っただけでは動きません。どこに実行するかを決める必要があります。

Flutter 公式の Quick start や Android / iOS セットアップでも、起動前に devices を確認する流れが重視されています。

4-1. 実行先とは何か

実行先とは、Flutter アプリを起動する対象です。代表的には次の4種類があります。

実行先	具体例
Android Emulator	Android の仮想端末
iOS Simulator	Mac 上の iPhone / iPad 仮想端末
実機	Android スマートフォンや iPhone
desktop target	Windows / macOS アプリとしての実行先

Flutter 公式の Android setup や iOS setup は、それぞれ Emulator / Simulator を開発用の主要な実行先として扱っています。

4-2. flutter devicesの使い方

Flutter から見えている実行先を確認するには、次のコマンドを使います。

flutter devices

PowerShell でも同じです。

flutter devices

この結果に、Android Emulator、iOS Simulator、実機、desktop target などが表示されます。Flutter 公式の Quick start でも、起動前の確認にこの考え方が必要です。

4-3. なぜ実行前に device 確認が必要なのか

flutter run を打ってから「端末がない」と気づくより、先に devices を見たほうが原因を減らせるからです。

4-4. この節の課題と解決

課題	何が起きるか	解決
実行先を確認せず run する	エラー原因が曖昧になる	先に flutter devices を実行する
実行先が複数あって混乱する	意図しない端末で起動する	device id を確認する
実行先が0件	起動できない	Emulator / Simulator / 実機を先に用意する

5. flutter runで初回起動する

ここまで来たら、いよいよ初回起動です。Flutter 公式の Quick start でも、最終的な確認は アプリを run して動かすこと にあります。

ここで重要なのは、単にコマンドを打つことではなく、run 中に何が起きているのかを理解することです。

5-1. flutter runの基本

基本コマンドは次です。

flutter run

5-2. 特定の端末を指定して起動する

実行先が複数ある場合は、-d を使って端末を指定できます。

flutter run -d <device-id>

このは、flutter devices の結果に表示される識別子です。複数端末を同時に接続しているときは、こちらのほうが安全です。

5-3. 初回起動中に起きること

flutter run を実行すると、大まかには次の流れが起きます。

アプリをビルドする
実行先へインストールする
アプリを起動する
開発中のセッションとして接続する

5-4. 初回起動でどこを見ればよいか

初回起動時に見るべきなのは、次の3点です。

見る場所	確認したいこと
ターミナル出力	どこで失敗していないか
実行端末の画面	アプリが表示されているか
エラー表示	その場で止まっていないか

5-5. この節の課題と解決

課題	何が起きるか	解決
run の意味を理解せず使う	出力の意味が読めない	build → install → launch の流れで理解する
起動中のログを見ない	失敗地点がわからない	ターミナル出力を追う
実行先を明示しない	想定外の端末で起動する	-d を活用する

後半デェあ、実際にFlutterアプリを動かしていきます。