nvmを使ってWSL2のローカル環境のNode.jsバージョンを上げる方法

とある作業中にnpm create vite@latest . -- --template reactをしたら大量のWARNINGが出た。

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'create-vite@5.5.2',
npm WARN EBADENGINE   required: { node: '^18.0.0 || >=20.0.0' },
npm WARN EBADENGINE   current: { node: 'v19.5.0', npm: '9.3.1' }
npm WARN EBADENGINE }

これはviteが要求するNode.jsのバージョンが「v18.x系」または「v20.0.0以上」に対して、現在使用しているのはv19.5.0なので発生している警告。
なので今回はNode.jsのバージョンを上げてみた。

※自身の備忘録なので少し細かいかもしれません。必要な箇所だけ参考にしてください。
※間違いがありましたら指摘してもらえると嬉しいです！

追記: asdfとの競合

asdfが入っている場合には 競合してしまうようです。
今回はnvmの導入なのでasdfを消す方法をメモしておきます
関係のない方は読み飛ばしてください。

早速asdfを削除していきます。
既にasdfをインストール済みの場合には、bashrcやzshrcなどを見るとasdfの設定が見つかると思います。
私の場合には下記のような感じでした。

# asdf
. "$HOME/.asdf/asdf.sh"
# append completions to fpath
fpath=(${ASDF_DIR}/completions $fpath)
# initialise completions with ZSH's compinit
autoload -Uz compinit && compinit

この行は不要になるので削除してください。

次に、本体を削除します。
本体は$HOME以下にインストールされているとおもいます。

rm -rf ~/.asdf

のように不要なディレクトリごと削除します。
既にnvmをインストールしている場合には、再度インストールを行ってください。

nvmの利用

まず、バージョンを上げるにあたってGoogle先生に聞いてみたところ、nvmというのがあるらしい。
最初にNode.jsをローカルに入れたときの記憶は既になく(nだと思ったら違った・・・)、新たにnvmでやってみる。

nvmって何ぞ

nvm => Node Version Managerという事らしい。
多機能で便利な機能がそろっており、人気も高く、更には情報も豊富 との無敵感が満載で、迷うことなく導入を決意。
今までNode.jsを使う事が少なかったというのもあるが、 プロジェクトごとに切り替えれる というのはこれからきちんと使いこなしていきたいなという点ではあった。

nvmの導入

※私の場合、WSL2 ubuntu環境ですが、それぞれの環境に合わせてターミナルを開き作業をしてください。

まずは、次のコマンドを使ってnvmを使うためのスクリプトをダウンロードし、インストールします。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

無事に完了したら次にターミナルを再起動するか、source ~/.bashrcをしてあげる必要があります。
ほうほう・・・じゃあ！ということで何も気にせずsource ~/.bashrcをしてみると、謎のエラー多発！！！
何事じゃ！？と思って冷静に考えてみたら、bashじゃなくてzshを使っていた気がする・・・
ということで一応確認。

echo $SHELL

結果、zshとなっていたので、再度source ~/.zshrcを実行。
今度は問題なくできた！

※注意
何かしらの問題がおきて、bashrcやzshrcが存在しないとかがあった場合には、まずは該当ファイルを作成し、

echo 'export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion' >> ~/.zshrc

を実行してあげて該当ファイルに書き込んでください！(直接vimなどで書き込んでもOK、末尾の>>の後を自身の環境に合わせる)

各バージョンのインストール

無事nvmが入ったら次にインストールをする。
特に理由や問題がない場合には安定しているLTS版を使うのがおすすめです。
インストールできるバージョンを調べるには

nvm ls-remote

こちらで確認することができます。
LTS版を入れたい場合には

nvm install --lts

もしもバージョンを指定したい場合には

nvm install v20.16.0

のようにしてバージョン指定してください。

これだと、まだ落としただけなので次のようにしてバージョンを選択します。

nvm use --lts

これもinstallと同様に末尾にバージョンを指定してあげることができます。

最後に、きちんと設定されているか確認するために

node --version

を行いバージョンが表示されたら完了です！

その他のコマンド

バージョンを確認する

nvm ls

特定のバージョンをアンインストールする

nvm uninstall v20.16.0

追記：バージョンを切り替えてもnpm install -gしたものは移行されない

バージョンごとにnpm installしたものが分かれている為、useでバージョンを変えても引き継がれない。
そういう時にはnvm reinstall-package 引継ぎ元のバージョン番号で引き継ぐことができる

nvm reinstall-packages 20.16.0

npmではなく、nvm なので注意

追記:ディレクトリごと、プロジェクトごとでNodeのバージョンを切り替えたい

各プロジェクトでNodeのバージョンを管理したい時には.nvmrcを設置することで対応できます。
ファイルには使用したいバージョンを記載します。

# LTSを使用する場合
lts/*
# バージョンを指定する場合
v20.16.0

最後に..nvmrcがあるディレクトリで

nvm use

を実行する

終わりに

環境構築するときに昔やった事って忘れがちで、全く覚えていなかったのでこういった備忘録をしっかり残していこうと再確認できた。

メモ、大事。