先日公開したGitHub・SSH接続の環境設定方法(Mac OS)でも書かせていただいた通り、M1 Mac Miniをゲットしまして、新しいMacに1から各種環境構築を行なっています。
せっかくなので、自分の理解を深めることにも繋がると思い、環境構築周りのブログ記事を今月は多めに書くようにしています!
今日はMacにNode.jsをインストールし環境構築を行う方法について書いてみたいと思います!
目次
Node.jsのインストール方法について
Node.jsをインストールする方法はいくつかあるのですが、超大まかにいうと以下のようになると思います!
- Node.jsを直接Macに突っ込んでインストールする
- nodebrewやnvmなどのNode.jsバージョン管理ツールを使用してインストールする
僕は1つ前にメインで使用していたPC(Mac Book Pro)ではnodebrewというものを使ってNode.jsのインストールやバージョン管理ツールを行っていたのですが、今回のMac Miniではnvmを使用してみることにしました。
有名なNode.jsのバージョン管理ツールとして「nvm・nodebrew」がある(と僕は思っている)のですが、Google Trendsで調べてみても、長くnvmの方がnodebrewよりも検索ボリュームが多いことからも、 せっかくなので今までと違ったもの(nvm)でやっておきたいなという気になったのが今回nvmを選択した理由です。
ちなみに、Node.jsを直接Macに突っ込んでインストールする方法とバージョン管理ツールを用いる方法の違いですが、「用途によって柔軟に使用するNode.jsのバージョンを切り替えることができるかどうか」というのがあります。
バージョン管理ツールを用いない場合だと、毎回必要なNode.jsを公式サイトからダウンロードしてPCにインストールし使用する、と言う作業が必要になるのですが、正直面倒ですよね。。。
案件によっては、Node.jsのバージョンを気軽に変えちゃダメ!とかなんらかの制約があって、すぐに最新版を用いることができないこともあったりするので。そう考えると「プロジェクトごとに使用するNode.jsのバージョンを切り替えることができる方が何かと便利」というところに行き着きます。
ということで、nodebrewやnvmのバージョン管理ツールを用いると、プロジェクトごとに使用するNode.jsのバージョンを容易に切り替えることが出来るようになるので、バージョン管理ツールを使わない手はないというわけです!
nvmを使ってNode.jsをインストールする
では、今回はnvmを使ってNode.jsをインストールしてみようと思います!
ターミナルアプリ(ターミナルやiTerms2など)を開いておきましょう!
nvmをインストールする
nvmをインストールするには、Git・Homebrew・curlといくつかの方法があるのですが、今回は後日ブログでHomebrewのことを書く予定のため、Homebrew絡みのことはその記事に任せたいという理由からcurlでインストールすることにします!
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
上記コマンドをターミナルに打ち込んで 、エンターキーを押した上でnvmをインストールしましょう!
基本的にはこれでインストール完了なのですが
nvm -v
や
command -v nvm
とコマンドを打ち込んでみて、もし無反応だったり
zsh: command not found: nvm
みたいな表示が出てきてしまっていたら、まだPCがnvmがインストールされたことを認識できていない状態なので、以下のコマンドを実行してみてください!(自分はまさにこの状況に引っかかりました)
//Mac OS Catalinnaより前を使用している場合
source ~/.bash_profile
//Mac OS Catalinna以降を使用している場合
source ~/.zshrc
コマンドを打ち込んでエンターキーを押して実行し、再びcommand -v nvmを実行した際に「nvm」と出てくれば、正式にインストール実行完了です!
nvmを使ってNode.jsをインストールする
では次にnvmを使ってNode.jsをインストールしてみます!
nvm install stable
上記コマンドを入力して実行すれば、安定板のNode.jsをインストールすることができます!
一番最初にインストールされたNode.jsのバージョンがデフォルトのバージョンとして設定されるようですが、一応コマンド操作でも安定したバージョンをデフフォルトとして設定することができます!
nvm alias default stable
他にもバージョンを指定してNode.jsをインストールしたり、LTS(Long Term Support。長期間安全なメンテナンスリリースのみが実施される)バージョンをインストールすることもできます!
//以下はそれぞれバージョン指定・LTSバージョンをダウンロードする場合
nvm install バージョン名
nvm install --lts
いずれかの方法でインストールすることができたら、Node.jsがきちんとインストールされているかどうかを検証しましょう!
node -v
npm -v
とコマンド入力して実行して、
v16.3.0
7.15.1
のようにバージョンが表示されていれば、Node.jsのインストール完了になります!
nvmを使ってNode.jsのバージョンを切り替えする
では実際にnvmを使ってNode.jsのバージョン切り替えを行なってみましょう!
先ほどの工程(nvm install stable)を行うと、この記事を書いた時点ではv16.3.0がインストールされるので、個別プロジェクトに対してv14.16.1をインストールできるようにしたいと思います!
まずは、nvmを使ってv14.16.1のNode.jsをインストールします!
nvm install v14.16.1
結構時間がかかりますが、v14.16.1のNode.jsをインストール完了することができます!
では次にデスクトップ上に適当なディレクトリを作成します!今回はDesktop上に作成したtestdirディレクトリでNode.jsのバージョンを切り替えるようにしてみます!
//現在ユーザーディレクトリにいるとします
cd desktop
mkdir testdir
cd testdir
nvmでバージョン切り替えを行うときは、.nvmrcファイルを使用します。
引き続き以下のコマンドを使って、testdir配下に.nvmrcファイルを作成し、使用するNode.jsのバージョンの数字を書き込んで見たいと思います!
echo "14.16.1" > .nvmrc
そして、使用するNode.jsのバージョンを切り替えるために、そのまま以下のコマンドを実行します!
nvm use
これで、Node.jsのバージョンを切り替えすることができました!
nvm useコマンドは、実行ディレクトリに.nvmrcファイルがあることが前提で実行可能なコマンドなので、.nvmrcファイルがない場合はエラーになるので注意が必要です!
ちなみに 、この状況でtestdirディレクトリを脱出した場合に自動的にNode.jsのバージョンが切り替わってv16.3.0に戻るというものではありません!
これを解消し、ディレクトリごとに自動的にNode.jsのバージョンを切り替えするためにはdirenvを使用すると良いので、次にdirenvのインストールや設定を記してみます!
direnvをインストール・設定してnvmの恩恵をさらに受ける
direnvをインストールして設定を反映させる
では、direnvをインストールしましょう!Homebrewがインストールされていることを前提として進めます!Homebrewのインストールなどについては別記事に後日まとめたいと思います!
以下コマンドを入力し、実行します!
brew install direnv
これで簡単にdirenvをインストールすることができます!
次に、Catalina以降であればvi ~/.zshrc、以前であればvi ~/.bashrcを実行して以下を追記します!
// zshであれば以下
export EDITOR=vi
eval "$(direnv hook zsh)"
// bashであれば以下
export EDITOR=vi
eval "$(direnv hook bash)"
追記をすることができたら、
// zshであれば以下
source ~/.zshrc
// bashであれば以下
source ~/.bashrc
上記を実行して追記した内容を読み込み・反映させます!
.nvmrcファイル・.envrcファイルの作成と設定
ここまできたらあと一息です!
node.jsを動かしたいプロジェクトごとに.nvmrcファイル・.envrcファイルを作成して、そのプロジェクトを開いたら自動的にしかるべきnode.jsのバージョンが動かせるように設定してみましょう!
まずは.nvmrcファイルから!nvmrcファイルには切り替えたいNode.jsのバージョンの数字を入力します。プロジェクトに移動したら、以下のコマンドを実行しましょう!
echo "12.16.3" > ~/.nvmrc
上記のコード例は、Node.js 12.16.03バージョンを使う上で必要な内容になります!要するに数字の部分に使用したいNode.jsのバージョンを入れればOKなわけですね!
次に.envrcファイルです!.envrcファイルにはプロジェクトフォルダに入った際に自動的にNode.jsのバージョンを切り替えるようにするためのスクリプトを入力します!
プロジェクトフォルダに移動していることを確認したらまずは以下を実行しましょう!
direnv edit .
envrcファイルを編集する状態になりますので、中身に以下を入力します!
source $NVM_DIR/nvm.sh
nvm use 12.16.3
保存したら、最後に以下を入力します!
direnv allow
これで必要な作業は完了です!
プロジェクトに移動するたびに勝手にNode.jsのバージョンが指定したものに変更されるようになっていればOKです!
ただし、指定したバージョンのNode.jsがインストールされていないと意味がないので、されていない場合は
nvm install 12.16.3
といった感じで、必要なバージョンのNode.jsをインストールしましょう!
まとめ
ということで、今回はMac OSにnvm/Node.jsをインストールし開発環境を構築する方法についてブログにしてみました!
以前はnodebrewで対応していましたが、個人的にはnvmの方が良いなぁという印象を持ちました。
とはいえ、1年経過したらまた色々変わるんですかね・・・今後もしっかりと情報をキャッチアップしていきたいと思います!