Updated on 10月 8, 2021

node.js インストール for macOS Big Sur(11.6)

React学習のための開発環境構築

ここではReact学習のための開発環境を構築します。

JavaScript実行環境のnode.jsのインストールから始めますが、最新のnode.jsをインストールすることも可能ですが、nvmを用いてnode.jsをインストールします。

nvmとは？

nvmは、node.jsの複数の異なるバージョンをインストールしたり、使用するバージョンを切り替えたりできるツールです。プログラミング本などで学習する場合によくあることでずが、本が出版された時期により実行環境のバージョンが異なるため、動作しないサンプルプログラムをよく見かけます。こういった悩みを解決するためにも、使用されているnode.jsのバージョンを合わせることで不要なエラーを防ぐことができます。

2021年10月8日現在ですが、最新のバージョンではなく、node.js推奨のサポート期間が長いLTS（(Long Term Support）バージョンをインストールしています。LTSもコマンドを実行する時期によっては、バージョンが異なるためこの記事と合わせたい場合は、バージョンを指定してインストールするコマンドを実行してください。

コマンドの実行にはmacOS標準のターミナルを使用します。

macOS ターミナル

次のコマンドで実行する内容

nvmインストール
環境変数設定
node.jsインストール
yarnインストール

# nvmインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 環境変数設定
echo 'export NVM_DIR="$HOME/.nvm"\n[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.zshrc

# 環境変数読み込み
source ~/.zshrc

# nvmバージョン確認
nvm -v

# node.jsをインストール（LTS最新バージョン）
nvm install --lts

# バージョンを指定してインストールする場合はこちらを実行してください。
nvm install v14.18.0

# node.jsバージョン確認
node -v

# yarnコマンドインストール
npm install -g yarn

# ---------------------------
# 以下のコマンドは実行不要です。
# ---------------------------
# 使用するバージョンの切り替え（LTSを使用する）
nvm use --lts

# 指定したバージョンをアンインストール
nvm uninstall v14.18.0

コマンド実行結果

nvmインストール

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 14984  100 14984    0     0  48180      0 --:--:-- --:--:-- --:--:-- 48180
=> Downloading nvm from git to '/Users/ユーザー/.nvm'
=> Cloning into '/Users/ユーザー/.nvm'...
remote: Enumerating objects: 349, done.
remote: Counting objects: 100% (349/349), done.
remote: Compressing objects: 100% (298/298), done.
remote: Total 349 (delta 39), reused 156 (delta 26), pack-reused 0
Receiving objects: 100% (349/349), 203.27 KiB | 1.21 MiB/s, done.
Resolving deltas: 100% (39/39), done.
* (HEAD detached at FETCH_HEAD)
  master
=> 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

nvmバージョン確認

source ~/.zshrc
nvm -v
0.39.0

node.js v14.18.0インストール

nvm install --lts
Installing latest LTS version.
Downloading and installing node v14.18.0...
Downloading https://nodejs.org/dist/v14.18.0/node-v14.18.0-darwin-x64.tar.xz...
######################################################################### 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v14.18.0 (npm v6.14.15)
Creating default alias: default -> lts/* (-> v14.18.0)

node.jsバージョン確認

node -v
v14.18.0

yarnコマンドインストール

npm install -g yarn

> yarn@1.22.15 preinstall /Users/ユーザー/.nvm/versions/node/v14.18.0/lib/node_modules/yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)

/Users/ユーザー/.nvm/versions/node/v14.18.0/bin/yarn -> /Users/ユーザー/.nvm/versions/node/v14.18.0/lib/node_modules/yarn/bin/yarn.js
/Users/ユーザー/.nvm/versions/node/v14.18.0/bin/yarnpkg -> /Users/ユーザー/.nvm/versions/node/v14.18.0/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.15
added 1 package in 0.522s

Category: React, プログラミング Tags: JavaScript, macOS, Node.js, npm, nvm, React, yarn