mac環境にnodebrew経由でNode.jsをインストールしてバージョンを管理する方法

フロントエンドの開発を行うにあたって、避けては通れないのがNode.jsのインストールです。
今回はNode.jsのインストール方法をひと通りまとめてみます。
Node.jsとは何なのか?
JavaScriptは本来クライアントサイド(ブラウザ側)で処理を行う言語なのですが、それをサーバーサイドでの制御も出来るようにしたのが「Node.js」です。
Node.jsを利用することでWebサービスの開発環境が作れるようになります。
開発環境を作るには、Node.jsをインストールする際に一緒にインストールされる「npm」というパッケージ管理ツールを利用します。
npmはNode.js向けに提供されているパッケージの管理が出来るツールです。
Webの開発を行う上で使用するパッケージはかなりの量がありますし、それぞれのパッケージのバージョンも重要になってきます。
npmはそれらを管理してくれるツールというわけです。
インストールまでの流れ
今回の目標はNode.js(一緒にnpm)のインストールですが、Node.jsにもバージョンが存在していて、プロジェクトや必要に応じてバージョンを変更する事があります。
その時に備えて、あらかじめNode.jsのバージョン変更がしやすい「nodebrew」というものをインストールしておきます。
色んな単語が出てきてややこしいですね。一度ここで単語と今回の流れを整理しておきましょう。
- nodebrewをインストールする
- Node.jsをインストール(一緒にnpmもインストールされる)
- ちゃんとインストールされたか確認する
nodebrewをインストールする
まずはnodebrewのインストールからです。
ターミナルを開いて、下記のコードを入力します。
$ curl -L git.io/nodebrew | perl - setupインストールが開始され、最後に下記のような表示が出てくると思います。
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew
========================================
Export a path to nodebrew:
export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================これは「nodebrewが~/.nodebrewにインストールされるからパスを通すように」という意味です。
nodebrewのパスを通す
お次はパスを通す作業です。
「パスを通す」というのは簡単に言うと「プログラムの在り処をコンピュータに教えてあげる」という事です。今回のnodebrewは「~/.nodebrew」内に格納されているので、何かする度に「~/.nodebrew」フォルダに入っているnodebrewを実行するという指定になります。
しかし、パスを通す作業をする事で「nodebrewは~/.nodebrewの中にある」と設定しておくことで、いきなり「nodebrewを実行する」と言ってもコンピュータが理解できるようになります。
かなり簡略化して説明したのですが、大まかな解釈としてはこんな感じです。
では肝心のパスの通し方ですが、ホームディレクトリにある.bashrc か .zshrcに下記の1行を追加します(無い場合は作成してください)。
export PATH=$HOME/.nodebrew/current/bin:$PATH
変更を保存したら下記コマンドを打って変更を反映します(ターミナルの再起動でもOK)。
$ source ~/.bashrc下記のnodebrewコマンドを打ってみて、ちゃんと動くかどうか確認します。
$ nodebrew helpnode.jsのインストール
それでは、ここからnodebrewを利用してnode.jsをインストールしていきましょう。
まずは下記コマンドでインストールできるnodebrewのバージョンを確認します。
$nodebrew ls-remoteずらーっとバージョンが出てきます。
この中からお目当てのバージョンを探すのですが、今回はとりあえず最新のバージョンをインストールする事にしましょう。
ちなみに一覧の一番下にある「io@v1.0.0」等の頭に「io@」が付いているバージョンは古いバージョンです。node.jsのバージョンは古い順に下記の通りです。
- バージョン 0.x ~
- バージョン io@1.x ~ io@3.x
- バージョン 4.x ~
では目的のバージョンをインストールしましょう。
下記コマンドでnode.jsをインストールします(v11.6.0の部分は目的のバージョンに変えて入力してください)。
$nodebrew install-binary v11.6.0インストールが完了したら「nodebrew ls」コマンドを入力してみましょう。
このコマンドでインストール済みのnode.jsのバージョンが一覧で見れます(まだ1つしかインストールされていないと思いますが)。
$nodebrew lsインストール済みのnode.js一覧の下に「current: none」と表示されていると思います。
このcurrentに表示されるのが使用中のnode.jsのバージョンになります。
最後に「nodebrew use」コマンドを使って、インストールしたnodebrewをセットします。
$nodebrew use v11.6.0下記コマンドを入力してnode.jsのバージョンを確認してみましょう。
ちゃんと反応して、目的のバージョン番号が返ってくれば成功です。
$node -vnode.jsのバージョンを変えたい場合
さて、ここからがnodebrewを利用した意味なのですが、node.jsのバージョンを変えてみます。
インストールの時と手順は何も変わってません。
- node.jsのバージョンを一覧で確認
- 目的のnode.jsをインストール
- 目的のnode.jsを使用
$nodebrew ls-remote
$nodebrew install-binary v10.0.0
$nodebrew use v10.0.0後はnode -vコマンドでバージョンを確認すればちゃんと変更されているのが確認出来るかと思います。
$node -v
また、既に目的のバージョンのインストールが完了している場合は「nodebrew use」コマンドのみでOKです。
非常に簡単にバージョンの変更が出来ますね。

Dart Sassの変数の基本的な使い方|Dart Sass入門
Dart Sassを使う上で1番基本的なネストやアンパサンドの書き方|Dart Sass入門
スライドを簡単に実装できるJavaScriptライブラリ「Swiper」
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
HTMLのpattern属性を使ってフォームのバリデーションチェックを行う方法
ダミーとして使うURLは適当に入力せず、決まったものを使うようにしよう
さくらのレンタルサーバで.htaccessが原因で500エラーになってしまう場合のチェックリスト
SafariのURLメニュー部分も考慮できるCSSの単位「dvh」
CSS疑似要素の「:empty」でタグの中身が空のときのスタイルを設定する
Facebookでシェアした記事の画像反映ができていない時の修正方法
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Path Finder 8のサイドバー設定がたまに初期化されてしまう問題
横幅が広がったときの挙動が変わる!CSS Gridの「auto-fill」と「auto-fit」の違い
チャットサービス統合アプリのStationがChrome拡張機能になって登場!キーボードだけでよくアクセスするサイトへ移動できる
ATOKで簡単に今日の日付を入力する方法
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Google Chrome が提供しているベータ版含む4つのバージョンの違いとインストール方法
Vue.jsを使う人が最低限導入しておきたいVisual Studio Codeの拡張機能
CSS Nite in Kobe, vol.39「ウェブサイトの分析とGoogleアナリティクス活用・カイゼンのノウハウを学ぼう」に参加してきました
Figmaのフォント選択時に分かりやすくプレビューしてくれるプラグイン
Visual Studio Codeで読み込んだCSSで設定されているclass名の入力補完をしてくれる拡張機能「HTML CSS Support」