Node.jsのバージョン管理で苦労したお話…

バージョンが上がった！さぁ更新しよう！

私maresukeはwebフロントが好きなのでよくJavaScript（React）を使った開発をするんですが、まぁパッケージ管理はnode.jsさんにお任せ！っていう感じなんですね〜
しかしあるときからやたらGitHubさんから警告がくるんですよね…！
もしかして垢BAN！かと思ったら、nodeのバージョンがあまりよろしくないものを使っているだけでした…！
nodeのバージョンって新しくなったり、安定版が変更されていたりしますが、僕いい子ちゃんじゃないからいつも更新を後回しにしちゃって〜気付いたら僕が使ってるバージョンは遥か昔江戸時代ぐらいのものになっているんです…
こら〜そこのあなた〜「このアンポンタンの頭はチンパンジーか」とか思っちゃダメですよ〜
しかし、このバージョン管理は非常に大事です！サービスの脆弱性につながってしまうので、nodeのバージョンはこまめにチェックしましょう！

と前置きはこのくらいにして、早速に本題に入らなくては！

実際にバージョンアップしてみよう！

実際に僕が当時直面した時の手順でやっていきます。
今回は私がmacOSユーザーなので基本はmacOSベースに進めていきますが、Windowsも対応していきます。ただしWindowsはUbuntu上での環境構築を想定しています。もしこの記事のやり方でやろうと思われている方がいましたらUbuntuのインストールから行ってください。
Ubuntu公式にUbuntuのセットアップ手順など全て記載してあるので参照しみてください。

今現在の状態を確認してみよう

そんなこんなで怒られるのは嫌だし、サービスが大変なことになるのも嫌なのでnodeのバージョンを変更することにしました。ちなみに今まで使っていたものはv12.12.0でした。もし僕と同じでnodeのバージョンで困っている方も確認してみてください。確認方法は…

$ node -v
# もしくは
$ node --version

こちらのどちらかのコマンドを実行して貰えば今現在自分のローカル環境のnodeのバージョンが表示されます。
ちなみにnodeがインストールされていなければエラーが出てきます。

では安定版をインストールします

今回はanyenvとnodenvを用いてやっていきます。

まだanyenv,nodenvが入っていなかった場合

まずはanyenvをインストールします。このanyenvはいろんな言語の開発環境をコマンドを二つ三つぐらい実行するだけでできてしまうという超便利なセットアップツールなんです。ぜひ入れましょう！
そしてanyenvを用いてnodenvというnode.jsのバージョンを管理できるツールをインストールし、nodenvでバージョンを上げたり下げたりします。
ちなみに今回はすでにNode.jsが入っているという設定ですが、ここから読めばNode.jsが入っていない人もNoe.jsの環境構築を楽々できちゃいます。

• anyenvの設定

// macOS
$ brew install anyenv

// Windows
$ git clone https://github.com/anyenv/anyenv ~/.anyenv
$ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bashrc
$~/.anyenv/bin/anyenv init

以上のコマンド実行すると以下のようなコメントが出てきます

// macOS
# Load anyenv automatically by adding
# the following to ~/.zshrc:

eval "$(anyenv init -)"

// Windows
# Load anyenv automatically by adding
# the following to ~/.bash_profile:

eval "$(anyenv init -)"

どうやらeval "$(anyenv init -)"の一文を.zshrcに記述してくださいとのことですので記述します。
以下要注意事項
ちなみに2行目の最後の辺の~/.~rcの部分はお使いのshellによって異なります。zshならzsh、bashならbash、fishは確認ができてませんがおそらくfishと出ているでしょう…
以降~rcや~_profileのような表記があればその都度自身の使用しているshellに変更してお考えください！

では記述して行きます！

// macOS
vi ~/.zshrc

// Windows
vi ~/.bash_profile

さっきの一文(eval "$(anyenv init -)")を記述して:wqで保存しましょう。
できましたら一度Shellを再起動して次に以下のコマンドを実行します。
おそらくsource .zshrcでもいけるんじゃないかな〜とおもいます。

// macOS
echo 'eval "$(anyenv init -)"' >> ~/.zshrc
exec $SHELL -l

// Windows
echo 'eval "$(anyenv init -)"' >> ~/.bashrc
exec $SHELL -l

これでanyenvのインストールは完了です！
試しに

$ anyenv -v
// もしくは
$ anyenv --version

を実行してください。きちんとインストールできていればインストールされたバージョンが表示されます。
さぁ〜ここまでやってきましたがやっと本番です！
Node.jsをいじりますよ〜
まずはNode.jsをインストール、アップデート、ダウングレードするためのnodenvをインストールしましょう！

• nodenvの設定

先ほどインストールしたanyenvでnodenvをインストールします。

