torikatsu923.dev

サイト内検索

    M1 mac の環境構築　その1

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

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

    my new gear… pic.twitter.com/Fkb6WYRlrC

    — Torikatsu (@torikatsu923) 2021年2月26日

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

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

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

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

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

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

    Xcodeのインストール

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

    Homebrewのインストール

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

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

    3.0.0

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

    xcode-select --install

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

    Homebrew

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

    homebrewインストール中の出力

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

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

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

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

    zsh で path にディレクトリを追加するときは (N-/) を付けよう - Qiita

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

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

    unknown/path(-/)

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

    unknown/path(N-/)

    chromeのインストール

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

    Vimium

    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

    node -v

    vscodeのインストール

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

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

    \

    brew install visual-studio-code-insiders

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

    Vim - Visual Studio Marketplace

    Dart - Visual Studio Marketplace

    Flutter - Visual Studio Marketplace

    Android studioのインストール

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

    brew search android-studio

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

    What Is the Difference between Canary, Beta, RC and Stable Releases in Android Studio?

    brew install android-studio

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

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

    AVDマネージャのエラー

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

    Android Emulator Apple Silicon Preview

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

    flutter sdkのインストール

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

    macOS install

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

    mkdir ~/development && cd ~/development

    クローンします

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

    パスを通します

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

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

    おわりに

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

    -––