Flutterアプリケーション開発概論

MacOS・Windows対応の開発環境構築(XCode・Install・Error対応) 中盤

6. iOS開発環境を入れる(Macのみ)

iOS 開発は、Flutter であっても Mac が前提です。

理由は、iPhone / iPad 向けのビルドや Simulator 実行に Apple の公式ツールチェーンである Xcode が必要だからです。

Flutter 公式の iOS セットアップも、Xcode、command-line tools、Simulator、flutter doctor -v を使った確認を案内しています。

この章で押さえるべき点は、「Flutter はクロスプラットフォームだが、各OSの開発基盤までは不要になるわけではない」ということです。

Flutter が UI とロジックの共通化を助けてくれても、iOS アプリとして実行・署名・確認するには Apple 側の開発環境が必要です。

6-1. iOS開発がMac限定である理由

Windows では iOS 向けのローカルビルドや iOS Simulator 実行はできません。

Flutter 公式の iOS 開発セットアップは macOS 前提で書かれており、Xcode とその関連設定を要求しています。

したがって、iPhone アプリまで学習したい場合は、Mac を使う必要があります。

ここで重要なのは、「Flutter は1つのコードで複数OSに対応できる」ことと、「どのOSでも同じ開発機材で済む」ことは別だという点です。

Flutter は共通コードの利点を持ちますが、iOS の開発環境条件そのものは Apple のルールに従います。

6-2. Xcodeの導入

Xcode は、iOS ビルド、iOS Simulator、Apple の開発ツール群をまとめて提供する中核ツールです。Flutter 公式の iOS セットアップでも、まず Xcode を用意することが前提になっています。

GUIで行う操作

  1. App Store から Xcode をインストールする
  2. Xcode を一度起動して、初回セットアップを完了する

この「一度起動する」が地味に重要です。インストールしただけでは初回構成が終わっていない場合があり、そのままでは flutter doctor -v に警告が残ることがあります。

6-3. command-line tools の設定

Flutter 公式の iOS セットアップでは、Xcode command-line tools の導入・選択、初回セットアップ、ライセンス同意が必要です。

これらが不足すると、Xcode 本体が入っていても iOS toolchain が未完了扱いになります。

コピペ用コマンド

まず command-line tools の導入を試します。

xcode-select --install

すでに入っている場合や、Xcode 本体を明示的に使わせたい場合は次を実行します。

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
sudo xcodebuild -license

この3つは、それぞれ「使う Xcode の場所を指定する」「初回起動に必要な追加処理を走らせる」「ライセンスに同意する」とい意味です。

Flutter 公式の iOS 開発セットアップでも、同種の初期化手順が案内されています。

6-4. iOS Simulator の起動

iOS Simulator は、Mac 上で iPhone / iPad の挙動を確認するための仮想実行環境です。Flutter の iOS セットアップでも、iOS Simulator を開発用実行先として扱っています。

GUIで行う操作

  • Xcode を開く
  • Open Developer Tool から Simulator を起動する

または、Xcode インストール後に利用可能になった Simulator をそのまま使います。

確認コマンド

flutter doctor -v
flutter devices

flutter devices に iPhone Simulator 系の実行先が見えていれば、Flutter 側から iOS Simulator を認識できています。

6-5. この手順で起こりやすいエラー

エラー1: Xcode not installed

  • 症状:flutter doctor -v で Xcode 周辺に未設定項目が出る
  • 原因:Xcode 本体が未インストール
  • 解決:App Store から Xcode を入れる。インストール後は必ず一度起動する。

エラー2: command-line tools not configured

  • 症状:Xcode はあるのに doctor に警告が残る
  • 原因:xcode-select や xcodebuild -runFirstLaunch が未実行
  • 解決:次を順に実行する。
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

エラー3: licenses not accepted

  • 症状:ビルドや doctor がライセンス未同意を示す
  • 原因:Xcode ライセンス未同意
  • 解決
sudo xcodebuild -license

エラー4: Simulator が一覧に出ない

  • 症状:flutter devices に iOS Simulator が表示されない
  • 原因:Xcode 初回起動未完了、または command-line tools 設定不足
  • 解決:Xcode を起動し、初期セットアップを終えたうえで、再度 flutter doctor -v と flutter devices を確認する。

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

課題何が起きるか解決
Xcode がないiOS 実行できないXcode をインストールする
command-line tools が未設定doctor に警告が残るxcode-select と xcodebuild を実行する
ライセンス未同意ビルドが止まるsudo xcodebuild -license を実行する
Simulator が見えないiPhone 確認できないXcode 初回設定を完了する

7. macOS / Windows デスクトップ開発を入れる

Flutter は mobile だけでなく、macOS や Windows の desktop アプリ開発にも対応しています。

Flutter 公式は desktop support の導線を用意し、macOS と Windows を個別にセットアップする前提で説明しています。

ただし、ここでも大切なのは「Flutter が共通コードを提供しても、desktop 側の toolchain はOSごとに必要」という点です。

つまり、mobile の延長でそのまま動くのではなく、desktop 向けの実行条件も確認しなければなりません。