$ anyenv install nodenv

実行がうまくいくとこうなります

// これより上は長ったらしい文章が出てきやがるので省略
Install nodenv succeeded!
Please reload your profile (exec $SHELL -l) or open a new session.

とまぁ再起動しいやと言われるので素直に従いましょう。
そしてお次は

$ $ exec $SHELL -l

を実行してみましょう！
特にエラーが出なかったらきちんとnodenvがインストールされているはずです…
不安なので確認します

$ nodenv -v
// もしくは
$ nodenv --versions

を実行します…

nodenv 1.4.0+3.631d0b6

よかった〜ちゃんと入ってました〜

• Node.jsのインストール
  さて、ここまでちょっと時間がかかってしまいましたが最終段階だ〜 node.jsのインストール及びアップグレード、ダウングレードは以降nodenvを用いてぽちぽちするだけで終わります。やった〜これで今後楽にバージョン管理ができるぞ〜やっフォ〜い
  え〜ごほん！お見苦しいところをお見せしました。 ではまずはNode.jsをインストールします。が、その前に今現在インストール可能なバージョンがなんなのかを確認しましょう。

$ nodenv install list

すると今現在インストール可能なnode.jsのバージョンが全て表示されます。
今回も実行結果を載せたいのですが実行結果が多すぎて載せると記事がとんでもないことになりそうなので割愛します。

• さぁてnode.jsの安定版をインストールしていきましょう！
  今現在インストール可能で最新のnode.jsはv15.2.1になります。しかしこれは未だ動作の安定が未確認もしくは改良途中、対応中のためお勧めはしません。動作安定版として一番お勧めされるのはv14.15.1になります。 てなわけで今回（この記事の執筆時2020/11/22）は安定版のv14.15.1をインストールしていきます。

$ nodenv install 14.15.1

これでインストールは完了！
あとはローカルに反映させれば終わりです！

$ nodenv global 14.15.1

よし！
ここまで全てが順調に終わってる！
俺って天才なのでは！
JS完全に理解した！
確認確認！

$ node -v
v12.12.0

…
誰だ！貴様！
ふぇ〜
なんじゃこれ〜どないなことになってんねん！
僕なんも悪いことしてないんだぞ！
よくわからなかったけど調べていくうちにバージョンの更新がうまくいかない時によくある問題としてnodeのpathが悪さをしてる場合があるらしいのでnodeのpathがnodenvとつながっているかを確認しましょう。

$ which node

で調べれるらしい。whichコマンドはpathを調べるコマンドなので今後何かしらpathを調べることがよくあると思うので覚えときましょう。
ほとんどの場合はつながっておらずuser/local/bin/nodeになってることが多いそうです。調べてる間僕と同じこのようなpathになっている人がほとんどでした。
ということなのでこのpathを殲滅します！
くらえ！

$ sudo rm -rf user/local/bin/node
// 注意　rm -rf の利用は気をつけましょう問答無用で全てを消し去ります。取り返しがつかなくなる！危険！

これで邪魔者はいなくなった！

$ node -v
14.15.1

やった〜！
みたかv12.12.0！
いや、失礼ですねちゃんとお礼を言わなくては！
今までありがとう12.12.0！

以上！これにて更新終了

すでにnodenvがある方

こちらの方は凄〜〜〜〜く簡単です！
なぜならこうです。

$ nodenv install 14.15.1
$ nodenv global 14.15.1

終わり…
つまり、更新したいバージョンをインストールし、それを反映させるだけなのでコマンドとしては二つで終わりでダス。
もし問題があった場合はやはりpathの問題が多いみたいです。
なので焦らず急がずpathを治してあげて終了です。

そういえば…

なんで今回はnodenvを使ったの？
調べるとnodebrewってのもあるよね？
こんな質問が飛んできそうですね〜
実は僕も詳しくはよくわかっていはいないんですが、はっきりと言えるのはNode.jsのバージョン管理が一番楽！ということです。
本来Node.jsのバージョン管理はディレクトリ（サービス）ごとというのが暗黙の了解というか、当たり前なのです。したがってhogeというディレクトリではv１を使ってるがfugaというディレクトリではv2を使う、このようなことが頻繁に起きます。その場合nodebrewではいちいちコマンドを実行してnodeのバージョンを切り替えなくてはなりません。しかしnodenvさんはすごくてですね〜ディレクトリを移動しただけで自動的にバージョンを変更してくれるんですよ〜すごくないですか⁉︎多分調べればもっと出てくるんでしょうが、僕はこの程度のことしか知らないので許してください。

どうでした？

web大好きマンならこのくらい当たり前かもしれませんが、意外とバージョン管理でてこずる人って多いと思うんですよ〜
なので今回の僕の経験が誰かの役に立ってくれればと…