コーダー（Webサイト制作）のNode.js環境困りごとをNVMで解決する

Webサイトを制作するにあたっては、直接Node.jsで何かするという事はないのですが無くてはならないものになりました。苦手意識を持つ方も多いのではないでしょうか。

先輩の環境では問題ないので、私の環境ではエラーで全然動かない、、、
別のメンバーが作ったサイトの作業環境がエラーで全然動かない、、、

なんていう話もよく聞きます。

Node.jsのバージョンの差がそういった問題を起こす事も少ないありませんので、ここではNVMというツールを使って解決してみたいと思います。

NVM って 何？

NVMはNode Version Managerの略称です。
日本語に訳すまでも無いと思いますが、Node.jsのバージョンを管理するツールです。
つまりはNode.jsのバージョンを上げたり下げたり、条件に合わせて柔軟に切り替えられるようになります。

詳しくはGithubでDeepLなど翻訳しながら読んでみてください。
難しいツールではないので取り組みやすいと思います。
https://github.com/nvm-sh/nvm

NVMでWebサイトごとにNode.jsのバージョンを指定する

サイト制作で使用したNode.jsのバージョンは制作者でも後から見返した時にわからなくなってしまうものです。
PCのNode.jsをバージョンアップしてしまって過去のWebサイトの制作環境がエラーで動かない…　Node.jsを古いバージョンに入れ直してひたすら手探りで頑張る…　なんて状況になると最悪です。

NVMを使って解決してみます。

Webサイトの制作フォルダに.nvmrcファイルを一つ追加します。
ドットで始まるファイル名なので、ちょっと目を背けたくなるかもしれないですが、安心してくださいただのテキストファイルです。
その中ファイルに使用するNode.jsのバージョンを記入します。
例えばバージョン18.0のNode.jsを使っている場合はこのように書きます。

18.0

これで準備は完了です。テキストファイルを一つ用意するだけですね。

.nvmrcに書き残したバージョンのNode.jsを使う

この.nvmrcが置いてあるフォルダで下のコマンドを実行すると、必要なバージョンのNode.jsがインストールされて、そのバージョンのNode.jsに切り替わります。
他のメンバーと一緒に作業する時や過去の制作物を編集する時に便利です。

nvm install

いったんインストールできれば、次回からは下のコマンドを実行する事で必要なNode.jsに切り替える事ができます、

nvm use

これだけでNode.jsの環境を整えられるのでとても便利ですね。

NVMをインストールする

MACでNVMをインストール

黒い画面が苦手な方はちょっと我慢が必要です…でも簡単なので頑張ってください！
まずターミナルアプリを開いてください。
そして下記をコピぺでいいのでターミナルへ貼り付けて、Enterキーを押して実行します。

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

一通り処理が終わりましたら、一旦ターミナルアプリは終了させてください。これで完了です。

インストールできたか確認しますのでもう一度ターミナルアプリを開きます。下記をコピペでいいのでいいのでターミナルへ貼り付けて、Enterキーを押して実行します。

nvm --version

下のような感じで数字が出て来ればインストール成功です。

0.39.3

WindowsでNVMをインストール

NVM for Windowsという別プロジェクトがありますので、そちらからインストールします。
https://github.com/coreybutler/nvm-windows

WindowでのNVMのインストールはとても簡単です。
インストーラーをダウンロードでして実行するだけです。

とても簡単な操作で便利なNVMが使えるようになります。
Webサイト制作でNode.js環境の課題でお困りでしたら
ぜひ試してみてください。