Zenn
👋

JavaScript開発環境構築（macOS編）

2020/11/08に公開
1件
Node.js
初心者
anyenv
#
javasrcipt
tech

JavaScript開発を行うために、Node.js などをセットアップする記事です。
昨今の、React, Vue, Angular などの開発に必須なものです。

対象は macOS ですが、気が向いたらWindows編を書くかも知れません。

ただし、あなたが開発に参加しているプロジェクトで、セットアップ手順が存在している場合はそれに従ってください。この記事は、そういったしがらみがない人向けの記事です。

初心者向けの記事です。もしこの手順でダメだった場合や、疑問点があればお気軽にコメントなりいただければ幸いです。

インストールするものについて概要説明

まず、macOS で開発環境を構築するときに必須ともいえるパッケージマネージャーである Homebrew を前提とします。

さらにバージョン問題対策のため、anyenv + nodenv という定番のバージョン管理ツールを導入したうえで Node.js をインストールします。

Node.js はサーバーサイド JavaScript とも呼ばれ、コマンドラインで動く JavaScript 処理系のうち、一番メジャーなものです。Deno という、よりイケてる処理系もありますが、それに関してはこの記事では触れません。

なぜ、Node.js をダイレクトにインストールしないのか？という疑問をお持ちの方も多いかもしれません。たとえば、Homebrew で Node.js をインストールすることもできますが、どうしてそうしないのか？

業務などで開発をしていると、Node.js のあるバージョンでは動かない、みたいなことが度々生じます。そのため、がっつり JavaScript 開発を行う場合は、あるプロダクトでは、Node.js を特定のバージョンに固定したいケースを考慮しなければいけません。

anyenv + nodenv をはじめとしたバージョン管理ツールを使えば、簡単にプロジェクトごとのバージョン固定ができます。

Homebrew をインストールする

Homebrew のインストール方法は公式をご覧ください。

既に Homebrew をインストール済みの人は、定期的に brew update や brew upgrade を行ってください。Homebrew は、レシピを勝手に git で取ってきてアップデートをする仕組みであるため、「久々に brew コマンドを叩く」みたいなときには、大抵 Updating Homebrew... が走ります。

回線が細い場合は特にこれに苦しめられます。

「今日は出先でJavaScriptをやってみるか！」
「何々？homebrew で anyenv をインストールする？ brew install anyenv と……。」
「ターミナルに Updating Homebrew... って出たまま反応がない」
「パケ死ぬーーーーーーー」

こういう現象に遭遇すると大体やる気がなくなって、その日はもうマンガでも読むかってなりがちです。

Homebrew は時期によっては動作が不安定になりがちです。大体は macOS と Xcode のバージョンアップに振り回されます。そのため、macOS や Xcode のアップデートには細心の注意を払ってください。毎年、秋頃は大体誰かが悲鳴を上げてます。

iOSやmacOSなどの開発をしたい人はXcodeフルサイズのものをインストールしている必要があります。そうじゃない人は、Command line tools for Xcode だけインストールすれば大丈夫です。

この Command line tools for Xtools のインストール方法は、時代ごとに大きく異なる可能性があるのでぐぐってなんとかしてください。

xcode-select --install でインストールできるかもしれないし、できないかもしれません。いい感じに乗り切ってください！

ちなみにインストールしてあるけど動作がおかしくなることも、秋頃に頻出します。

その場合、https://github.com/nodejs/node-gyp 以下にあるドキュメントを読めば解決方法が書いてることが多いです。ちなみに node-gyp は、Node.js のネイティブモジュールをビルドするためのシステムであり、Homebrew と大体同じ問題に苦しめられがちなため、node-gyp のドキュメントよめば、Homebrew の問題も解決することがあります。

大体みんな苦しんでるので、探せば何かしらの情報が見つかります。頑張って！！！！！！！！！

Apple 社に大体みんな振り回されてるので「これなら絶対インストールできる！保存版」みたいな記事を書けないのです。

Homebrew で anyenv をインストールする

anyenv は Ruby 向けの rbenv をはじめとした、様々な言語のバージョン管理ツールに対応した、バージョン管理ツールを管理するツールです。

  1. anyenv をインストールする
  2. anyenv を使って、それぞれの言語に対応した *env をインストールする

