MacOS・Windows対応の開発環境構築（PATH設定と各種ツール導入） 前半
はじめに
この前半パートでは、Flutter の開発環境を作る前に必要な全体像を理解し、Mac / Windows の違いを把握し、Flutter SDK・エディタ・Android 開発環境までを整えることを目標にします。
Flutter 公式の導入導線は、Install Flutter を起点に、VS Code 導入、手動導入、各プラットフォーム設定へつながる構成になっています。
この教材は、「読んで理解する」だけでなく、そのまま作業に移せるように作っています。
ただし、Android Studio の SDK Manager / Device Manager、VS Code の拡張導入など、GUI 操作が必要な箇所もあります。
そこはコマンドだけで完結しないため、どこをクリックするかまで含めて整理します。
この章で学ぶこと
| 項目 | この前半でできるようになること |
|---|---|
| 全体像の理解 | Flutter 環境構築に何が必要か説明できる |
| OS差分の理解 | Mac と Windows の違いを理解できる |
| SDK導入 | Flutter SDK を導入し、PATH の意味を理解できる |
| エディタ導入 | VS Code または Android Studio の役割を説明できる |
| Android準備 | Android Studio、SDK、Emulator の必要性を理解できる |
1. まず全体像をつかむ
Flutter 環境構築で最初につまずきやすいのは、Flutter SDK だけ入れれば終わると思ってしまうことです。
実際には、Flutter SDK に加えて、エディタ、Android 開発環境、必要に応じて iOS や desktop 向けの環境、さらに実行先として Emulator / Simulator / 実機が必要です。
Flutter 公式の導入ページも、その前提で複数のセットアップ導線を用意しています。
1-1. Flutter開発に必要なもの
Flutter 開発に必要なものは、役割ごとに分けると理解しやすくなります。Flutter SDK は flutter コマンドやビルド・診断の土台、エディタは編集とデバッグ、Android Studio は Android SDK と Emulator 管理、Xcode は iOS 開発用、そして Emulator / Simulator / 実機は動作確認先です。
| 構成要素 | 役割 | 必須度 | url |
|---|---|---|---|
| Flutter SDK | flutter コマンド、プロジェクト作成、ビルド、診断の基盤 | 必須 | https://docs.flutter.dev/install/quick |
| Dart SDK | Flutter SDK に含まれる言語・ツールチェーン | 必須 | https://dart.dev/get-dart |
| エディタ / IDE | コード編集、補完、デバッグ、Hot Reload | 必須 | https://code.visualstudio.com/ |
| Android 開発環境 | Android 実行・ビルド・Emulator 用 | ほぼ必須 | https://developer.android.com/studio?hl=ja |
| iOS 開発環境 | iPhone / iPad 向け実行・ビルド用 | Mac のみ必要 | |
| desktop 開発環境 | Windows / macOS アプリ実行用 | 必要に応じて | |
| Emulator / Simulator / 実機 | 実際にアプリを動かす先 | 必須 |
1-2. なぜFlutterは環境構築でつまずきやすいのか
理由は単純で、Flutter が複数プラットフォームを対象にできるぶん、周辺ツールも増えるからです。
Android を動かすには Android SDK と Emulator が必要ですし、iOS は Xcode を使う Mac 前提です。
Windows desktop も別の開発条件があります。Flutter 公式が Android / iOS / Windows を個別ページで分けているのは、この差分が大きいからです。
1-3. このページの進め方
この教材では、次の順で進めます。
- Flutter SDK を入れる
- エディタを入れる
- Android 開発環境を整える この順番にする理由は、まず Android を動かせるようにすると、Mac / Windows 共通で最初の成功体験を作りやすいからです。
Flutter 公式の VS Code 導入や Android セットアップも、Flutter 本体の導入後に Android 実行環境へ進む流れです。
1-4. この節の課題と解決
| 課題 | 何が起きるか | 解決 |
|---|---|---|
| 必要なものが多く見える | 何から始めるか迷う | 役割別に分けて理解する |
| Flutterだけで終わると思う | 実行段階で止まる | Android / iOS / desktop を別物として認識する |
| OS差分を後から知る | 手戻りが増える | 最初に Mac / Windows の違いを確認する |
2. MacとWindowsの違いを先に確認する
環境構築では、何が共通で、何が違うのかを最初に知ることが大切です。
- Flutter SDK
- VS Code
- Android Studio
- Android Emulator
は、Mac / Windows 共通で使えます。
一方、**iOS 開発は Xcode を必要とするため Mac 前提です。**Windows は iOS ビルドに対応しません。
Flutter 公式でも iOS と Windows は別ページで案内されています。
2-1. 共通してできること
Mac と Windows のどちらでも、Flutter SDK を入れて、VS Code または Android Studio を使い、Android 向けに開発し、flutter doctor -v で状態確認できます。
これは Flutter 公式の install / editor / Android setup の構成とも一致します。
| 共通項目 | 内容 |
|---|---|
| Flutter SDK 導入 | flutter / dart コマンドを使う基盤 |
| VS Code / Android Studio 利用 | エディタ・デバッグ環境 |
| Android 開発 | Android SDK、Emulator、実機実行 |
| flutter doctor -v 診断 | 現在の不足を確認する |
2-2. Macだけでできること
Mac では Xcode と iOS Simulator を使えるため、iPhone / iPad 向け開発ができます。Flutter 公式の iOS セットアップは、Xcode、command-line tools、Simulator を前提にしています。
2-3. Windowsで注意すること
Windows では iOS ビルドはできません。その代わり、Android 開発と Windows desktop 開発が中心になります。Windows 向けセットアップも、flutter doctor -v で Windows 開発条件を確認する流れになっています。
2-4. 学習開始時のおすすめ
最初の学習ルートとしては、次が安定です。
Mac
- Android → iOS
Windows
- Android → Windows desktop の順が進めやすいです。
特に最初は Android に絞ると、Flutter 本体・エディタ・SDK・Emulator の切り分けがしやすくなります。
| OS | おすすめ順 |
|---|---|
| Mac | Android → iOS → macOS desktop |
| Windows | Android → Windows desktop |
2-5. この節の課題と解決
| 課題 | 何が起きるか | 解決 |
|---|---|---|
| WindowsでiOSを試そうとする | 構築できず止まる | iOS は Mac 前提と理解する |
| OS差分を把握しない | 後で想定外の不足が出る | 共通項目と差分を先に整理する |
| 対象を広げすぎる | 切り分けできなくなる | まず Android 1本で成功させる |
3. Flutter SDKを入れる
Flutter SDK は Flutter 開発の中心です。Flutter 公式では、VS Code 経由の導入、手動導入、SDK archive の利用など複数の方法が用意されています。初学者は stable channel を使うのが基本です。
3-1. Flutter SDKとは何か
Flutter SDK には、flutter コマンド、Dart ツールチェーン、プロジェクト作成、ビルド、診断に必要な仕組みが含まれます。SDK archive でも、stable / beta などの単位で配布されています。
DLリンク: https://docs.flutter.dev/install/quick
3-2. VS Code経由で入れる方法
Flutter 公式の VS Code 導入手順では、VS Code に Flutter 拡張を入れ、Flutter: New Project から SDK のダウンロードへ進めます。Code OSS 系エディタも対象に含まれています。
GUIで行う操作
- VS Code をインストールする
- Flutter extension を入れる
- Cmd/Ctrl + Shift + P で Command Palette を開く
- Flutter: New Project を選ぶ
- SDK の場所を聞かれたら Download SDK を選ぶ
- インストール先フォルダを選ぶ
- ダウンロード後、PATH 追加の案内に従う
この流れは Flutter 公式の VS Code 導入手順に沿っています。
3-3. 手動で入れる方法
VS Code を使わずに進める場合は、Install Flutter manually と SDK archive を使います。安定版の bundle を取得して任意のフォルダへ展開します。
プログラムの意味
ホームディレクトリにdevelopmentフォルダを作って、developmentフォルダに移動する
- mkdir: make directory（フォルダを作る）
- cd: change directory（ディレクトリを移動する） ディレクトリとは、コンピュータ上のファイルや他のディレクトリを階層構造で整理・管理するための「フォルダ」のことです。
Mac用コピペ例
mkdir -p ~/development
cd ~/development
Windows PowerShell 用コピペ例
New-Item -ItemType Directory -Force C:\dev
Set-Location C:\dev
ダウンロード URL はバージョンごとに変わるため、毎回 SDK archive から stable の最新 bundle を選ぶのが安全です。
3-4. PATHを通す意味
PATH を通すとは、ターミナルや PowerShell で flutter や dart をどこからでも呼び出せるようにすることです。Flutter 公式には PATH 追加の専用ページがあります。
Mac用コピペ例
echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc
flutter --version
dart --version
Windows PowerShell 用コピペ例
$env:Path = "C:\dev\flutter\bin;" + $env:Path
flutter --version
dart --version
Windows の環境変数の設定画面で Flutter SDK の bin フォルダを Path に追加することで毎回のコマンド入力を省略することができます。
3-5. stable を使うべき理由
Flutter SDK archive では、stable channel が新規ユーザー向けかつ本番リリース向けとして案内されています。学習段階では、教材との差異を減らすためにも stable が最も無難です。
3-6. この手順で起こりやすいエラー
エラー1: flutter: command not found / flutter is not recognized
原因は、PATH 未設定か、SDK の場所違いが多いです。Flutter 公式の troubleshooting でも、インストール関連の共通問題が整理されています。
macのターミナル（確認方法）
flutter --version
windowsのPowerShell
flutter --version
直し方
- SDK の bin フォルダ位置を確認する
- PATH にそのフォルダを追加する
- ターミナルを再起動する
エラー2: VS Code の SDK ダウンロードが止まる
この場合は、VS Code 経由にこだわらず、manual install に切り替えるのが早いです。Flutter 公式は両方の導線を用意しています。
3-7. この節の課題と解決
| 課題 | 何が起きるか | 解決 |
|---|---|---|
| SDKの意味が曖昧 | 何を入れているかわからない | 開発基盤として理解する |
| 自動導入と手動導入が混ざる | 手順が壊れる | 方式を1つに決める |
| PATHが通っていない | flutter が使えない | bin を PATH に追加する |
4. エディタを入れる
Flutter 公式の主要対応エディタは VS Code と Android Studio / IntelliJ です。
VS Code は Flutter extension によってコンパイル・実行・デバッグに対応し、Android Studio は Android SDK や Emulator 管理との相性が強いです。
4-1. VS Codeを使う場合
VS Code は軽量で、Flutter 公式の Quick start や Install with VS Code と相性がよいです。Flutter extension と Dart extension が中心になります。
GUIで行う操作
- VS Code を起動
- Extensions を開く
- Flutter を検索してインストール
- 自動で Dart extension も入ることを確認
4-2. Android Studioを使う場合
Android Studio は Android Emulator との相性がよく、SDK Manager や Device Manager をまとめて使えるのが利点です。Flutter 公式も Android Studio / IntelliJ 向けの案内を用意しています。
4-3. どちらを選ぶべきか
最初の学習では、編集は VS Code、Android SDK / Emulator 管理は Android Studio という併用がかなり現実的です。Flutter 公式も両方を主要エディタとして扱っています。
| 観点 | VS Code | Android Studio |
|---|---|---|
| 軽快さ | 強い | やや重い |
| Android連携 | 十分 | とても強い |
| 初学者の導入 | しやすい | Android込みなら有力 |
| GUI管理機能 | 少なめ | 多い |
4-4. この手順で起こりやすいエラー
エラー1: 補完が出ない
- Flutter / Dart extension が未導入
- VS Code の再起動不足
エラー2: Hot Reload ボタンが出ない
- Flutter プロジェクトとして開いていない
- 拡張が有効でない
確認方法
- Command Palette で Flutter: 系コマンドが出るかを見る
これらは、Flutter 公式の VS Code サポートページで前提になっている機能です。
4-5. この節の課題と解決
| 課題 | 何が起きるか | 解決 |
|---|---|---|
| エディタ選びで迷う | 手順が散らばる | 最初は1つに固定する |
| 拡張未導入 | 開発体験が不完全になる | Flutter / Dart 拡張を入れる |
| 操作体系が混ざる | 学習が不安定になる | VS Code と Android Studio の役割を分ける |
5. Android開発環境を入れる（Mac / Windows共通）
Flutter を最初に動かす対象として、Android は最も扱いやすいです。Mac / Windows 共通で進められ、Android Emulator も使えます。
Flutter 公式の Android setup では、Android Studio、Android SDK、Device Manager、flutter emulators と flutter devices を使った確認まで案内しています。
5-1. なぜAndroid環境を最初に整えるのか
Android は両 OS 共通で使え、切り分けがしやすいからです。特に最初の環境構築では、Android を 1 本通すと、Flutter SDK・エディタ・Android toolchain・実行先の各要素が揃っているか確認しやすくなります。
5-2. Android Studioの導入
GUIで行う操作
- Android Studio をインストール
- 初回起動を済ませる
- SDK Manager を開く
- Android SDK が入っていることを確認する
- Device Manager を開く
- 仮想デバイスを作成する
この流れは Flutter 公式の Android セットアップで案内されています。
5-3. Android licenses の意味
Flutter は Android toolchain を利用するため、Android SDK のライセンス同意が必要です。未同意だと flutter doctor -v に警告が残ります。
Mac コピペ用コマンド（ターミナル）
flutter doctor -v
flutter doctor --android-licenses
Widnows **コピペ用コマンド（**PowerShell）
flutter doctor -v
flutter doctor --android-licenses
5-4. Android Emulator を作る
GUIで行う操作
- Android Studio → Device Manager
- Create device
- Pixel 系端末などを選ぶ
- 推奨 system image を入れる
- Finish
Mac
flutter emulators
flutter devices
Windows
flutter emulators
flutter devices
Flutter 公式でも、Emulator の確認に flutter emulators と flutter devices を使う流れがあります。
5-5. この手順で起こりやすいエラー
エラー1: Android toolchain not configured
- Android Studio 未導入
- Android SDK 不足
エラー2: licenses not accepted
- flutter doctor --android-licenses 未実行
エラー3: emulator が起動しない
- 仮想デバイス未作成
- system image 未取得
- PC の仮想化設定や負荷の問題
確認方法
flutter doctor -v
flutter emulators
flutter devices
これらは Flutter 公式の Android setup と troubleshooting の流れで確認できます。
5-6. この節の課題と解決
| 課題 | 何が起きるか | 解決 |
|---|---|---|
| Android SDKがない | 実行できない | Android Studio + SDK を入れる |
| ライセンス未同意 | doctor で止まる | flutter doctor --android-licenses を実行する |
| 実行先がない | run できない | Emulator を作る |
次のページで続きを説明してます。