ロゴテキスト ロゴ

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

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

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


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

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



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

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


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

    package.json
    "volta": {
      "node": "20.11.1",
      "npm": "8.19.4"
    }



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

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


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



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

    検証した環境

    1 volta 1.1.1
    2 nodenv 1.4.1

    先に結論

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

    1.volta導入

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

    2. パスの確認

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



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

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

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

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

    (理由は後述)

    ~/.zshrc
    # 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のバージョン管理をしている前提として

    .node-version
    16.20.0
    $ node -v
    v16.20.0

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

    package.json
    "volta": {
      "node": "18.19.1"
    }
    $ node -v
    v18.19.1

    お手軽です!


    voltaの場合、まだインストールしたことがないnodeを自動的にFetchしてくれます!👏




    他の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

    brewでのインストールの場合注意点があり、環境変数に自動的に追記してくれません。

    そのため「パス通すのは自動でやってほしい」という人は公式のshを実行するのが楽そうです


    ちなみに公式のコマンドを実行すると ~/.zshrc に以下の記述が追記されてました

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


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



    2024/02/26 時点で

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

    GitHubでの最新バージョンはv1.1.1
    Volta: JS Toolchains as Code. ⚡
    9.9k
    212
    Rust


    homebrew上の最新バージョンも 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が以下のように設定されているプロジェクトがあったとして

    .node-version
    16.20.0
    $ node -v
    v16.20.0


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

    package.json
    "volta": {
      "node": "18.19.1"
    }
    $ node -v
    v18.19.1

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


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




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

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

    nodenv・voltaを共存させる

    問題点

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

    ~/.zshrc
    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のバージョンが使用されない

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

    特に後者は致命的・・😨


    以下の記事がまさにの内容で大変参考になりましたmm

    nodenv と volta は共存できるのか - terfnoのScrapbox

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

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

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


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

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

    ~/.zshrc
    # 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にお願いしたところ

    ChatGPTに作成してもらった画像1

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



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

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

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

    この記事のアイキャッチ画像

    かわいい✨

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

    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。