【動作環境】
＜パソコン＞
機種：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を用いたアプリ開発を行うための環境構築について解説します。
1. 必要なPCは？
1-1. 最低限必要なスペックとおすすめのパソコン
Flutterの公式ドキュメントに書いてあるスペックは以下の通りです。
| ハードウェア要件 | 最低限のPCスペック | 推奨されるPCスペック |
|---|---|---|
| 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日現在）。
1-2. Apple silicon搭載のMacで必要な設定
【Apple silicon搭載のMacかどうかを確認する方法】
Macをお持ちの方は、画面上部のメニューバーにある［Apple メニュー］をクリックして、［このMacについて］をクリックしましょう。
表示される画面の［チップ］項目を確認することで、Apple silicon搭載のMacかどうかがわかります。
「Apple M○」と書いてあれば、Apple silicon搭載のMacになります。
Apple silicon搭載のMacを使用している場合は、Rosetta 2をインストールする必要があります。
【手順解説】
1: Dockにある［Launchpad］を起動します。
2: ［その他］をクリックします。
3: ［ターミナル］を起動します。
4: ターミナルに以下のコマンドを入力し、［enter］キーを押します。
sudo softwareupdate --install-rosetta --agree-to-license2. Flutter SDK をインストールする
2-1. Flutter SDKをインストールする
【手順解説】
1: 以下のリンクよりFlutterの公式サイトを開きます。
https://docs.flutter.dev/get-started/install/macos/mobile-ios#install-the-flutter-sdk
2: ［flutter_macos_arm64_3.22.3-stable.zip］をクリックします。
Apple silicon搭載のMacを使用していない場合は、左側のボタンからzipファイルをダウンロードします。
3: ターミナルを起動して、以下のコマンドを入力し、［enter］キーを押します。
mkdir development4: 以下のコマンドを入力し、［enter］キーを押します。
cd development5: 以下のコマンドを入力し、［enter］キーを押します。
unzip ~/Downloads/［ダウンロードしたzipファイルの名前］［ダウンロードしたファイル名］には、ダウンロードしたzipファイルの名前を入力します。
今回僕がダウンロードしたzipファイルの名前は、「flutter_macos_arm64_3.22.3-stable.zip」
でしたので、以下のようになります。
unzip ~/Downloads/flutter_macos_arm64_3.22.3-stable.zip2-2. 「PATH（パス）を通す」とは？
今の状態でFlutterのプログラムを実行するには、/（ルートディレクトリ）の中のUsersの中のshima（ホームディレクトリ）の中のdevelopmentの中のflutterの中のbinにあるflutter（実行ファイル）を呼び出す必要があります。
毎回、以下のコマンドを入力するのは非常に大変です。
development/flutter/bin/flutterそこで、
flutterと入力すれば、プログラムが実行できるようにしていきます。
この作業を、「PATH（パス）を通す」「PATH（パス）に追加する」といいます。
パスを通すことで、ターミナルにいちいちディレクトリ構造を全て入力しなくてもflutterコマンドが使えるようになります。
2-3. Flutterの入っているディレクトリをPATH（パス）に追加する
【手順解説】
1: ターミナルに、以下のコマンドを入力し、［enter］キーを押します。
vim .zshenv2: ［I］（アイ）キーを押して、編集モードに変更します。
3: 以下のように入力します。
export PATH=$HOME/development/flutter/bin:$PATH4: ［esc］キーを押して、「:wq」と入力し、［enter］キーを押します。
5: 以下のコマンドを入力し、［enter］キーを押します。
source ~/.zshenv6: 書き換えたファイルが読み込まれます。
2-4. パスが通っているか確認する
【手順解説】
1: ターミナルに、以下のコマンドを入力し、［enter］キー押してみましょう。
flutter2: はじめて上記のコマンドを実行した場合は、以下の画面が表示されます。
2-5. コマンドラインデベロッパーツールをインストールする
【手順解説】
1: 以下の画面が表示されたら、［インストール］をクリックします。
3. iOSアプリの開発環境を整える
3-1. Xcodeをインストールする
【手順解説】
1: ［AppStore］を起動します。
2: 検索ボックスで「Xcode」と入力し［enter］キーを押します。
3: ［入手］をクリックします。
4: ［ターミナル］を起動します。
5: 以下のコマンドを入力し、［enter］キーを押します。
sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'6: パスワードの入力を求められますので、Macを起動する時のパスワードを入力します。
7: ライセンスへの同意を求められますので、［enter］キーを押して、ライセンスを表示させたら、「agree」と入力してライセンスに同意していきます。
3-2. iOSシミュレーターを起動する
【手順解説】
1: ターミナルに、以下のコマンドを入力し、［enter］キーを押します。
xcodebuild -downloadPlatform iOS2: 以下のコマンドを入力し、［enter］キーを押します。
open -a Simulator3: iOSシミュレーターが起動します。
3-3. CocoaPodsをインストールする
【手順解説】
1: ターミナルに、以下のコマンドを入力し、［enter］キーを押します。
sudo gem install cocoapods2: パスワードを求められますので、Macを起動するときのパスワードを入力します。
CocoaPodsをインストールする時に、以下のようなエラーメッセージが表示される場合があります。
これは、これは、Rubyのバージョンが足りていないときに表示されるメッセージです。
以下の記事を参考にRubyのバージョンを上げ、再度CocoaPodsをインストールしましょう。
3-4. Cocoapodsを利用するためのディレクトリをPATH（パス）に追加する
【手順解説】
1: ターミナルに、以下のコマンドを入力し、［enter］キーを押します。
vim .zshenv2: ［I］（アイ）キーを押して、編集モードに変更します。
3: 以下のように入力します。
export PATH=$HOME/.gem/bin:$PATH先ほど書き込んだパスの下に、入力するようにしましょう。
4: ［esc］キーを押して、「:wq」と入力し、［enter］キーを押します。
5: 以下のコマンドを入力し、［enter］キーを押します。
source ~/.zshenv4. Androidアプリの開発環境を整える
4-1. Android Studioをインストールする
【手順解説】
1: 以下のリンクよりAndroid Studioの公式サイトを開きます。
https://developer.android.com/studio
2: ［Download Android Studio Koala］をクリックします。
3: 下にスクロールします。
4: ［I have read and agree with the above terms and conditions］に を入れます。
5: ［Mac with Apple chip］をクリックします。
Apple silicon搭載のMacを使用していない場合は、左側のボタンからzipファイルをダウンロードします。
6: ［Finder］を起動し、［ダウンロード］をクリックします。
7: ダウンロードしたdmgファイルをクリックします。
8: ［Android Studio］アイコンをアプリケーションにドラッグ＆ドロップします。
9: ［Finder］を起動し、［アプリケーション］フォルダをクリックします。
10: ［Android Studio.app］ をクリックします。
11: ［Don’t send］をクリックします。
12: ［Next］をクリックします。
13: ［Standard］をクリックして選択します。
14: ［Next］をクリックします。
15: ［Next］をクリックします。
16: ［android-sdk-arm-dbt-license］をクリックして選択します。
17: ［Accept］をクリックして選択します。
18: ［android-sdk-license］をクリックして選択します。
19: ［Accept］をクリックして選択します。
20: ［Finish］をクリックします。
21: ［Finish］をクリックします。
4-2. Android toolchainの設定を行う
【手順解説】
1: ［More Actions］をクリックします。
2: ［SDK Manager］をクリックします。
3: ［Android SDK］をクリックします。
4: ［SDK Tools］をクリックします。
5: ［Android SDK Command-line Tools（latest）］にチェック をいれます。
6: ［OK］をクリックします。
4-3. Android Emulatorを起動する
【手順解説】
1: ［More Actions］をクリックします。
2: ［Virtual Device Manager］をクリックします。
3: ［起動］ボタンをクリックします。
4: Android Emulatorが起動します。
4-4. 仮想デバイスを追加する（任意）
【手順解説】
1: ［More Actions］から［Virtual Device Manager］を起動して、［追加］ボタンをクリックします。
2: ［Phone］をクリックします。
3: 具体的な端末をクリックします。
4: ［Next］をクリックします。
4-5. Androidライセンスに同意する
【手順解説】
1: ターミナルに、以下のコマンドを入力し、［enter］キーを押します。
flutter doctor --android-licenses2: 「y」と入力して［enter］キーを押し、ライセンスに同意していきます。
5. VS Code をエディターとして使用する
5-1. VS Codeをインストールする
MacにVS Codeをインストールする手順については、以下の記事をご確認ください。
5-2. Flutterプラグインをインストールする
【手順解説】
1: VS Codeを開きます。
2： アクティビティバーの［拡張機能］をクリックします。
3： 検索ボックスに「flutter」と入力します。
4： Flutter 拡張機能にある［インストール］をクリックします。
6. flutter doctor コマンドで確認する
ここまで行ってきた設定がうまくできているのかを、確認します。
【手順解説】
1: ターミナルを起動して、以下のコマンドを入力し、［enter］キーを押します。
flutter doctor2: 以下と同じような画面が表示されたら、OKです。
［］と［！］が表示されている箇所は、まだ設定が完了していない部分です。
すべてが、［］になっていなければ、もう一度設定を行いましょう。
これにて、MacでFlutterを用いたアプリ開発を行うための環境構築についての解説を終わります。
次は、新規プロジェクトの作成方法について解説します。
【shimaセレクト】
■おすすめ書籍①
●対象者
▶︎プログラミング未経験者
▶︎Flutterを触ったことのない方
■おすすめ書籍②
●対象者
▶︎Webアプリ開発経験者
▶︎Flutterを触ったことのない方
コメント