MENU
CART

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

AIとIT

    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をコピーしました！
    目次