7-1. desktop support とは何か

desktop support とは、Flutter アプリを macOS や Windows のネイティブアプリとして実行・開発することです。

Flutter 公式の macOS / Windows setup が別ページになっていることからも、desktop は mobile とは別の準備項目を持つとわかります。

7-2. macOS 開発環境の追加確認

Mac では、Xcode 関連の toolchain が iOS だけでなく macOS 側にも関わるため、まずは flutter doctor -v を見て不足を潰すのが基本です。

Flutter 公式の macOS setup も、この確認導線を前提にしています。

7-3. Windows 開発環境の追加確認

Windows では、Windows desktop 向けの開発条件が別途必要です。Flutter 公式の Windows setup は、flutter doctor -v を使って必要な Windows 側ツールの不足を確認し、解決する流れを案内しています。

Mac

flutter doctor -v
flutter devices

Windows

flutter doctor -v
flutter devices

flutter doctor -v では、Windows 側なら Windows desktop toolchain、Mac 側なら macOS 関連項目の状態を確認します。flutter devices では desktop 実行先が見えているかを確認します。

7-4. この手順で起こりやすいエラー

エラー1: Windows desktop toolchain unresolved

症状:Windows desktop 開発条件が未解決と表示される

原因:Windows 側の必要ツール不足

解決:Windows setup の要件に沿って不足ツールを導入し、再度 flutter doctor -v を実行する。

エラー2: macOS target が出ない

症状:flutter devices に macOS 実行先が出ない

原因:toolchain やセットアップ不足

解決:macOS setup の要件を確認し、flutter doctor -v の不足項目を潰す。

エラー3:flutter devicesにdesktop が出ない

症状:mobile 端末しか見えない

原因:desktop 開発条件が満たされていない

解決:OS 別 setup を確認し、必要ツール導入後に flutter devices を再確認する。

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

課題何が起きるか解決
desktop も mobile と同じ感覚で進めるビルド条件を落とすdoctor で別個に確認する
不足ツールを見逃すdevices に対象が出ないflutter doctor -v を読む
OS差分を軽視する原因が見えないMac / Windows を分けて確認する

8. 実行先を準備する

Flutter 開発では、コードを書くだけでは不十分です。どこで動かすかを用意しなければ、flutter run は正常に終了しません。

Flutter 公式の Android setup は Emulator、iOS setup は Simulator を前提にし、Quick start でも実行先の確認を重視しています。

8-1. Android Emulator

Android Emulator は Android の仮想端末です。UI 確認、基本的な操作確認、Android 向けの初回実行確認に向いています。Mac / Windows 共通で扱えるため、最初の実行先として特に有用です。

8-2. iOS Simulator

iOS Simulator は Mac 上で使える Apple の仮想実行環境です。iPhone / iPad 向けの画面確認や基本挙動確認に向いています。Flutter 公式の iOS setup でも、Simulator を主要な確認先として扱っています。

8-3. 実機

実機は、カメラ、通知、性能、センサー、ネットワーク、OS 固有の挙動確認で重要です。仮想端末だけでは再現しきれない場面があるため、最終確認では実機も意識すべきです。Flutter 公式も connected devices を run / deploy の前提として扱っています。

8-4. どれを優先すべきか

目的優先すべき実行先
最初の起動確認Android Emulator
MacでiPhone確認iOS Simulator
実機機能確認実機
desktop 学習Windows / macOS desktop target

この順に考えると、学習も切り分けも安定します。特に最初は Android Emulator を1台用意すると進めやすいです。

8-5. 確認コマンド

flutter devices

PowerShell:

flutter devices

このコマンドで、Flutter から見えている実行先が一覧表示されます。ここに何も出なければ、flutter run は基本的に進みません。

8-6. この手順で起こりやすいエラー

エラー1:No devices available

症状:flutter devices に何も出ない

原因:Emulator / Simulator / 実機が1つも起動していない

解決:Android Emulator または iOS Simulator を先に起動し、再度 flutter devices を実行する。

エラー2: Emulator は作ったが見えない

症状:仮想端末はあるのに Flutter 側で表示されない

原因:boot していない、または Android Studio 側で起動していない

解決:Device Manager から Emulator を起動したうえで、flutter devices を再実行する。

エラー3: 実機が認識されない

症状:USB 接続しても一覧に出ない

原因:接続許可、信頼設定、ドライバ、開発者向け設定などの不足

解決:OS 側の接続条件を見直し、再度 flutter devices で確認する。これは Flutter 特有というより、各OSの実機接続条件に関わる問題です。

8-7. この節の課題と解決

課題何が起きるか解決
実行先がないflutter run できない先に 1 台起動する
仮想端末だけで十分と思う実機差異を見落とす実機の役割も意識する
devices を見ない何に実行しているかわからない毎回 flutter devices を確認する

9. flutter doctor -v の読み方

Flutter 環境構築で最重要の確認コマンドが flutter doctor -v です。Flutter 公式の VS Code install、Android setup、iOS setup、Windows setup はいずれも、最終的な診断や不足確認に doctor を使う流れを採っています。

