制作ブログ Web制作開発ツール制作効率化Node.js のバージョンをフォルダごとに変更する → nvm

Node.js のバージョンをフォルダごとに変更する → nvm

【この記事の動作環境 Mac M1 / macOS 15.2】

プロジェクトごとにフォルダ分けして管理してるのだが、フォルダごとに、異なるバージョンのNode.js が自動で適用されるようにしたい。そこで使用するのが、nvmだ。

事前準備として、サンプルでは下記のようにした。
・Node.js のバージョン v22.9.0 と v22.13.1 をインストールする
・デスクトップに2つのフォルダ「a」と「b」を用意する

Node.jsをnvmを使ってインストールする方法は、下記に記事書いてます。
https://simplesimples.com/web/tools/efficiency/nvm/

目的:フォルダ「a」に v22.9.0、フォルダ「b」にv22.13.1 のNode.js のバージョンが、自動で適用されること

それでは、ターミナルを起動して、設定していく。

フォルダ「a」に移動する。
ターミナルに「cd 」と入力して、半角スペースを空け、デスクトップに作成したフォルダ「a」をターミナルにドラック&ドロップすると入力の手間が省けて便利。

cd /Users/taketake/Desktop/a

フォルダ「a」内に「.nvmrc」ファイルを作成して、フォルダ「a」内では、nvmが v22.9.0 を使用するよにする 。

echo "22.9.0" > .nvmrc

.nvmrcに記述したバージョンを適用する。

nvm use

適用されたか確認する。

node -v

「v22.9.0」と表示されればOK。

続いて、フォルダ「b」も同様の手順。

cd /Users/taketake/Desktop/b
echo "22.13.1" > .nvmrc
nvm use
node -v

「v22.13.1」と表示されればOK。

本題

続いて、「nvm use」をフォルダ移動するたびに、入力しなくていいように修正していく。

ホームディレクトリ直下のファイル「.zshrc」に下記を追加して保存する。

# .nvmrc がある場合に自動でそのバージョンを使う
autoload -U add-zsh-hook
load-nvmrc() {
  if [[ -f .nvmrc ]]; then
    nvm use --silent
  fi
}

add-zsh-hook chpwd load-nvmrc
load-nvmrc

ターミナルを起動して、ファイル「.zshrc」を再読み込みする。

source ~/.zshrc

設定は以上。

これで「nvm use」することなく、Node.js のバージョンが切り替わるか確認する。

cd /Users/taketake/Desktop/a
node -v

「v22.9.0」と表示されればOK。

cd /Users/taketake/Desktop/b
node -v

「v22.13.1」と表示されればOK。

以上となります。