SCRAWLED TECH BLOG

当サイトは、アフィリエイト広告を利用しています

nvmをWindowsでinstallして使う方法

作成日：2022月07月30日
更新日：2024年08月03日

Windowsでnvmを使う

今までnode.jsをインストールして使っていたが、Next.jsを始めようとしたときに
nodeのversion違いでうまくcreate-next-appできない問題に遭遇し、
これを機にnvmでnodeのversionを管理することにしたので、導入方法をまとめる。
今回はnvm for Windowsではなくnvmを入れる。
※nvm for Windowsを入れようとしたがうまくいかなかったので...

nvmのインストール

curlコマンドを使ってnvmをインストールする。
curlはコマンドラインからhttp/httpsアクセスするためのツール。

curlのインストール確認

curlのインストール確認をする。

curlのインストール確認
curl --version

ない場合は入れる。
インストールはcurlからできる

curlでnvmをインストールする

理由は後述するがもしホームディレクトリ配下に.bashrcがない場合は先に作成しておく
※中身は空でok

nvmインストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 14926  100 14926    0     0  64614      0 --:--:-- --:--:-- --:--:-- 64614
=> nvm is already installed in /c/Users/lunaj/.nvm, trying to update using git
=> => Compressing and cleaning up git repository


=> nvm source string already in /c/Users/lunaj/.bashrc
=> bash_completion source string already in /c/Users/lunaj/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:


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
  • nvm自体をアップデートする場合も同じやり方でできる。
    ※versionは最新版を下記で確認して書き換える。
  • nvm-sh/nvm
    最新版にしたあとはターミナル切り替えるか再起動すればターミナルに反映される

実行後にホームディレクトリの.bashrcを確認すると下記が追記されていることを確認

.bashrc
# .bashrc
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

nvmのインストール確認

インストールできたかを下記で確認する。

nvmインストール確認
$ nvm -v

おそらくnvm command not foundと出てくる。
原因としては、nvm.shはホームディレクトリ（~/配下）にインストールされているが
そこを参照できてないためだと思われる。
そのため下記のコマンドを実行すると使えるようになる

sourceコマンド
source ~/.nvm/nvm.sh

だだこれだと起動時に毎回実行する必要があるので

  • .bash_profile
  • .bashrc
    を編集してログインしたときに自動で実行される設定をしておく。

source ~/.nvm/nvm.shの自動実行設定

上記で書いた通り、毎回vscodeやterminalを立ち上げた時に
手動で実行するのは面倒なので、自動で実行されるように設定しておく。

.bash_profile

.bash_profileはログイン時に1回だけ実行されるコマンドを設定することができる。

.bash_profileの作成

ホームディレクトリ(~/)配下に.bash_profileを作成する。
※既にある場合は不要。

.bash_profileを編集する。

.bashrcを読み込むコマンドを書く。

.bash_profile
# read .bashrc
test -r ~/.bashrc && . ~/.bashrc

これでログイン時に.bashrcを読むようになる。

.bashrc

.bashrcはシェル起動するたびに実行されるコマンドを設定することができる。

.bashrcを編集する。

nvmのインストール前に作成した.bashrcを編集する。
source ~/.nvm/nvm.shコマンドを書く。

.bashrc
# .bashrc
echo nvm setting
source ~/.nvm/nvm.sh
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

これでログイン時とshell起動時に「source ~/.nvm/nvm.sh」が実行されるようになる。
※.bashrcだけ設定してもいけそうな気がする。

再度、nvmのインストール確認

vscodeを立ち上げれば、ターミナルに「nvm　setting」と表示されれば
コマンド実行はできているのでnvm -vコマンドを実行するとnvmのversonが表示される。

nvmのversion確認
$ nvm -v
0.38.0

ここまででnvmのインストールと初期設定は完了！！

参考

下記を参考にさせて頂きました。

nvmを使ってみる

実際にnvmを使ってnode.jsを切り替えてみる。

nvmが現在、アクティブにしてるnodeのversionを調べる

nvm currentで調べることができる。

current
$ nvm current
v16.16.0

systemと表示された場合はnvmを使わずにインストールしたNode.jsがアクティブになっている。

インストール済みのnodeのバージョンを一覧表示する。

既にインストール済であるnodeを一覧表示する

一覧表示
nvm ls
->     v16.16.0　
default -> lts/* (-> v16.16.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v16.16.0) (default)
stable -> 16.16 (-> v16.16.0) (default)
lts/* -> lts/gallium (-> v16.16.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.20.0 (-> N/A)
lts/gallium -> v16.16.0

見方を少し説明すると 

①　->     v16.16.0　
②　default -> lts/* (-> v16.16.0)

①はアクティブなnodeのverson
②はdefaultはエイリアスのため「nvm use default」を実行するとv16.16.0に切り替わる

インストール可能なバージョン一覧の表示

インストール可能一覧表示
$ nvm ls-remote
        v0.1.14
        v0.1.15
        v0.1.16
        v0.1.17
        v0.1.18
        ~省略

node.jsをインストールする

nvmでversionを切り替えたい場合、対象versionのnodeをインストールする必要がある
インストール方法には下記の3パターンがある
またインストールした場合、デフォルトでインストールしたversoinに切り替わる

node.js最新版のインストール

最新
nvm install node

node.js最新の安定版をインストール

最新（安定版）
nvm install --lts

node.jsのversionを指定してインストール

指定
nvm install 6.14.4

特に指定がなけば最新の安定版を入れておけば問題ないと思う。
nodeのインストールが失敗する場合は
nvm自体のバージョンをアップデートする。

指定したnodeのバージョンを使う

インストールしたversionに切り替える

use
$ nvm use v16.16.0
Now using node v16.16.0 (npm v8.11.0)

切り替わっていることを確認

確認
$ nvm current
v16.16.0


$ node -v
v16.16.0

ただこのままだと、一時的に切り替わっただけであり、
再度、ログインすると切り替える前に戻ってしまう

version変更を維持したい場合はdefaultのエイリアスをつける。

エイリアス付与
$ nvm alias default 16.16.0

これでログインしなおしてもversionが維持される。

インストールしたnode.jsをアンインストールする

不要になったversionはアンインストールできる。
実行環境はたまっていくので不要になった場合はアンインストールした方がいい。

uninstall
$ nvm uninstall node
Uninstalled node v18.7.0

-　nodeはv18.7.0のエイリアス

まとめ

nvmの存在自体は知っていたが、今まで特にnodeのversionで問題が出たことがなかったので
使うこともなかったが,今回インストールしたnodeのversionとは違うversionのプロジェクトを作成する
必要があり調べてみた。
ただインストールしただけでは動かなかったので少しはまってしまったが
おかげで.bash_profileや.bashrcの知識も増えたので結果的にはよかったと思う

参考

下記を参考にさせて頂きました。

参考書籍

Gatsby製の当ブログ開発時は下記の書籍の 特典のセットアップPDFにnvmの設定方法を参考にしました
もしGatsbyで開発をするならお勧めです！

Webサイト高速化のための静的サイトジェネレーター活用入門 (CompassBooksシリーズ)

新着記事

目次
タグ別一覧
top