この記事について

アプリエンジニアの @anabebe です。
私事ですが、M1チップのMacBookを購入しました。

「M1に買い替えたら○○が動かねえ！」
的な断末魔をTwitterでよく見かけたので、環境構築の記録を残します。
これからM1 MacでFlutterの環境構築する人は参考になるかもです。

動作環境

マシン	OS
MacBook Air (M1, 2020)	macOS Monterey v12.1

構築内容

zshrc ••• zshの設定
vimrc ••• vimの設定
Homebrew ••• Macのパッケージ管理ツール
git ••• 定番のバージョン管理ツール
Flutter(asdf) ••• Flutterのパッケージ管理ツール
Android Studio ••• Androidアプリ開発用のIDE
Xcode ••• iOSアプリ開発用のIDE
Flutter(2回目) ••• 環境の整備
Visual Studio Code ••• 高機能エディタ

やっていく

zshrc

zshのカスタマイズ

CLIでは必須と言えるzshを自分好みにカスタマイズします。

.zshrcの作成

ユーザーディレクトリに.zshrcを作成し、自分の使いやすいような設定を書いていきます。
とりあえず私がよく使うaliasだけ記載しておきます。

~/.zshrc

alias ll='ls -la'
alias la='ls -a'

試してみる。zsh: command not found: xxとならなければOK。

zsh

% ll
% la

vimrc

vimのカスタマイズ

CLIではちょいちょい使うvimを自分好みにカスタマイズします。
この記事を参考にしました。

.vimrcの作成

これもユーザーディレクトリに.vimrcを作成し、自分の使いやすいような設定を書いていきます。

~/.vimrc

" == 操作 ==

" ファイルを上書きする前にバックアップを作ることを無効化
set nowritebackup
set nobackup
" vim の矩形選択で文字が無くても右へ進める
set virtualedit=block

" == 検索 ==

" 検索するときに大文字小文字を区別しない
set ignorecase
" 小文字で検索すると大文字と小文字を無視して検索
set smartcase
" 検索がファイル末尾まで進んだら、ファイル先頭から再び検索
set wrapscan
" インクリメンタル検索 (検索ワードの最初の文字を入力した時点で検索が開始)
set incsearch
" 検索結果をハイライト表示
set hlsearch

" == 表示 ==

" 行番号を表示
set number
" 対応する括弧やブレースを表示
set showmatch matchtime=1
" インデント方法の変更
set cinoptions+=:0
" メッセージ表示欄を2行確保
set cmdheight=2
" ステータス行を常に表示
set laststatus=2
" ウィンドウの右下にまだ実行していない入力中のコマンドを表示
set showcmd
" 省略されずに表示
set display=lastline
" 行末のスペースを可視化
set listchars=tab:^\ ,trail:~
" コマンドラインの履歴を10000件保存する
set history=10000
" コメントの色を水色
hi Comment ctermfg=3
" 入力モードでTabキー押下時に半角スペースを挿入
set expandtab
" インデント幅
set shiftwidth=2
" タブキー押下時に挿入される文字幅を指定
set softtabstop=2
" ファイル内にあるタブ文字の表示幅
set tabstop=2
" yでコピーした時にクリップボードに入る
set guioptions+=a
" 対応する括弧を強調表示
set showmatch
" 改行時に入力された行の末尾に合わせて次の行のインデントを増減する
set smartindent
" スワップファイルを作成しない
set noswapfile
" タイトルを表示
set title
" シンタックスハイライト
syntax on

保存してvimで開き直してみると軽く感動する。

HomeBrew

インストール

こいつがなかったら何も始まらねえ。
M1ではなぜか最初にHomeBrewがインストールされていないので、インストールします。

インストール

HomebrewがないのでcURLを使ってHomebrewをインストールします。

zsh

% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

M1ではなぜかHomeBrewのインストール先が/opt/homebrewで、パスが通っていないので、ログイン時に自動でパスを通すように.zshrcに以下を追記。

~/.zshrc

typeset -U path PATH
path=(
  /opt/homebrew/bin(N-/)
  /opt/homebrew/sbin(N-/)
  /usr/bin
  /usr/sbin
  /bin
  /sbin
  /usr/local/bin(N-/)
  /usr/local/sbin(N-/)
  /Library/Apple/usr/bin
)

試してみる。Homebrewのバージョンが表示されてればOK。

zsh

% brew -v
Homebrew 3.3.12
Homebrew/homebrew-core (git revision 24f814395d7; last commit 2022-01-25)

git

インストール

よく使いすぎて、最初から入ってると錯覚します。
コード書くなら必須中の必須なので、gitをインストールします。

インストール

ほやほやのHomebrewを使ってasdfをインストールします。

zsh

% brew install git

試してみる。gitのバージョンが表示されてればOK。

zsh

% git version
git version 2.32.0 (Apple Git-132)

Flutter(asdf)

バージョン管理ツールでFlutterのインストール

ようやくFlutter。
asdfというFlutterのバージョン管理ツールを使います。
似たようなものにfvmというものがあり、そっちを使ってましたが、
fvmはコマンドの頭にfvm flutter ~~~と付けなきゃいけないんです。
どうやらasdfはそうではないみたいなので使ってみました。

インストール

Homebrewを使ってasdfをインストールします。

zsh

% brew install asdf

試してみる。asdfのバージョンが表示されてればOK。

zsh

% asdf version
v0.9.0

