nvm + Node.js (npm)導入

はじめに

React.js使ってWebアプリ開発するために、ちょっくらNode.jsの導入が必要になったので、メモメモ。
後述するように、Macのログインシェルの推奨がbash -> zshに変わり、
ちょっと細かい点の修正が必要となったので、自分でまとめてみました。

事前の注意

macOS Catalina(10.15)からデフォルトのShellが、bash -> zshに変わってる関係で、
コマンドのパス設定などのやり方が変わります。
ご自身でお使いのmacOSと、ログインシェルとして何を使ってるか確認してから構築お願いします。

環境

• macOS Catalina(10.15.3)

nvmインストール

まずは、事前準備
インストール時に、自動的にnvmのコマンドパスが設定されるように.zshrcを作成

ターミナル

~ % touch ~/.zshrc

ここで、macOS Mojave以前をお使いの方に注意！！！
デフォルトログインシェルが、bashになるので、ここで作成するファイルは、
.bash_brofileor.bashrcとなります。

公式サイトGithub：nvm-sh/nvmからインストールコマンドをコピー
使うのは、curlの方
ターミナルを起動して、コピーしたコマンドをペーストして実行！

ターミナル

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

GithubからCloneされる形でインストールが実行される。
色々な処理経過が表示されて、done.の表示が続く。
終わったら、以下のようなメッセージが表示される。

=> 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のコマンドパスを通すためにターミナルを再起動
ターミナル再起動後に以下のコマンドを実行して、バージョンが表示されれば完了

ターミナル

~ % nvm -v
Node Version Manager (v0.35.3)
Note: <version> refers to any version-like string nvm understands. This includes:
 - full or partial version numbers, starting with an optional “v” (0.10, v0.1.2, v1)
 - default (built-in) aliases: node, stable, unstable, iojs, system
 - custom aliases you define with `nvm alias foo`

（以下略）

node.js(+npm) インストール

※ npmはNode.jsをインストールすると一緒にインストールされます。

開発に使用するNode.jsのバージョン指定してインストール
-> 使用するフレームワークとかで指定があるので、必要なバージョンをコマンドで指定

ターミナル

~ % nvm install [version]

---
v.8.14.0をインストールする場合は。。。
~ % nvm install v8.14.0

以下となれば成功

Computing checksum with shasum -a 256
Checksums matched!
Now using node v8.14.0 (npm v6.4.1)

開発で使用するバージョンを設定
-> 複数バージョンをインストールする場合は、この操作でバージョンの選択が必要

ターミナル

~ % nvm use [version]

---
v.8.14.0を利用する場合は。。。
~ % nvm use v8.14.0

以下となれば完了

Now using node v8.14.0 (npm v6.4.1)

デフォルトで使用するバージョンを設定
もし複数のバージョンをインストールして、デフォルトを指定したい場合に実行

ターミナル

~ % nvm alias default v8.14.0
default -> v8.14.0

Node.js設定の確認
以下のコマンドを実行

ターミナル

~ % nvm ls

利用中のバージョンには先頭に、->が表示される

     v8.10.0
->   v8.14.0

デフォルトに設定されたバージョンは以下の表示

default -> v8.10.0

ついでにnodeコマンドで、本当に上記の設定が反映しているか確認

ターミナル

~ % node -v
v8.14.0

って、設定したバージョンが表示されれば全て完了

小技

nvmで取得可能なバージョン一覧や、ltsのバージョンなどを確認するコマンド

ターミナル

nvm ls-remote

小言

nvmのインストールでうまくいかなかった話

最初、特に気にせず先人の記事、自分のMojave時代の構築方法として、
.zshrc作らず、インストールして、パス設定を後からやったけど、パス通らなかった。。。
ちなみに、.zshrcとか作らずインストールすると、以下のメッセージが出てる。

=> Compressing and cleaning up git repository
=> Profile not found. Tried ~/.bashrc, ~/.bash_profile, ~/.zshrc, and ~/.profile.
=> Create one of them and run this script again
  OR
=> Append the following lines to the correct file yourself:
export NVM_DIR=“$HOME/.nvm”
[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh” # This loads nvm
=> 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

とりあえず、事前に.zshrc作っておくことで問題なかったので、深く原因究明してないです。。。
おすすめは、作っておいてねですね。

参考記事

以下の記事を参考にさせていただきました。ありがとうございました。
nvm + Node.js + npmのインストール @sansaisoba
nvmの導入と使い方 @tanishi