MENU
Udemyでもプログラミングを教えていますUdemy

【2024年最新版】MacでのFlutter環境構築マニュアル

AIとIT
  • URLをコピーしました！

Mac上でFlutterを開発するための環境構築方法を解説します。
VSCode、Ruby(Homebrew + rbenv)、Xcode、Android Studio、そしてFlutter SDKの導入からテスト実行までを扱います。

目次

1. macOSのアップデート（推奨）

  1. Appleメニュー（画面左上のリンゴマーク） → 「システム設定」（または「システム環境設定」）
  2. 「一般」 → 「ソフトウェアアップデート」 でmacOSを最新バージョンにアップグレードしておきます。
    • 時間がかかるため、事前に余裕をもって実施してください。

2. VSCodeのインストール

  1. ブラウザで「VSCode インストール」と検索するか、Visual Studio Code公式サイト にアクセスします。
  2. 使用しているMacのCPUアーキテクチャ（IntelかApple Silicon）に合ったインストーラをダウンロードします。
  3. ダウンロードしたzipまたはdmgファイルを解凍し、アプリケーションフォルダなどに配置します。
  4. VSCodeを起動し、問題なく起動できるか確認してください。

VSCodeのフォルダを開く方法

  • ドラッグ&ドロップ：VSCodeのアイコンへフォルダをドラッグ&ドロップ
  • **VSCodeの「ファイル」→「フォルダーを開く」**から対象フォルダを選択

3. VSCode拡張機能のインストール

  1. VSCodeの左サイドバーにある**拡張機能マーク（四角が積み重なったアイコン）**をクリック。
  2. 次の拡張機能を検索してインストールします。
    • Dart
    • Flutter
    • Japanese Language Pack for Visual Studio Code（日本語化用）

4. Ruby環境構築 (Homebrew + rbenv)

Flutterのセットアップそのものには必須ではありませんが、Rubyを使う場面（CocoaPodsの管理など）があるため、Ruby環境の構築方法もまとめています。

4.1 Homebrewのインストール

  1. Homebrew公式サイト へアクセスし、記載されているインストール用コマンドをコピーします。
  2. ターミナルを開いて、コピーしたコマンドを貼り付けてEnter。
    • 「既にインストール済み」の場合はスキップして構いません。
    • コマンドは時期によって変更されるため、必ず最新のコマンドを公式サイトで確認してください。

4.2 Homebrewのバージョン確認

brew -v
  • バージョンが表示されればOKです。

4.3 rbenvのインストール

  1. 下のコマンドでrbenvとruby-buildをインストールします。
    brew install rbenv ruby-build
  2. インストール後、rbenvを初期化します:bashコピーするrbenv init
    • ターミナル上に「書き込んでください」というメッセージが出る場合は、シェルの設定ファイルにエクスポート文を追記する必要があります。
    • Macのデフォルトシェルはzshなので、多くの場合は ~/.zshrc（または ~/.zprofile）に追記します。
    • bashの場合は ~/.bashrc に追記します。
  3. シェル設定ファイルをエディタで開き、export PATH=... や eval "$(rbenv init -)" などの行を追記したら、上書き保存して設定を反映します:bashコピーするsource ~/.zshrc # or ~/.bashrc

4.4 Ruby本体のインストールと設定

  1. インストール可能なRubyバージョンを確認:bashコピーするrbenv install -l
  2. 目的のバージョン（例: 3.1.2）をインストール:bashコピーするrbenv install 3.1.2
  3. インストールしたRubyバージョンを使用するように設定:bashコピーするrbenv global 3.1.2
  4. 反映確認:bashコピーするruby -v
    • 指定したバージョンが表示されればOK

4.5 動作確認（簡単なRubyスクリプト）

  1. 適当なフォルダを作成し、index.rb というファイルを作成します。
  2. 中に以下のように記述:rubyコピーするputs "Hello, Ruby!"
  3. ターミナルから実行:bashコピーするruby index.rb
    • Hello, Ruby! と出力されれば成功。

5. Xcodeのインストール

  1. App Storeを開き、「Xcode」で検索してインストールします。
  2. インストール後、Xcodeを初回起動すると使用許諾契約などの画面が出るため、同意 → Macのパスワード入力 → 追加コンポーネントのインストール を行います。
  3. シミュレーターなどのダウンロードが行われる場合があるので、完了まで待ちます。

6. Android Studioのインストール

  1. Android Developers公式サイト へアクセスし、Download Android Studio ボタンをクリック。
    • Intelチップの場合はAndroid Studio for Mac (Intel), Apple Siliconチップ(M1/M2)の場合はAndroid Studio for Mac (ARM)を選択
  2. ダウンロードしたdmgファイルを開き、Android Studioをアプリケーションフォルダにドラッグ＆ドロップします。
  3. Android Studioを起動し、初回セットアップウィザードが表示されたら、
    • Standard を選択
    • SDK関連のライセンスに「Accept」
    • その後インストールが行われるので完了まで待機
  4. セットアップ完了後、Android Studioのメニューから
    • 「Settings」または「Preferences」 → 「Appearance & Behavior」 → 「System Settings」 → 「Android SDK」
    • SDK Tools タブから 「Android SDK Command-line Tools (latest)」 をチェックしてインストール
  5. すべて完了したらAndroid Studioは一度閉じてOKです。

7. Flutter SDKのインストール

7.1 Flutter SDKのダウンロード

  1. ブラウザで「Flutter 3.10.0.1 インストール」などと検索するか、Flutter SDKアーカイブページ へアクセスします。
  2. 「3.10.0.1」など、目的のバージョンを選択。
    • IntelチップのMac → x64
    • M1/M2などApple Silicon → arm64
  3. ダウンロードしたzipファイルをホームディレクトリ（/Users/ユーザー名/）などに解凍します。
    • ダウンロード元のzipは不要になれば削除して構いません。