asdfにFlutterのプラグインを入れます。

zsh

% asdf plugin add flutter

Flutterの使用可能なバージョンのリストを取得します。

zsh

% asdf list all flutter
~~ 省略 ~~
2.8.0-stable
2.9.0-0.1.pre-beta
2.9.0-0.1.pre-dev
2.8.1-stable
2.10.0-0.1.pre-beta
2.10.0-0.1.pre-dev
2.10.0-0.2.pre-beta
2.10.0-0.2.pre-dev

現時点の安定版の最新は2.8.1-stableみたいですね。
プロジェクトのルート直下に.tool-versionsを作り、以下の内容を記載します。

.tool-versions

flutter 2.8.1-stable

asdfでFlutterを使うためにzshrcに以下の内容を追記します。

~/.zshrc

. /opt/homebrew/opt/asdf/asdf.sh

flutterコマンドが効いているか確認します。バージョンが表示されてればOK。

zsh

% flutter --version                                      
Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (6 weeks ago) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1

プロジェクト外でFlutterコマンドを使う場合（新しいプロジェクトを作成する場合など）はグローバルに設定します。

zsh

% asdf global flutter 2.8.1-stable

せっかくなんで新しいプロジェクトを作成してみましょう。

zsh

% flutter create sample_flutter

Android Studio

インストールからAndroidビルドまで

インストール

ダウンロードページの「Download options」からandroid-studio-xxxxxxxx-mac_arm.dmgをクリックし、インストーラーをダウンロードします。
インストーラー起動後は画面に従ってインストールしてください。
大体承認しとけばオッケーです。

プラグインの追加

Preferences > Plugins > Type / to see options から以下のプラグインを検索したりして見つけ、Installします。

Flutter
Dart
Kotlin
Markdown

ビルド

仮想デバイスを選択し、▶︎(Run)をクリックします。
初回は色々やるので少し時間がかかります。

無事に起動しました。

Xcode

インストールからiOSビルドまで

インストール

普通にApp Storeから最新版をインストールしてください。(雑)

ビルド

例のサンプルプロジェクトを開きます。

早速ビルドしていきたいのですが、デフォルトでは仮想マシンがなぜかiPod touch (7th generation)になっているので、iPhone 13に変更します。

▶︎でビルドします。

一発でビルドできました。Android Studioを先に設定したからだろうか。

Flutter(2回目)

環境の整備

Android StudioとXcodeをインストールしたら、Flutter周りの環境を整えておきます。

チェック

環境設定の状況をチェックを以下のコマンドで行います。

zsh

% flutter doctor
Running "flutter pub get" in flutter_tools...                      10.7s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.63.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

お、いくつか出てますね。Chromeは無視して、AndroidとiOSを解決していきましょう。

Android

「Android SDKが見つからないよ！」って言ってます。んなわけねえだろ。
ライセンスに同意するコマンドをやってないからかな？

zsh

% flutter doctor --android-licenses
Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to resolve this.

「だからAndroid SDKがねえよ！」って怒られてます。怒らないで。
Android Studioを確認します。

Preferences > Appearance & Behavior > System Settings > Android SDK > SDK Toolsを開きます。

僕が悪かったです。大人しくチェック入れてOKします。
インストールが完了したら、再度ライセンスの同意をします。

zsh

% flutter doctor --android-licenses

ライセンスについて、クソほど英語を畳み掛けてきますが、脳死でyしましょう。
これでAndroidの方はOKです。

iOS

iOSの方は指示が出てるので、指示通りコマンドを実行します。

zsh

% sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
% sudo xcodebuild -runFirstLaunch

「Cocoa Podsがねえよ！」ってブチ切れてるので、これも優しく入れておきます。

zsh

% brew install cocoapods
% pod setup

チェックしてみましょう。

zsh

% flutter doctor
[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.63.2)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

Chrome以外はOKになりましたね。

Visual Studio Code

インストールからビルドまで

M1は軽量だからAndroidStudioメインでもいいんですが、せっかくなんでVSCodeも入れましょう。

インストール

Homebrewからインストールします。付けなくても問題なさそうだけど一応--caskも付けときましょう。

zsh

% brew install --cask visual-studio-code

起動したら拡張機能を入れていきます。

Japanese Language Pack for Visual Studio Code ••• VSCodeの日本語化
Flutter ••• Dart/Flutterの補完

Flutter SDKのパスを通します。
Code > 基本設定 > 設定 > 拡張機能 > Dart > SDK > setting.json で編集をクリック。

以下の内容を追記します。
上の行末尾に,を入れ忘れないよう注意。

setting.json

{
    "dart.flutterSdkPath": "/Users/USER NAME/.asdf/installs/flutter/2.8.1-stable",
}

ビルド

ここまでの手順で一通り設定したので、もうAndroid/iOS共にビルドできるはずです。

左カラム実行とデバッグ > 上部にある▷ボタンをクリックし、デバイスを選択します。
（iOSはシミュレーターを起動しておかないとビルドできないので、シミュレーターをドックに入れておくと便利です。）

おわり

全く苦労せず構築できました。そもそもM1ならではの部分が少なかったですね。
しかしこれでFlutterでアプリ開発する上で問題ないくらいは揃ったと思います。
お役に立って気が向いたらLGTMしてくれたら嬉しいです。

これから僕は新しいマシンでFlutter_HooksとRiverpodを勉強していく予定なので、気が向いたらまた記事書きます。
それでは。