9-1. なぜ doctor が最重要なのか

doctor は、このマシンに何が足りないかを一覧で示す診断コマンドだからです。感覚で調べるより、まず doctor を実行したほうが速く、漏れも少なくなります。Flutter 公式も導入の最終確認として doctor を明示しています。

9-2. 実行コマンド

Mac

flutter doctor -v

Windows

flutter doctor -v
  • v は詳細表示です。初学者にもおすすめです。どこが不足しているかを具体的に読み取りやすくなります。

9-3. 見るべきポイント

項目何を見るか
FlutterSDK 自体が正常か
Android toolchainAndroid 実行条件が満たされているか
XcodeiOS / macOS 条件が満たされているか
VS Code / Android Studioエディタ認識があるか
Connected device実行先が見えているか

この見方を覚えると、doctor の出力が「難しいログ」ではなく、「不足一覧」に見えてきます。

9-4. 直したら再実行する意味

環境構築は、1回で全部終わるとは限りません。1つ不足を直すと、その先の不足が見えることがあります。

そのため、

  • 直す → flutter doctor -v
  • 直す → flutter doctor -v の繰り返しが基本です。Flutter 公式のセットアップ全体も、この反復を前提にしています。

9-5. この手順で起こりやすいエラー

エラー1: doctor 結果の意味がわからない

  • **症状:**表示は出るが、何を直せばよいか判断できない
  • **対処:**一度に全部を直そうとしない。上から順に、Flutter → Android → Xcode → devices のように 1 項目ずつ見る。

doctor は「現在の不足一覧」と理解すると読みやすいです。

エラー2: 1つ直したのに別の項目で止まる

  • **症状:**修正後に新しい警告が見える
  • **対処:**正常です。

前の不足が消えたことで、次の不足が表面化しただけです。再度 1 項目ずつ潰します。Flutter のセットアップはこの反復で完成に近づきます。

9-6. この節の課題と解決

課題何が起きるか解決
doctor を読めない何を直すべきかわからない項目ごとに意味を読む
一気に直そうとする混乱する1項目ずつ進める
修正後に確認しない直ったか不明毎回再実行する

10. 最初のアプリを作って起動確認する

環境構築は、インストールしただけでは完了ではありません。新規プロジェクトを作り、起動し、Hot Reload が効くことまで確認して、初めて「使える環境」と言えます。Flutter 公式の Quick start も、プロジェクト作成から実行確認までを含んでいます。

10-1. 新規プロジェクト作成

Macの場合

flutter create my_first_flutter_app
cd my_first_flutter_app

Windows

flutter create my_first_flutter_app
Set-Location my_first_flutter_app

Flutter 公式の Create a new Flutter app でも、プロジェクト作成は基本導線です。

10-2. 実行先を選ぶ

まず、実行先が見えているか確認します。

flutter devices

この一覧から、Android Emulator、iOS Simulator、desktop target、実機などが見えていれば、その先へ run できます。

10-3. 起動確認

見えている端末へ起動します。

flutter run

特定デバイスへ出したい場合は -d を使います。

flutter run -d <device-id>

この は flutter devices に表示される識別子です。

10-4. Hot Reload 確認

起動後、lib/main.dart の文字を少し変えて保存します。Flutter の Quick start でも、Hot Reload は中核的な開発体験として扱われています。

保存後に変更が素早く反映されれば、編集 → 実行 → 確認のループが機能しています。

10-5. ここまでできたら環境構築完了

次が確認できれば、環境構築はひとまず成功です。

  • flutter doctor -v で致命的な不足がない
  • flutter create が通る
  • flutter run で起動する
  • 保存で Hot Reload が効く

この4つは、「インストールできた」ではなく「開発できる」と言うための最低条件です。

10-6. この手順で起こりやすいエラー

エラー1: project creation failed

症状:flutter create が途中で失敗する

原因:SDK や PATH の問題、作成先フォルダの権限問題など

解決:まず flutter --version と flutter doctor -v を確認し、Flutter SDK 自体が正常かを先に見る。必要なら別フォルダで再実行する。

エラー2: run は通るが起動しない

症状:コマンドは受け付けるが、端末側でアプリが立ち上がらない

原因:実行先未起動、toolchain 不足、device 側の不備

解決:flutter devices で実行先が見えているかを再確認し、必要に応じて flutter doctor -v に戻る。

エラー3: Hot Reload が効かない

症状:保存しても変更が反映されない

原因:Flutter プロジェクトとして開いていない、実行状態が不安定、IDE 拡張や接続不備など

解決:プロジェクト直下を正しく開き、起動中のターミナルまたは IDE 側の状態を確認する。Flutter の Quick start でも、Hot Reload は起動済みの開発ループの一部として扱われています。

10-7. この節の課題と解決

課題何が起きるか解決
インストールだけで終える実行不備を見逃す新規起動まで必ず確認する
起動だけで満足するHot Reload 不備に気づけない保存反映まで試す
実行先を曖昧にする再現性がないflutter devices で明示する
教材トップへ戻る