という流れが一般的です。

そこで、Homebrew を使って anyenv をインストールします。

$ brew install anyenv
$ anyenv init

メッセージが出てきたら、メッセージにしたがってください。たぶん ~/.bash_profile とか ~/.zshrc に eval "$(anyenv init -)" みたいなのを追加しろって言われると思います。

それをしたら、一度ターミナルを閉じて開き直すか exec $SHELL -l を実行して、シェルのログイン処理をやりなおして、初期化をしてください。

ANYENV_DEFINITION_ROOT(/Users/xxxxxx/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by:
> anyenv install --init

みたいなメッセージが出たら、これに従って anyenv install --init を実行してください。

anyenv がインストールして、初期化が成功していれば、anyenv install -l でインストールできるもののリストがでてきます。

$ anyenv install -l
  Renv
  crenv
  denv
  erlenv
  exenv
  goenv
  hsenv
  jenv
  luaenv
  nodenv
  phpenv
  plenv
  pyenv
  rbenv
  sbtenv
  scalaenv
  swiftenv
  tfenv

anyenv で nodenv をインストールする

Node.js のバージョン管理ツールには何種類かありますが、そのうちの幾つかはメンテナンスが放棄されています。この手のツール乱立するくせにメンテ放棄が多いのです。

2020年11月時点の anyenv では nodenv にしか対応してないので nodenv を入れてください。

とはいえ、もしあなたのプロジェクトが他のバージョン管理ツールを採用している場合は、なんとかしてそれをインストールしてください。むしろこの記事の手順には従わずに、プロジェクトで指定されている手順に従ってください。この記事は、そういった指定がない場合向けです。

この手の記事だと、他の「既にメンテされてないツール」が度々紹介されています。この記事ももしかしたらそうなってるかもしれませんが、その場合はコメントに「nodenv なんてもうメンテされてないから、xxxxxx を使え」とか書いていただけると、後の人たちが助かると思います。

$ anyenv install nodenv

インストールが成功すると、最後に、

Install nodenv succeeded!
Please reload your profile (exec $SHELL -l) or open a new session.

という表示が出るかもしれないし、出ないかも知れませんが、どちらにせよ、この exec $SHELL -l を忘れないようにしてください。

exec $SHELL -l

anyenv系では、走ってる最中のシェルに細工をすることでバージョン管理をするため、exec $SHELL -l を叩いてログインシェルを実行しなおします。

意味合いはさっきもいったように、ターミナルを閉じて開き直すのと同じです。

どうしても、バージョン管理ツールを使ったときに更新されない・変化がないなどのトラブルがあるときは、anyenv $SHELL -l するか、ターミナルを閉じて開きなおすと解決することがあります。

anyenv や nodenv で困ったら exec $SHELL -l してください。

nodenv で Node.js をインストールする

Node.js をインストールするためには、バージョン番号を指定する必要があるため、Node.js のバージョン番号について知る必要があります。

原則として奇数バージョンは、いわゆる開発版です。11.x.x とか 13.x.x とか 15.x.x は初心者は手を出さないようにしてください。大抵泣きます。

偶数バージョンなら安定版か？というと、Node.js のリリースサイクルの都合でそうじゃないことがあります。

必ず公式を確認してください。その時点における最新のバージョン情報が書いてあります。

公式トップページ

ここを見ると「14.15.0 LTS 推奨版」と書いています。推奨版として指定されているメジャーバージョンまでの偶数が安定版だと思えば大体合っています。

「なるほど？それなら 12.x.x や 10.x.x や 8.x.x が安定版ということか」と思うかも知れませんが、古すぎるバージョンは「既にメンテナンスされてない過去の安定バージョン」です。

詳しくはリリーススケジュールの最下部にある表を見て欲しいのですが、8.x は既にメンテナンスされていませんし、10.x も2021年4月30日にその命を散らします。

  • プロジェクトでバージョン固定がある場合は「指定されたバージョン」をインストールしてください
  • なければ、公式トップページで推奨版とされているバージョンをインストールしてください
  • 転んでも泣かない物好きは最新版をインストールしてもいいかもしれませんが、そんな奇特な人はこんな初心者向けの記事を読む必要はありません

ここでは、記事を書いている2020年11月8日時点の推奨版である 14.15.0 をインストールするとします。

$ nodenv install 14.15.0

このとき14.15.0のまえに v を付ける必要はありません。

エラーが出る場合は、出てきたメッセージでぐぐってください。

nodenv: default-packages file not found とか出てきたら、ぐぐってでてきた Qiita なりの記事を読めば、大体解決策が書いてます。

$ touch $(nodenv root)/default-packages

とか。

大体この手のツールは時期によってあれこれエラーが出るので、ぐぐってなんとかしてください。運が悪いとエラーが出るので頑張って！！！！！

nodenv でバージョンを選ぶ

この手のバージョン管理ツールには、「全体（global）」と「プロジェクト（local）」のような概念があります。プロジェクト単位でバージョン固定をしていない場合には「全体」で設定されたバージョンが使われます。あなたの作業しているカレントディレクトリによって、Node.js のバージョンが異なるという意味です。

たとえば ~/projects/hoge では 10.18.0 で固定されているとします。~/projects/fuga では 10.15.3 で固定されているとします。

  • ~/projects/hoge ディレクトリより下にいる場合 node -v をすると v10.18.0 と返ってきます
  • ~/projects/fuga ディレクトリより下なら v10.15.3 と返ってきます
  • それ以外の場所なら、グローバルにインストールされているバージョンが返ってきます

nodenv versions を実行すると nodenv によってインストールされている Node.js のバージョン一覧及び、現在選択されているバージョンが表示されます。

$ nodenv versions
  system
  10.15.3
  10.16.0
  10.18.0
  12.6.0
* 12.16.0 (set by /Users/...........)
  14.15.0

この場合、12.16.0 がグローバルで指定されているバージョンです。system は macOS / Xcode がインストールしてくれたやつで、微妙に古かったり、あれこれします。

グローバル指定をするためには、nodenv global xxxxxx のように指定します。

$ nodenv global 14.15.0
$ node -v
v14.15.0
$ nodenv versions
  system
  10.15.3
  10.16.0
  10.18.0
  12.6.0
  12.16.0
* 14.15.0 (set by /Users/..............)

成功しない場合は、anyenv のインストールが失敗している、nodenv をインストールしたのに exec $SHELL -l を実行してない、ログインシェルの起動時スクリプトに余計なものが入っている、必要なものが入ってない、などです。

なんとか頑張って！！！

ローカルでバージョン固定をする場合は nodenv local xxxxx です。

$ nodenv local 12.16.0
$ node -v
v12.16.0
$ ls -al
total 2392
...
-rw-r--r--     1 erukiti       8 11  8 19:19 .node-version
...
$ cat .node-version
12.16.0

nodenv local xxxx したディレクトリに .node-version というファイルが生成されそこにバージョン名が書かれています。バージョン固定したい場合は、.node-version もプロジェクトリポジトリにコミットすべきです。

参考

npm install や yarn をしてインストールエラーになる場合、バージョンのかみ合わせが悪いか https://github.com/nodejs/node-gyp を読めば解決することがあります。

バージョンのかみ合わせが悪いときはもう、そういうものなので、かみ合わせの良いバージョンを探してください。破壊的変更の餌食になっている可能性が高いので、バージョン指定だけでは解決せずにソースコードに手を入れる必要があるケースもあります。その時は動いている人から話を聞いてください。動いている人がいないなら、泣きながらなんとかしてください。頑張って！！！

後者は、もう大体 macOS と Xcode が悪いので Apple を恨んだりしつつ、ぐぐってみてください。大体誰かが泣きながら解決方法を投稿してると思います。

Xcode beta とか macOS beta とかをインストールする人は自己責任で！大体泣きます。

まとめ

  • Homebrew は必須だけど、macOSとXcodeのバージョンが鬼門になりがち。特に秋
  • 時期やバージョンの組み合わせで、運が悪いとトラブルに遭遇しがち。macOS の宿命。ぐぐって頑張って！！！
  • 困ったことがある場合は node-gyp のドキュメントを片っ端から読むか、ぐぐって頑張って！！！
  • インストールすべき Node.js のバージョンについては、必ず公式で確認して

トラブルに遭遇したらまず node -v とか nodenv versions を確認するといいでしょう。

大体 macOS と Xcode が悪い。

Discussion