Apple Silicon版macOSにHomebrewとnodenvを入れてcreate-react-appするまで

React

Homebrewのインストール

まず Homebrew公式ページ を参考にHomebrewを入れる

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

Apple Silicon版Macbook発売当初はインストールスクリプトが新環境に対応しておらず、もう少し手順を踏まなければいけなかった。対応パッチ作成してくれた方に感謝

試しにTerminalの別タブを開いてzshを起動しなおしてみると insecure directories と警告が出る

zsh compinit: insecure directories, run compaudit for list.
Ignore insecure directories and continue [y] or abort compinit [n]?

compaudit で insecure directories を見れるとのこと。Homebrewのインストールで増えたディレクトリがおかしい

% compaudit
There are insecure directories:
/opt/homebrew/share/zsh/site-functions
/opt/homebrew/share/zsh

% ls -ld /opt/homebrew/share/zsh/site-functions
drwxrwxr-x  3 xxx  admin  96  4 22 22:43 /opt/homebrew/share/zsh/site-functions
% ls -ld /opt/homebrew/share/zsh
drwxrwxr-x  3 xxx  admin  96  4 22 22:39 /opt/homebrew/share/zsh

具体的にどう直せという指示がないので困ったが 755 に狭めればいいらしい

% chmod 755 /opt/homebrew/share/zsh/site-functions
% chmod 755 /opt/homebrew/share/zsh
% compaudit
# 出力なし

Homebrewまわりもチェックして問題なし

% brew --version                           
Homebrew 3.1.3
Homebrew/homebrew-core (git revision 0f7e4ea6ca; last commit 2021-04-22)

% brew doctor
Your system is ready to brew.

nodenvのインストール

次にHomebrew経由でnodenvを入れる nodenvのREADME を読んでコマンドを実行

brew install nodenv
echo 'eval "$(nodenv init -)"' >> ~/.zshrc
eval "$(nodenv init -)"

実行環境をチェックするスクリプトも載っているので実行

# スクリプト内のtypeコマンドにbash向けのオプションが付いているので、パイプで渡す先はbashのままで
% curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash
Checking for `nodenv' in PATH: /opt/homebrew/bin/nodenv
Checking for nodenv shims in PATH: OK
Checking `nodenv install' support: /opt/homebrew/bin/nodenv-install (node-build 4.9.38)
Counting installed Node versions: 0 versions
Auditing installed plugins: OK

Node.js 16.0.0が出た直後だったのでさっそく入れてglobalにセット

nodenv install -l # インストールできるバージョンを表示
nodenv install 16.0.0
nodenv global 16.0.0

入ったことを確認

% nodenv versions
* 16.0.0 (set by /Users/xxx/.nodenv/version)
% node --version
v16.0.0
% npm --version
7.10.0

create-react-app

最後にReactアプリのベースを作って終わり！

# 適当なディレクトリに移動してから
npx create-react-app my-app --template typescript