Macにnvm/Node.jsをインストールしdirenvでバージョン自動切替する便利な開発環境を構築する方法を紹介

Mac OSにnvm/Node.jsをインストールし開発環境を構築する方法
最近、M1 Mac Miniを入手しました。この記事を書いた時点では6月のAppleのイベントでハイエンドのMac Miniの発表があると...

先日公開した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年経過したらまた色々変わるんですかね・・・今後もしっかりと情報をキャッチアップしていきたいと思います!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする