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`との競合
:::note warn
**`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
```
:::note warn
`npm`ではなく、**`nvm`** なので注意
:::


# 追記:ディレクトリごと、プロジェクトごとでNodeのバージョンを切り替えたい
各プロジェクトでNodeのバージョンを管理したい時には`.nvmrc`を設置することで対応できます。
ファイルには使用したいバージョンを記載します。
```
# LTSを使用する場合
lts/*
# バージョンを指定する場合
v20.16.0
```
最後に.`.nvmrc`があるディレクトリで
```
nvm use
```
を実行する

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

**メモ、大事。**