nodeバージョン管理の新鋭！voltaをnodenvと共存させながら使う

nodenvを使ってnodeのバージョン管理しているプロジェクトを多く見てきました。

npm・yarn・pnpmなどパッケージマネージャーも選択肢が広がったなぁと思っていた矢先、

nodeのバージョン管理にも volta という新しい選択肢 が出てきたことを知りました。

voltaは特徴として3点挙げられています

• Rustで構築されてて速い
• プロジェクト全員が手軽に同じバージョンを利用出来るようにする
• クロスプラットフォーム（主要OSをサポート）

また個人的にはpackage.jsonにバージョンを記載するのが特徴的だなぁと感じました

"volta": {
  "node": "20.11.1",
  "npm": "8.19.4"
}

voltaがたとえどれだけ素晴らしかったとしても、いきなり「全てのプロジェクトで導入しよう！！」

とはならず、プロジェクトによってはnodenvなど他ライブラリも使い続けるはず。

そのためこの記事ではvoltaを使えるようにしつつ、nodenvも使えるようにしていこうと思います。

ちなみにやってみた感想はパスの通し方に注意が必要なので、nodenvと共存させる場合は少し注意が必要です

先に結論

結論先知りたい方向けでザッと記載すると3ステップでvoltaの導入は完了します！

1.volta導入

# voltaを使えるようにするためのコマンドを実行
$ curl https://get.volta.sh | bash
 
# voltaが使えること確認
$ volta -v
1.1.1

2. パスの確認

パスの通し方が重要になります

voltaをインストール時に使用したスクリプトを実行後、

zshrcやbashrcのような設定ファイルにvolta関連の記述があります

export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"

この設定の後にnodenvのパスを通す設定を記述します

（理由は後述）

# volta
export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"
 
# nodenv
if [ -s ${HOME}/.nodenv ]; then
  export PATH="$HOME/.nodenv/bin:$PATH"
  eval "$(nodenv init -)"
fi

3. voltaに移行

既存プロジェクトでは.node-versionでnodeのバージョン管理をしている前提として

16.20.0

$ node -v
v16.20.0

.node-versionを削除し、package.jsonにvoltaの設定を記述

"volta": {
  "node": "18.19.1"
}

$ node -v
v18.19.1

お手軽です！

他のnodenvでバージョン管理しているプロジェクトを見てみます

$ cd ../nodenv-sample
 
$ cat .node-version
14.21.3
 
$ node -v
v14.21.3

無事nodenvも使えてますね！

前提

利用しているnode

私は普段使いのnodeはnodenvのものを利用してます

$ which node
/Users/yuu/.nodenv/shims/node
 
$ node -v
v20.11.1

そうなっている理由はパスで最初に読むこむnodeがnodenvになっているため

# nodenvが先に読み込まれ、homebrewが後に読み込まれている
$ echo $PATH
/Users/yuu/.nodenv/shims:/opt/homebrew/bin:

今回voltaに完全移行するわけではないので

• 基本的に今までと体制は変えない
  • nodenvのnodeを引き続き利用
  • nodenvで管理しているプロジェクトではnodenvでバージョン管理が出来る
• 必要なプロジェクトでvoltaでもバージョン管理が出来る

としていきます。

voltaのインストール

nodenvは今までも使っていてインストールが出来ていたため、

voltaのみインストールします

公式を参考にするのであれば以下のコマンド（おすすめ）

curl https://get.volta.sh | bash

Macユーザーの中で広く使われるHomebrewでも公開されてます

https://formulae.brew.sh/formula/volta

brew install volta

 export VOLTA_HOME="$HOME/.volta"
 export PATH="$VOLTA_HOME/bin:$PATH"

公式ページにHomebrew版の記載がなかったので少し調べてみました。

2024/02/26 時点で

GitHub上の最新バージョンは v1.1.1

homebrew上の最新バージョンも v1.1.1

多分問題なく追従されていそう。

私はHomebrewで最初やろうとしたものの、パスを通す件がありそれ以外にも手順があると手間だなと思い公式コマンドでインストールしました！

$ curl https://get.volta.sh | bash
 
$ volta -v
Updating your Volta directory. This may take a few moments...
1.1.1

nodenv → volta への移行

.node-versionが以下のように設定されているプロジェクトがあったとして

16.20.0

$ node -v
v16.20.0

.node-version を削除し、package.jsonにvoltaの設定を追記

"volta": {
  "node": "18.19.1"
}

$ node -v
v18.19.1

voltaのバージョンに切り替わりました！

ちなみにここで先ほどの .node-versionを再作成すると v16.20.0 が出力されます。

基本これだけ。のように見えるのですが

実はnodenv・voltaを共存させるためにはパスの通し方に一工夫必要でした。

nodenv・voltaを共存させる

問題点

voltaのインストール用スクリプトを実行すると、設定ファイルの最後に↓が追加されるので

export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"

大体の人がパスの最初にvoltaの設定がくるはず

$ echo $PATH
Users/yuu/.volta/bin:/Users/yuu/.nodenv/shims:/Users/yuu/.nodenv/bin:・・・

この状態だと

• デフォルトのnodeがvoltaに
• .node-versionがあってもvoltaのnodeが使われ.node-versionに記載のnodeのバージョンが使用されない

という問題が起きました。

特に後者は致命的・・😨

共存させるためのパス設定

結論としてはnodenv関連のパスを先に読み込ませるようにします

$ echo $PATH
/Users/yuu/.nodenv/shims:/Users/yuu/.nodenv/bin:/Users/yuu/.volta/bin:
# 必要なものだけ記載してます

私は以下のように.zshrcを変更し、

voltaよりもnodenvのパス設定が先に記述されるようにしました！

# volta
export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"
 
# nodenv
if [ -s ${HOME}/.nodenv ]; then
  export PATH="$HOME/.nodenv/bin:$PATH"
  eval "$(nodenv init -)"
fi

最後に検証してみます

# nodenv・volta どちらも有効でないフォルダ
$ which node
/Users/yuu/.nodenv/shims/node
 
$ node -v
v20.11.1

# voltaが有効なプロジェクトに移動
$ cd ../volta-sample
 
$ cat package.json
{
  "name": "volta-sample",
  ・・・
  "volta": {
    "node": "18.19.1"
  }
}
 
$ node -v
v19.19.1

# nodenvが有効なプロジェクトに移動
$ cd ../nodenv-sample
 
$ cat .node-version
14.21.3
 
$ node -v
v14.21.3

良さそうです！🎉

余談（アイキャッチ）

しばらく前にChatGPTが画像生成にも対応していたのでせっかくなので試してみました。

「voltaというnodeのバージョンを管理するライブラリをイメージした画像を作成して」

とChatGPTにお願いしたところ

メカメカしくてかっこいい！！

けど、他のアイキャッチと整合性取れないなぁと感じたため

• 背景色を黄色系
• 電気が流れているようなイメージ
• volta という文字を入れる

で出来た画像が今回のアイキャッチです！

かわいい✨

しかしこれをAIが作れるってすごい世の中…