7.2 パスの設定

  1. ターミナルを開き、現在のシェル（zshかbashか）を確認:bashコピーするecho $SHELL
    • zsh: /bin/zsh → ~/.zshrc か ~/.zprofile
    • bash: /bin/bash → ~/.bashrc
  2. シェル設定ファイルを編集して、Flutter SDKのbinディレクトリをPATHに追加:bashコピーするnano ~/.zshrc # 例としてnanoエディタを使う場合 以下のような行を最上部や末尾に追加します（ユーザー名は自分のものに置き換え）:bashコピーするexport PATH="$PATH:/Users/＜ユーザー名＞/flutter/bin"
  3. 保存後、反映:bashコピーするsource ~/.zshrc

7.3 ライセンスへの承認

bashコピーするflutter doctor --android-licenses
  • 何度か y を押して承認を進める

7.4 不要なダートSDK競合のアンインストール (警告対処)

  • Flutter/Dartが競合警告を出す場合は、brew uninstall dart としてHomebrew経由のDartを削除し、Flutter付属のDartを使うようにします。

7.5 Android Studio側Javaパス修正（必要な場合のみ）

  • 「Unable to find bundled Java version」エラーが出る場合の対処:
    1. Finderから「アプリケーション」 → Android Studio を右クリック → 「パッケージの内容を表示」
    2. Contents → jbr フォルダをコピーし、同じ階層にペースト
    3. ペーストされたjbrのコピーフォルダ名をjreにリネーム
    4. ターミナルでflutter doctorを再度実行し、問題が解決したか確認

7.6 CocoaPodsのインストール（iOSビルドに必要）

brew install cocoapods
  • 「Already installed」と出る場合は既に入っているのでOK。

7.7 確認

bashコピーするflutter doctor
  • 全て ✓ になればセットアップ完了です。

8. Flutterプロジェクトの作成と実行

  1. デスクトップなどに作業用フォルダ（例: flutter_apps）を作成
  2. ターミナルでそのフォルダへ移動:bashコピーするcd ~/Desktop/flutter_apps
  3. Flutterプロジェクトを新規作成:bashコピーするflutter create first_app
  4. 作成された first_app フォルダをVSCodeやAndroid Studioで開く

8.1 VSCodeで実行する場合

  1. VSCodeを開き、プロジェクトフォルダ first_app をドラッグ&ドロップ
  2. デバッグ用デバイス（エミュレーター/実機）を起動する
    • Android Studio → Tools → Device Manager → 好みのエミュレーターを起動
    • または iOS Simulator をXcodeから起動
  3. VSCode下部（右下あたり）にあるデバイス選択で、起動したエミュレーターを選択
  4. ターミナル(またはVSCodeのターミナル)で:bashコピーするflutter run
  5. アプリがエミュレーター上に起動すればOKです。

8.2 Android Studioで実行する場合

  1. Android Studioを起動 → Open → first_app の android フォルダを選択
  2. 右上のデバイスマネージャーから適切なエミュレーターを起動
  3. Run ボタンを押してビルド・実行
  4. エミュレーター上にFlutterアプリが表示されれば成功

9. VSCodeを日本語化する（オプション）

VSCode上部メニューから

  • 表示 → コマンドパレット
  • 「Configure Display Language」(または類似の文言) を入力して選択
  • Japanese を選択
  • VSCodeをリスタートすると日本語表記に切り替わります。

Apple Developer アカウントなしで実行する方法

  1. 無料のApple IDを使う
    Apple Developer アカウントがなくても、無料のApple IDを使ってiOSデバイスにアプリをインストールして実行できます。しかし、この場合、署名に関していくつか制限があります。
  2. 制限事項：
    • アプリの有効期限：無料のApple IDでは、インストールしたアプリの有効期限が7日間に設定されます。その後は再度署名し直す必要があります。
    • App Storeで公開できない：この方法ではApp Storeにアプリを公開することはできませんが、開発中のアプリを自分のデバイスにインストールしてテストする分には問題ありません。
    • デバイス数の制限：同時に使えるデバイスの数に制限があり、最大3台までです。

Apple Developer アカウントなしで実行するための手順

  1. Xcodeで無料のApple IDを設定する：
    • Xcodeを開き、Xcode > Preferences から Accounts タブを開き、Apple IDを追加します。
    • 無料のApple IDでサインインし、XcodeにApple IDを設定します。
  2. Signing & Capabilitiesの設定：
    • Runner.xcworkspace をXcodeで開き、Signing & Capabilities タブで「Automatically manage signing」をオンにします。
    • Team で、無料のApple IDを選択します。
  3. Bundle Identifierの確認：
    • Bundle Identifier（例えば com.example.firstApp）は、必ず一意の名前に設定します。通常、com.example.firstApp のままで問題ありません。
  4. ビルドと実行：
    • Xcodeでビルドを行い、デバイスを選んでアプリをインストールします。
    • iPhoneにアプリがインストールされ、デバイス上で実行できるようになります。

まとめ

  1. macOSを最新にアップデート
  2. VSCodeインストール & 拡張機能導入
  3. Ruby環境(Homebrew + rbenv)整備
  4. Xcodeインストール & 初回起動
  5. Android Studioインストール & SDK設定
  6. Flutter SDKダウンロード & PATH設定
  7. ライセンス同意 & 各種警告の対処
  8. Flutterプロジェクトの作成・実行
  9. VSCodeの日本語化（任意）

上記の手順がすべて完了すると、Mac上でFlutterアプリをビルド・実行できるようになります。エミュレーターや実機を用いて開発を始められますので、ぜひお試しください。

AIとIT

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次