torikatsu.dev

Flutterとかプログラミングとかガジェットとか書きます

トップ > M1 mac の環境構築　その1

M1 mac の環境構築　その1

こんにちは、とりかつです。 最近、intel macからm1 macに乗り換えました！

乗り換えに当たって環境構築をしていたのですが、せっかくなので環境構築の手順をドキュメント代わりに記事にまとめてみようと思います。

環境構築の方針は以下の通りです。

  • 極力apple cilicon nativeで動くものを選択する
  • flutterの開発ができるようになる
  • ポータビリティを高めるため、ミニマルな構成にすることを心がける

今回の記事で、全ての環境は完成していません。 とりあえず現時点で最低限必要なものをインストールしていく形になります。

またなにか環境構築が必要になったタイミングで記事にまとめていこうと思います。

※ m1対応状況は日々更新されています。もし「これ対応がアップデートされたよ」とかあればコメントしていただければ幸いです。

Xcodeのインストール

まずはAppStoreからXcodeをインストールしましょう。 こいつはサイズがクソでかいです。そのため、インストールにはかなりの時間がかかります。 環境構築タスクを並列で処理できるように、最初にXcodeのインストールを行います。

Homebrewのインストール

Homebrewがないと何も始まりません。とりあえず脳死で入れます。

m1 mac発売直後は動かないみたいな話を聞いていたのですが、最近M1対応したという風の噂を聞きました。 brew.sh

homebrewのインストールにはcommand line tools for xcodeが必要だということなので先に入れておきます。

xcode-select --install

ということで以下のページのインストール用のワンライナーをシェルで実行します。 brew.sh

インストールの後半で「/opt/homebrewのパスがとおってねぇぞ」って怒られてしまいました。

f:id:torikatsu923:20210227193004p:plain
homebrewインストール中の出力

なので、~/.zshrcにパスを通します。

$ vim ~/.zshrc
typeset -U path PATH
path=(
    /opt/homebrew/bin(N-/) <-homebrewのパスです
    /usr/local/bin(N-/)
    $path
)

パスの最後に(N-/)とつけています。 これは存在しないディレクトリのパスを展開しないようにしてくれる便利なやつです。

解説はここが結構わかりやすかったです。 qiita.com

どうやら(/)はディレクトリが存在しない時エラーを吐いてくれるやつのようです。 例えばunknown/path配下にディレクトリが存在しない時、unknown/path(/)はエラーを吐きます。

この状態だと対象がシンボリックリンクだった時にエラーを吐かれてしまうので、シンボリックリンクだったときに実体の方を見てくれる-をつけます。

unknown/path(-/)

実際にエラーを吐かれてしまうのは問題があるので、エラーの時にパスの代わりに空文字を展開してくれるNを使います。

unknown/path(N-/)

chromeのインストール

普段私はvimiumというchrome拡張を使用しています。 これは、ブラウザでvimのキーバインドによる操作を可能にする拡張機能です。 これを使うことで、キーボードのホームポジションから手を離すことなく快適なブラウジングをすることができます。 chrome.google.com

safariにもvimキーバインドを可能にしてくれる拡張は存在するのですが、chrome拡張のほうが動作の安定感があると私は感じています。 それゆえ、safariよりchromeが使いたいので、homebrewを使ってchromeをインストールします。

brew install google-chrome

nodeのインストール

私はwebアプリケーション開発をメインで行っています。 webアプリケーション開発において、nodejsとの関係は切っても切り離せません。 なので、とりあえずnodeをインストールします。 普通にnodejsを入れてもいいのですが、nodeのバージョンを切り替えたい時があったりするので、バージョン管理ができるようにします。 私がnodeのバージョン管理をする上で、管理ツールの候補に以下2つをあげました。 - nodebrew - nodenv

nodenvはディレクトリ単位でバージョンを管理できるみたいな噂を聞いたので、今回はnodenvを選択します。

brew intall nodenv

そして、パスを通しておきます。initも必要らしいのでeval ~~~も追加しておきます。

# .zshrc
path=(
  ...
  $HOME/.nodenv/bin(N-/)
  ...
)

eval "$(nodenv init -)

nodenvのインストールが終わったら、とりあえずglobalに最新バージョンのnodeを導入します。

nodenv install 15.10.0
nodenv global 15.10.0

f:id:torikatsu923:20210227202301p:plain
node -v

vscodeのインストール

vscodeはinsider版がm1対応しているという話を聞いたことがあるので、insider版をインストールします。

vscode insiders property
Appleシリコンという記述があることがわかります
\

brew install visual-studio-code-insiders

Flutterの開発が快適に行えるよう、インストールが完了したら以下の拡張機能を入れておきます。()

marketplace.visualstudio.com marketplace.visualstudio.com marketplace.visualstudio.com

Android studioのインストール

モバイルアプリの開発をする上でAndroidSturioは欠かせません。 パッケージは通常とbeta、canaryがあります。どれもRosseta2上で動かす必要がありそうです。

brew search android-studio
brew search android-studio

今回は通常盤を入れます。 betaやcanaryの違いについては以下のページを参考にしました。 medium.com

brew install android-studio

インストール後はAndroidStudioを起動して、よしなに設定を進めます。

初期設定がが完了したらとりあえずEmulatorが動くか確認します。

AVDマネージャのエラー

やはり、まだm1チップには対応していないようです。なのでしばらくは実機を使う必要がありそうです。 どうしてもEmulatorを触りたいんだ！って人は以下でm1対応のpreview版が配布されているのでそちらから...

androidstudio.googleblog.com

Flutterの開発ができるよう、以下のプラグインを入れておきます() - Idea Vim - Dart (Flutterのプラグインインストール時に一緒に入れ流ことができます) - Flutter

flutter sdkのインストール

flutterの開発にはsdkが必要です。 公式が丁寧なので、以下にしたがってインストールを進めます。 flutter.dev

まずはインストール先のフォルダを作成します。

mkdir ~/development && cd ~/development

クローンします

git clone https://github.com/flutter/flutter.git -b stable

パスを通します

# ~/.zshrc
path=(
  ...
  $HOME/development/flutter/bin(N-/)
  ...
)

flutter doctorで問題を潰していって完了です。

おわりに

とりあえずFlutterの開発ができそうな感じになったので今回はここまでにします。 次回の記事ではシェルをいい感じに使えるようにしていきます！