【備忘録】miseを用いたFlutter・Dartの環境構築👀

はじめに

表題の通り、今回はmiseを用いたFlutter・Dartの環境構築に関して備忘録として記事を書きたいと思います。

前提：

• OSはmacOSとする
• .zshrcは既に存在する
• homebrewをインストール済み
• Apple Developerアカウントを既に持っている
• 開発ターミナルはVSCodeとする

加えて、Flutterのインストールをすれば自動でDartもインストールされますので、Dartのインストール確認は省略するものとします。

手順

1. mise関連の構築

まずはmiseをインストールします。

brew install mise

その後、プロジェクト毎に使用するFlutterのversionが異なることもあるかと思いますので、

そういった環境変化の際にそれを読み取って瞬時に切り替えるようにシェルの設定をします。

今回はZshを対象としますので、以下のコマンドを実行します。

echo 'eval "$($(brew --prefix)/bin/mise activate zsh)"' >> ~/.zshrc
source ~/.zshrc

2. Flutterのインストール

次に先述のmiseを使ってFlutterをインストールします。

今回はGlobalに反映させるとします。

# グローバル（PC全体）で最新の安定版を使用するように設定
mise use --global flutter@latest

インストールできたか以下のコマンドで確認します。

# versionが表示されればOK
flutter --version

# 実行パスが表示されればOK
which flutter

ここまでで一旦インストールは完了です。

次はflutter doctorの結果に則って潰していきます。

3. flutter doctorの結果確認と潰し込み

この状態でflutter doctorを実行しても、

• Android toolchain - develop for Android devices
• Xcode - develop for iOS and macOS

おそらくこの2つがエラー（❌表示）になっているかと思われますので、

これらを潰していきます。

まずは「Android toolchain - develop for Android devices」からやっていきましょう。

Android toolchain - develop for Android devicesの潰し込み

1. Android Studioのインストール

最初に「Android Studio」のインストールから行いましょう。

今回はhomebrewでインストールしてみます。

brew install --cask android-studio

以下のコマンドを使って結果を確認します。

# android-studioが表示されていればOK
brew list --cask

2. Android toolchainの問題の解消

次にAndroid toolchainの問題を解消していきましょう。

そのためにAndoroid Studioの「Settings」を開きます。

その後、検索窓に「Android SDK」と入力して、左側のツリーの中からAndroid SDKを見つけ、

「SDK Tools」を選択し、「Android SDK Command-line Tools(latest)」にチェックを入れ、

OKボタンをクリックします。

インストールが完了したら再びflutter doctorで結果を確認してみましょう。

すると...

Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

このような表示結果が表示されているかと思いますので、指示されたコマンドを実行してAndroid toolchainのライセンスに同意しましょう。

flutter doctor --android-licenses

すると同意（y/N）を求められますので、全て「y」と入力します。

ターミナル上に「All SDK package licenses accepted」と表示されていればOKです。

もう一度flutter doctorを実行して「Android toolchain - develop for Android devices」のエラーが解消していればOKです。

Xcode - develop for iOS and macOSの潰し込み

次はXcodeの問題を解消していきましょう。

1. Xcodeのインストール

こちらはhomebrewを使わずにインストールすることが一般的みたいですので、

今回はこれを使わずにインストールします。

ただ、Mac App Store経由でインストールすると新しいversionのXcodeが出るたびに上書きアップデートをしてしまい、実際の開発上はこれが問題になることもあるため、

今回は以下のAppleの開発者公式サイトからインストールしてみます。

リリース候補版が表示されることもあるかもしれませんが、後々のことを考えて今回は安定版の方をインストールします。

2. Xcodeインストールが完了したら...

インストールが完了したら、以下のコマンドを実行します。

# Xcodeコマンドラインツールのディレクトリを指定する
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

もし上記コマンドを実行しても、

error: invalid developer directory '/Applications/Xcode.app/Contents/Developer'

このような表示結果になる場合は、Xcodeを再起動してみてください。

おそらく以下の画像のようにまだダウンロードが完了し切っていないはずです。

ダウンロード完了後にもう一度先述のコマンドを実行してみましょう。

それでも駄目だったら、

「ダウンロードしたXcodeがApplicationフォルダではなくDownloadフォルダにないか」

これを確認してみましょう。

もしApplicationフォルダにない場合はそれが原因なので、Finderアプリを開いてダウンロードしたXcodeをApplicationフォルダに移動してあげましょう。

上記コマンドの後は以下のコマンドを実行しましょう。

# Xcodeの関連パッケージをインストールする
sudo xcodebuild -runFirstLaunch

上記コマンドの後は以下のコマンドを実行しましょう。

# XcodeとSDKのライセンスに同意する
sudo xcodebuild -license

このコマンドを実行すると...

