Mac に Node.js 環境をさくっと整えるための最短ルート

Mac を買った

• 新しい MacBook Pro を買った
• というわけでアプリとか作ってみたいし JavaScript とかをガンガンやっていきたい
• いろいろ調べたところ・・・
• アプリ開発にあたって Node.js とかいうやつをインストールする必要が出てきた
• でも買ったばっかりだから Mac の中身からっぽじゃん。。
• 「Mac　Node.js　環境構築」、検索と
• 「nodebrew」「nvm」「anyenv」「nodenv」「ndenv」「npm」「yarn」・・・
• ・・・
• 俺はアプリ開発を諦めた
• となりかけたので、改めて、空っぽの Mac に Node.js まわりの環境を整えるまでをメモ。

この記事で扱うこと（使えるようになるもの）

• 何も入っていない状態の Mac に Node.js のバージョンマネージャとパッケージマネージャをインストールして、Node.jsを用いた開発に着手できる環境を構築する
• 扱うものは以下。
  • Homebrew
  • anyenv
  • nodenv
  • yarn
• これらのうちどれかを単体で扱った記事（そのぶん詳しく書かれているので有難いですが）や、それぞれの他の選択肢との比較記事（例: nodenv vs nvm, yarn vs npmなど）が多いような印象のなか、本記事は「とりあえずコードを書ける状態まで持っていきたいんだけど、、」という方向け（そういった比較記事も読んだうえで、わりと評判のよいものたちを選んだつもりです）。

環境

• macOS Catalina 10.15.3
• MacBookPro (16inch, 2019)

1. Homebrew のインストール

• Homebrew の公式サイトに、「このスクリプトをターミナルに貼り付け実行して下さい。」と書いてあるのでコピーしてターミナルに貼り付け実行する。

2. anyenv のインストール

anyenv とは (GitHub へのリンク)

• 「○○env」と名のつくものたち（今回使う後述のnodenvや、たとえばPythonで使うpyenvなど。主に、プロジェクトごとに言語のバージョンを簡単に切り替えるために使ったりする）をまとめて管理する便利なやつ。
• 今回は JavaScript (Node.js) だが、のちのち別の言語でも開発してみるとなったときにも便利。

anyenv インストール手順

1. 上でインストールした Homebrew を使う。ターミナル（私の場合zsh）で以下を実行。

   ターミナル

   $brewinstall anyenv
   

2. 続けて、ターミナルで以下を実行。

   ターミナル

   $anyenv init
   

3. そうすると、指示が出てくるのでそれにしたがって、 ~/.zshrc（bashの場合は~/.bashrc） に eval "$(anyenv init -)"と追記する。具体的には以下のとおり。

   ターミナル

   vi ~/.zshrc
   

   .zshrc（bashの場合は.bashrc）に追記

   eval "$(anyenv init -)"
   

4. ターミナルを再起動

5. ターミナルを再起動したタイミングでWarningが出てくるので、指示通りに以下を実行

   ターミナル

   $anyenvinstall--init

nodenvのインストール

nodenv とは (GitHub へのリンク)

• Node.js のバージョン管理に使う。
• プロジェクトごとに Node のバージョンを簡単に切り替えることができる（たとえば、昔作ったアプリAはちょっと古いバージョンだけど、新しく作るアプリBでは最新バージョンのNode.jsを使う、など）。

nodenv インストール手順

1. 上でインストールした anyenv から nodenv をインストール。

   ターミナル

   $ anyenv install nodenv
   

2. ターミナルで以下を実行（起動中のシェル（$SHELL）をログインシェルから起動させるコマンド）

   ターミナル

   $ exec$SHELL-l

3. 続いて、ターミナルで以下を実行することで、インストール可能なNodeのリスト（一覧）が出る。

   ターミナル

   $nodenvinstall-l

4. その後、インストールしたいバージョンを指定（以下の例では12.16.1）してターミナルで以下を実行。

   • 最新の安定バージョン（LTS; Long-Term Support）や最新版は Node.js の公式サイトから確認できる。
   • 特にこだわりや制約がないのであれば、LTSとなっているバージョンを指定すればよい。
   ターミナル

   $nodenvinstall 12.16.1
   

5. 続いて、以下をターミナルで実行。

   ターミナル

   $nodenv rehash
   

6. 最後に、以下のコマンドをターミナルで実行することで、インストールしたバージョンの Node.js を使えるようになる

   ターミナル

   $nodenv global 12.14.0
   

• ちなみに、個別のプロジェクト（アプリ）でバージョンを切り替えたい場合は、まず、利用したいバージョンをインストール（$nodenv install (バージョン番号)してから、そのディレクトリ内で$nodenv local (バージョン番号)と打って実行することで、プロジェクトごとにバージョンを切り替えることができる。

yarn のインストール

yarnとは

• JavaScript のパッケージマネージャ
• npm（これも超有名なパッケージマネージャ）と互換性があるが、npmよりもインストール速度が速いなど、npmよりも高性能だと言われている
• JavaScriptでの開発時にはほぼ必須となるはずなのでこのタイミングでインストールすべし
• 詳しい使い方は 参考記事の 4, 5 などが参考になる。

ターミナルで以下を実行し yarn をインストール

brew install yarn

環境構築完了！

Enjoy JavaScript!

参考記事

1. Mac に anyenv でサクッとマルチ開発環境構築
2. anyenv から入れた nodenv で Node.js を入れたときのメモ
3. anyenv と nodenv で node.js バージョン管理、設定後に gulp の設定を修正（Mac）
4. 使い方（yarn公式ガイド）
5. npmとyarnのコマンド早見表