初Mac買いました
Macbook Air(M1チップ搭載)をやっと手に入れました🎉
正月あたりに注文したので結局1ヶ月掛かってしまいました…(カスタムしたからしょうがない)
初めてのMacだったのでWindowsとの違いにいちいちリアクションしつつ色々触ってみれたので、そろそろ開発環境を整えていきたいと思っている次第です。
周知の通りCPUアーキテクチャが従来と異なるため特に開発環境を整える上で障壁となるものはあると思いますが、自分の場合はまず「Macの開発環境のあれこれ」からなので初歩的な部分故ご了承ください。
結論、今回できたこと
まず、色々やろうとしてみたのですが結局できたのは以下の通りです。
- VSCode(Insiders Edition)のインストール
- Homebrewの導入
- Homebrewからanyenvの導入
- anyenvからnodenvの導入
- nodenvからNode.js(v15.5.0)のインストール
- TypeScript+Express.js+EJSのサンプルWebアプリで動作確認
一応、これらは全てRosetta2を使わずして出来ました。
つまりこれらはM1に対応しています。
順を追って解説します。
VSCode(Insiders Edition)のインストール
まだ、Insiders Editionしか対応してないみたいです(2021/2/7現在)
こちらのページからzipをダウンロードします。
Apple Silicon Chipって書いてあった！
なんか安心しますね。というわけでこっちをダウンロードしました。
Finderでダウンロードされたものをクリックするとインストール出来たので簡単でいいですね。
VSCodeの拡張機能も問題なくインストールできる感じです。
実際、いくつか必要なものをインストール出来ました。
Homebrewの導入
Macを手に入れる前に噂に聞いてたアレです。
Macのデファクトスタンダードなパッケージマネージャーですね。
これはプリインストールではありませんので、どこかからインストールしてくる必要があります。
今回はGitHubから入れていこうと思います。
とは言ってもcurlで入れるのでgitコマンドは使用しません。
でもここでGitを思い出してGitを入れたので余談ですが手順を書いておきます。
というわけでここからは関係ないGitの話です。
この時てっきりGitはプリインストールだと思っており以下のコマンドを実行しました。git --version…プリインストールではありませんでした。
しかし！このコマンドを実行した際にGitをインストールしますか？的なポップアップが出たので無事インストール出来ました> (スクショなくてすみません)
ポップアップでクリックするだけだから実質プリインストールですね！！😅以上です。失礼しました！
話を戻してHomebrewを入れていきます。
が、一つだけ注意点としてM1対応のためにはHomebrewを/opt/homebrew/のパスに入れる必要があるそうです。
それだけ注意していれば普通に使えるのでいいですね！
というわけで入れるディレクトリを作成します。
cd /opt
sudo mkdir homebrew
sudo chown $USER:admin homebrew
この時chownとやっているようにディレクトリ権限を変更しています。
これで準備が整いましたのでHomebrewをここに入れます。
curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C homebrew
これでHomebrewが入りました。
でもまだやることが残っています。パスを通すことです。
そのためにまず、ユーザホームディレクトリに.zshrcというファイルを作成します。
vi ~/.zshrc
viで作成したのでviエディタモードになったと思います。
Aキーで挿入モードにしたら次のように記述します。
export PATH=/opt/homebrew/bin:$PATH
記述できたら今度はesc(エスケープ)キーで挿入モードを解除し、:wqと入力したら保存して終了です。
これでユーザホームディレクトリに.zshrcファイルができました。
このファイルはシェル起動時に呼ばれて実行されるみたいです。
なのでここにパスを通すコマンドを記述しておくわけですね。ここで気づいたのですが、純正のターミナルはbashではなくzshというやつだったんですね。
bashの場合だと.bashrcというファイルになるそうです。
これでHomebrewが使えるようになったはずなのでバージョン確認でもしてみましょう！
brew -v
これに対する結果は以下の通りでした。
Homebrew >=2.5.0 (shallow or no git repository)
Homebrew/homebrew-core N/A
N/Aってなってしまってます。
そこでHomebrewのアップデートコマンドを叩いてみました。
brew update
そしてもう一度brew -vを叩いた結果です。
Homebrew 3.0.0-17-g0d1aa33
Homebrew/homebrew-core (git revision 2de085; last commit 2021-02-06)
今度こそ良さそうですね！
これでHomebrewが使えるようになりました！
anyenvの導入
前項のHomebrewのインストールで少し疲れてしまったのですが、Homebrewをインストールしてしまえば無敵です。
なんとこちら、Homebrewからインストール出来ます！
anyenvはnodenvやpyenvなどの〇〇env系のものをインストール&管理できるものです。
nodenvやpyenvなどはHomebrewから直接インストールもできますが一括管理できるならということでこちらを入れていきます。
まず、インストールするanyenvについての情報を見ていきます。
brew info anyenv
anyenv: stable 1.1.2 (bottled)
All in one for **env
https://anyenv.github.io/
Not installed
From: https://github.com/Homebrew/homebrew-core/blob/HEAD/Formula/anyenv.rb
License: MIT
==> Analytics
install: 1,400 (30 days), 4,317 (90 days), 15,063 (365 days)
install-on-request: 1,400 (30 days), 4,318 (90 days), 15,061 (365 days)
build-error: 0 (30 days)
Not installedということでまだインストールしていないのと、anyenvについての情報を見ることができました。
では続いてインストールしていきます。
brew install anyenv
インストール出来たらHomebrewでインストールしたものの一覧を確認してanyenvがあるかどうか確認します。
brew list
anyenv
anyenvと返ってきたのでインストール出来ていますね。
バージョン確認もしてみます。
anyenv -v
anyenv 1.1.2
1.1.2であると正しく返ってきました。
このように自然とanyenvコマンドが使用できていますが本当は手動でパスを通したりする必要があるんですよね。
今回その必要はなかったので楽でいいですよね！
また、もしコマンドが打てなかった時には次のようにシェルをリフレッシュしてあげるといいみたいです。
exec $SHELL -l
ではちょっとanyenvを使ってみましょう。
まず、使うために初期化をする必要があるみたいなのでやっておきます。
anyenv install --init
次にanyenvを使用してインストールできるものの一覧を確認してみましょう。
anyenv install -l
Renv
crenv
denv
erlenv
exenv
goenv
hsenv
jenv
jlenv
luaenv
nodenv
phpenv
plenv
pyenv
rbenv
sbtenv
scalaenv
swiftenv
tfenv
結構主要な言語は揃っている感じでいいですね〜
これでanyenvの導入は完了なのですが、今後anyenvで〇〇env系を入れる際にやっておいた方がいい設定などをやっておきます。
まず、〇〇env毎にパスを設定してくれるように.zshrcファイルに追記していきます。
もうviエディタを使わずに一発のコマンドでやっちゃいましょう。
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(anyenv init -)"' >> ~/.zshrc
二発でしたね。
まぁ分けているだけですので…
これでパスの設定は終了です。
これさえあればPythonもNode.jsも何もかもパスの設定をしなくていいっぽいので激ヤバです。
anyenvいいですね！
最後にもう一つ、anyenv updateというコマンドを叩くだけで〇〇env系も全てアップデートされるようにしてくれるプラグインを導入します。
git clone https://github.com/znz/anyenv-update.git ~/.anyenv/plugins/anyenv-update
gitでクローンしました。
前項でした余談が活きる時が来ました😅
これでanyenvが捗るようになりました！
nodenvの導入
前項でanyenvを導入できたのでそれを使用して入れていきます。
先程の作業から見ると拍子抜けしてしまうくらい簡単です。
anyenv install nodenv
exec $SHELL -l
exec $SHELL -lでシェルのリフレッシュもやっておきました。
続いてnodenvのバージョン確認を行います。
nodenv -v
nodenv 1.4.0+3.631d0b6
前項でやったパスの設定が効いているのでコマンドがしっかり叩けますね。
ではnodenvを使用してインストールできるものの一覧を確認します。
nodenv install -l
...(省略)
15.4.0
15.5.0
15.5.1
15.6.0
15.7.0
15.8.0
...(省略)
上記は省略していますが、大量に出てきます。
最新版である15.8.0も確認できました。
今回はM1チップということで同じ境遇の人に合わせたバージョンでインストールしたかったのでネット記事で見つけたM1 MacでNode.jsをインストールしている人が入れていたバージョンである15.5.0でやってみます。
nodenv install 15.5.0
ちょっとこれは時間がかかります。
熱くならないと言われるM1 Macがほんのり暖かくなりました。
インストール出来たら、すぐコマンドが使えるように更新します。
nodenv rehash
そして、nodenvは複数バージョンをインストールすることが前提のためデフォルトで使うバージョンを指定しておきます。
nodenv global 15.5.0
これで異なるバージョンをインストールしてもこの設定を変更するまでは15.5.0のバージョンです。
というわけでNode.jsのいつものコマンドを叩いて確認しましょう。
ドキドキしますね。
% node -v
v15.5.0
% npm -v
7.3.0
おぉー素晴らしい！
これでNode.jsが動きましたね！
TypeScript+Express.js+EJSのサンプルWebアプリで動作確認
やっと環境が整ったのでサンプルアプリを作ることができます。
まぁどうせ動くでしょ。いや動いてくれよ…
まず、TypeScriptだけはグローバルでインストールします。
npm install -g typescript
シェルを再起動してtscコマンドを叩いたところきちんと反応したのでパスも通ってます！
プロジェクトフォルダを作成しその中で以下のコマンドでプロジェクト内に色々入れていきます。
npm init -y
npm install --save express ejs
npm install --save types@express
tsc --init
さて、この後作成された設定ファイル(package.jsonやtsconfig.json)の設定やソースファイルのコーディングを行いましたが簡単な表示だけのWebアプリなので割愛します。
またこの際、以下のコマンドを叩くことでプロジェクト内に.node-versionというファイルが作成されます。
nodenv local 15.5.0
これはnodenvで複数バージョンをインストールしている際に当該プロジェクト内で実行するバージョンを指定できます。
これをやっておくとわざわざプロジェクト毎にバージョンを切り替えることを手動で行う必要がなく非常にシームレスです。
では肝心の実行結果ですが、TypeScriptのコンパイルもNode.jsの実行もWebアプリをSafariから閲覧も全て正しく実行できました！
他のライブラリはまだわからないけど、とりあえず大元が動くならよかった！
まとめ
結果として今回目指していたことはできたので良かったです。
手探り状態だったので記事が長くなってしまいました。
本当はnodenvをやる前にpyenvをやろうとしていたのですが、pyenvから任意のバージョンをインストールするところでインストール出来ませんでした。MacはPythonがプリインストールなので救いだったのですが、ライブラリがOpenCVやPandasが入らなかったので(おそらくもっと入らないライブラリはある)使える状態ではありませんでした。
早く使えるようになるといいですね！
今後としてはDockerがM1に対応したと聞いたので入れてみようかなと思っています。
それにしてもMacいいですね！
まずLinuxコマンドが使えることに感激です。
M1チップはサクサクなのと電池持ちが素晴らしいです。
これからWindowsとMacの二刀流ができることにワクワクしています😄