By typing 'agree' you are agreeing to the terms of the software license agreements. Any other response will cancel. [agree, cancel]

このようなメッセージが表示されるので「agree」と入力しましょう。

ここまで出来たらflutter doctorで状況を確認してみましょう。

iOS Simulatorのランタイムがインストールされていない場合、

Unable to get list of installed Simulator runtimes.

このように表示されているかと思われます。

この場合は以下のコマンドを実行してiOS Simulatorのランタイムをインストールしましょう。

xcodebuild -downloadPlatform iOS

ここまで来たらまたflutter doctorで状況を確認してみましょう。

すると...

CocoaPods not installed.

このようにCocoaPodsがインストールされていないとの旨の表示がまだ残っているかと思われますので、

その解消のために以下のコマンドを実行します。

sudo gem install cocoapods

CocoaPodsはiOSアプリ開発で用いられるパッケージ管理ツールでありRuby製です。

そのためmacOS標準のRubyを用いてインストールできるかやってみましょう。

上記コマンド実行後、私の環境では...

The last version of ffi (>= 1.15.0) to support your Ruby & RubyGems was 1.17.4. Try installing it with `gem install ffi -v 1.17.4` and then running the current command again
        ffi requires Ruby version >= 3.0, < 4.1.dev. The current ruby version is 2.6.10.210.

このように表示されました。

提案されたgem install ffi -v 1.17.4を実行してみると...

Fetching ffi-1.17.4-x86_64-darwin.gem
ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.

このように表示されるかと思われます。

これはシステムRubyのディレクトリ（/Library/Ruby/Gems/2.6.0）に直接gemをインストールしようとしているが故であり、

また、システムRuby（2.6）は古いため、この場合はrbenvなどのバージョン管理ツールを使用して安全な専用環境でRubyを管理できるようにした方がいいかと思われます。

そのため、以下のようにまずはrbenvをインストールしましょう。

brew install rbenv ruby-build

次に、以下のコマンドを実行してrbenvのパスを通してあげましょう。

echo "eval \"\$(rbenv init - zsh)\"" >> ~/.zshrc

そうしたら、以下のコマンドを実行して実行中のシェルに変更を反映させてあげましょう。

. ~/.zshrc

次はrbenvを使ってRubyをインストールします。

先述の表示文の中に、

ffi requires Ruby version >= 3.0, < 4.1.dev.

このようにあるため、今回は現行最新版の4.0.3をインストールしてみましょう。

rbenv install 4.0.3

次にグローバルのRubyのバージョンを4.0.3に指定してみましょう。

rbenv global 4.0.3

ちゃんと反映されているか以下のコマンドで確認してみましょう。

ruby --version

もし反映されていない場合はターミナルを再起動してもう一度上記コマンドを実行して確認してみましょう。

反映されていることが確認できるかと思われますので、次は本題のCocoaPodsをインストールします。

gem install cocoapods

最後に以下のコマンドを実行してCocoaPodsのversionが表示されていればOKです。

pod --version

ここまで完了したらまたflutter doctorで確認してみましょう。

No issues found!

このように表示されていれば無事完了です！

4. VSCodeの設定

後はVSCodeの拡張機能にFlutterを入れてあげましょう。

次に試しにFlutter: New Projectでちゃんとアプリが立ち上がるか確認してみましょう。

すると...

この画像が表示され失敗するかと思いますので、

• VSCode で Command + , (カンマ)で設定を開き
• 右上の「ファイルのようなアイコン（Open Settings (JSON)）」をクリックします

そして以下の設定をsettings.jsonに追加・修正します。

{
  "dart.flutterSdkPath": "/Users/あなたのユーザー名/.local/share/mise/installs/flutter/latest",
  "dart.sdkPath": "/Users/あなたのユーザー名/.local/share/mise/installs/flutter/latest/bin/cache/dart-sdk"
}

あなたのユーザー名やlatestの部分は適宜ご自身の環境に合わせて修正してください。

もしかしたら古いpath情報がsettings.jsonに残っているかもしれないので、そちらは消しても大丈夫です。

その後、

• 上記のコードをsettings.jsonの{ }の中に貼り付けて保存（Command + S）する
• VSCode を一度完全に終了（Command + Q）してから再起動

これを行なって再度Flutter: New Projectを試してみましょう。

今度はうまく行くはずです。

次に、Command + Shift + P → Flutter: Select Deviceで実行環境（Chrome, Simulator 等）を選択してみましょう。

この設定は後から上記と同じ手順で変更できるので、今回は試しにmacOS (Desktop)でやってみます。

Flutter: Select DeviceはFlutterプロジェクトを開いていないと表示されません。

仕上げに以下のコマンドによりアプリが実行できるか試してみましょう。

flutter run

うまく起動できれば環境構築完了です🎉

後は色々とお好きなように修正しみてましょう🎶

参考