【動作環境】
＜パソコン＞
機種：MacBook Air（13inch）
OS：macOS Sonoma（ver.14.5）
チップ：Apple M3
シェル：zsh
＜ソフトウェア＞
・Flutter（ver.3.22.3）
・Xcode（ver.15.4）
・CocoaPods（ver.1.15.2）
・Android Studio（ver.2024.1）
・Visual Studio Code（ver.1.92.0）
今回は、MacでFlutterを用いたアプリ開発を行うための環境構築について解説します。
必要なPCは？
最低限必要なスペックとおすすめのパソコン
Flutterの公式ドキュメントに書いてあるスペックは以下の通りです。
| 必要スペック | 最低限 | おすすめ |
|---|---|---|
| CPUコア | 4 | 8 |
| メモリ（GB） | 8 | 16 |
| ディスプレイ解像度 （ピクセル） | 1366×768 （1366×768） | フルHD （1920×1080） |
| 空きディスク容量（GB） | 44.0 | 70.0 |
おすすめは、「MacBook Air M3 メモリ16GB、ストレージ512GB」です。
Apple Storeで見てみると、値段は、224,800円（税込）でした（2024年11月23日現在）。
Apple silicon搭載のMacで必要な設定
【Apple silicon搭載のMacかどうかを確認する方法】
Macをお持ちの方は、画面上部のメニューバーにある［Apple メニュー］をクリックして、［このMacについて］をクリックしましょう。
表示される画面の［チップ］項目を確認することで、Apple silicon搭載のMacかどうかがわかります。
「Apple M○」と書いてあれば、Apple silicon搭載のMacになります。
Apple silicon搭載のMacを使用している場合は、Rosetta 2をインストールする必要があります。
ターミナルに以下のコマンドを入力しましょう。
sudo softwareupdate --install-rosetta --agree-to-licenseFlutter SDK のインストール
Flutter SDKをインストールする手順
※Apple silicon搭載のMacを使用していない場合は、左側のボタンからzipファイルをダウンロードします。
ターミナルを起動して、以下のコマンドを入力します。
mkdir development以下のコマンドを入力します。
cd development以下のコマンドを入力します。
unzip ~/Downloads/［ダウンロードしたzipファイルの名前］［ダウンロードしたファイル名］には、ダウンロードしたzipファイルの名前を入力します。
今回僕がダウンロードしたzipファイルの名前は、「flutter_macos_arm64_3.22.3-stable.zip」
でしたので、以下のようになります。
unzip ~/Downloads/flutter_macos_arm64_3.22.3-stable.zipFlutterをPATH（パス）に追加する手順
今の状態でFlutterのプログラムを実行するには、/（ルートディレクトリ）の中のUsersの中のshima（ホームディレクトリ）の中のdevelopmentの中のflutterの中のbinにあるflutter（実行ファイル）を呼び出す必要があります。
毎回、以下のコマンドを入力するのは非常に大変です。
development/flutter/bin/flutterそこで、
flutterと入力すれば、プログラムが実行できるようにしていきます。
この作業を、「PATH（パス）を通す」といいます。
［ターミナル］に、以下のコマンドを入力します。
vim .zshenv［I（アイ）］キーを押して、編集モードに変更します。
以下のように入力します。
export PATH=$HOME/development/flutter/bin:$PATH［esc］キーを押して、「:wq」と入力します。
［×］ボタンを押して、［ターミナル］を閉じます。
そして、再度起動します。
おまけ
ターミナルに、以下のコマンドを入力してみましょう。
flutterはじめてであれば、ターミナルに以下の画面が表示されます。
画面にこのような表示が出てきたら、インストールしていきましょう。
iOSアプリの開発環境を整える
Xcodeのインストール手順
ターミナルに、以下のコマンドを入力しましょう。
sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'すると、パスワードの入力を求められますので、Macを起動する時のパスワードを入力します。
その後、ライセンスへの同意が求められます。
［enter］キーを押して、ライセンスを表示させたら、「agree」と入力してライセンスに同意していきましょう。
iOSシミュレーターを起動する手順
ターミナルに、以下のコマンドを入力します。
xcodebuild -downloadPlatform iOS以下のコマンドを入力します。
open -a Simulatorすると、以下のようにシミュレーターが立ち上がります。
CocoaPodsのインストール手順
CocoaPodsのインストール
ターミナルに、以下のコマンドを入力します。
sudo gem install cocoapodsすると、パスワードの入力を求められますので、Macを起動する時のパスワードを入力します。
CocoaPodsをインストールしようするときに、以下のようなエラーメッセージが出る場合があります。
これは、Rubyのバージョンが足りていないときに表示されます。
以下の記事を参考にRubyのバージョンを上げ、再度CocoaPodsをインストールしましょう。
PATH（パス）を通す
［ターミナル］に、以下のコマンドを入力します。
vim .zshenv［I（アイ）］キーを押して、編集モードに変更します。
以下のように入力します。
export PATH=$HOME/.gem/bin:$PATH先ほど書き込んだパスの下に、入力するようにしましょう。
［esc］キーを押して、「:wq」と入力します。
以下のコマンドを入力します。
source ~/.zshenvAndroidアプリの開発環境を整える
Android Studioのインストール手順
［Download Android Studio Koala］をクリックします。
下にスクロールします。
1: ［I have read and agree with the above terms and conditions］に を入れます。
2: ［Mac with Apple chip］をクリックします。
※Apple silicon搭載のMacを使用していない場合は、左側のボタンからzipファイルをダウンロードします。
1: Finderを起動し、［ダウンロード］をクリックします。
2: ダウンロードしたdmgファイルをクリックします。
以下のような画面が表示されます。
Android Studioのアイコンをアプリケーションにドラッグ＆ドロップします。
1: Finder 起動し、［アプリケーション］をクリックします。
2: ［Android Studio.app］ をクリックします。
以下のように、初期設定を進めていきます。
Android toolchainの設定を行う
［SDK Manager］を起動する
1: ［More Actions］をクリックします。
2: ［SDK Manager］をクリックします。
1: ［Android SDK］をクリックします。
2: ［SDK Tools］をクリックします。
3: ［Android SDK Command-line Tools（latest）］にチェック をいれます。
4: ［OK］をクリックします。
すると、確認画面が表示され、［OK］をクリックします。
Android Emulatorを起動する手順
Android Emulatorを起動する
1: ［More Actions］をクリックします。
2: ［Virtual Device Manager］をクリックします。
［起動］ボタンをクリックします。
すると、以下のようにAndroid Emulatorが起動します。
仮想デバイスを追加する
1: ［Phone］をクリックします。
2: 具体的な端末をクリックします。
3: ［Next］をクリックします。
Androidライセンスに同意する
ターミナルに、以下のコマンドを入力します。
flutter doctor --android-licensesその後は、「y」と入力して［enter］キーを押し、ライセンスに同意していきます。
VS Code をエディターとして使用する
VS Codeのインストール手順
1： アクティビティバーの［拡張機能］をクリックします。
2： 検索ボックスに「flutter」と入力します。
3： Flutter 拡張機能にある［インストール］をクリックします。
flutter doctor コマンドで確認
ここまで行ってきた設定がうまくできているのかを、確認します。
ターミナルを起動して、以下のコマンドを入力します。
flutter doctor以下と同じような画面が表示されたら、OKです。
［］と［！］が表示されている箇所は、まだ設定が完了していない部分です。
すべてが、［］になっていなければ、もう一度設定を行いましょう。
これにて、MacでFlutterを用いたアプリ開発を行うための環境構築についての解説を終わります。
次は、新規プロジェクトの作成方法について解説します。
コメント