MacにNode.jsをインストールしてnpmを使えるようにする(Nodebrew利用)

  • MacにNode.jsをインストールしたい
  • Nodeのバージョン管理や切替を行いたい
  • Nodebrewって?
  • npmってどうやって使えるようにするの?

今回は開発環境の構築において、Node.jsのインストールについて書きます。

AngularJSやReact、Vueなどのフロント界隈の開発や、パッケージ管理でnpmを利用するために必要なNode.jsをインストールする方法です。

Nodeのバージョンを切り替えたりする必要もあるかと思うので、今回はNodebrewを使ってインストールしてみます。

実際のインストール手順を順を追ってまとめておきますので、MacにNode.jsをインストールするときの参考にしていただけると嬉しいです。

この記事でわかること
  • Nodebrewでできること
  • MacにNode.jsをインストールする手順
  • インストール済みのNodeのバージョン切替方法
目次

 Nodebrewとは 

今回Node.jsのインストールはNodebrewで行います。

オーカミ

Nodebrewってナニ?

簡単に言うとNode.jsversion管理するためのtoolです。 

複数のnodeのバージョンを切り替えたりできるので、早いバージョンアップにも柔軟に対応することができます。 

まずはMacにNodebrewをインストールしましょう。

MacにNodebrewをインストール 

Nodebrewがインストールされていないと話にならないので、まずはMacにNodebrewをインストールしていきます。

Node.jsがインストールされているかバージョン確認

Nodebrewをインストールするにあたり、すでにNode.jsがインストールされているかどうかを確認します。

ターミナルで以下のバージョン確認コマンドを実行します。

$ node -v

バージョンが表示される場合はインストールされているので、アンインストールしましょう。

アンインストールの仕方はググってください。

ごめんなさい・・・

一応参考になりそうな記事のリンクを貼っておきます。

Nodebrewのインストール

Node.jsがアンインストールできたら、Nodebrewをインストールします。

今回はNodebrewHomebrewからインストールします。

Homebrewがインストールされてなかったり、なんだかわからない人はこちらの記事からインストールしましょう。

Homebrewが使えたら以下のbrewコマンドを実行します。

$  brew install nodebrew 

成功するとこんなメッセージが表示されればOKです。

$  brew install nodebrew 
==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.1.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v1.0.1
######################################################################## 100.0%
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/nodebrew/1.0.1: 8 files, 38.6KB, built in 4 seconds

Nodebrewのバージョン確認

正常にNodebrewがインストールされたか確認するために、バージョン確認します。   

ターミナルで[nodebrew -v]のバージョン確認コマンドを実行して、バージョンが以下のように表示されればOKです。

$ nodebrew -v 
nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

Node.jsの最新版をインストール

Nodebrewがインストールできたので、続いてNode.jsをインストールしていきます。 

インストールできるNodeのバージョンを確認 

[nodebrew ls-remote]のコマンドでインストール可能なNodeのバージョンの一覧が表示できます。   

$ nodebrew ls-remote 

Node.jsのインストール 

今回は最新版をインストールしたいので、以下のコマンドを実行します。   

$ nodebrew install-binary latest 

バージョン指定したい場合はlatestの部分をv13.9.0ように指定すればOKです。

ちなみに、install-binaryじゃなくてinstallでも実行可能ですが、同時にコンパイルがされるようで、ものすっごく時間がかかります。

なので、install-binaryで実行するのがおすすめです。

  • 最新版は latestを指定
  • installではなくinstall-binaryの方が早い

エラーになる場合

インストールコマンドを実行すると「Failed to create the file」のエラーが発生することがあります。

$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v13.9.0/node-v13.9.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/hiro/.nodebrew/src/v13.9.0/node-v13.9.0-darwin-x64.tar.gz: No 
Warning: such file or directory

curl: (23) Failed writing body (0 != 1020)
download failed: https://nodejs.org/dist/v13.9.0/node-v13.9.0-darwin-x64.tar.gz

おそらくNodebrewをインストールした直後に出るエラーだと思います。

そんなときは、下記コマンドでディレクトリを作ってあげましょう。

$ mkdir -p ~/.nodebrew/src

これでインストールコマンドが正常に実行できるはずです。

インストールされたNode.jsのバージョンの確認

[nodebrew list]コマンドでインストールされているNodeのバージョンが一覧で表示されます。

$ nodebrew list
v13.9.0

current: none

インストールしたNode.jsバージョンを有効にする

インストール直後は、current: noneとなっているので、使用するバージョンを有効化します。

useコマンドでバージョンを指定します。

$ nodebrew use  v13.9.0

もう一度listコマンドを確認して、currentが変わっていればOKです。

$ nodebrew list
v13.9.0

current: v13.9.0

nodeの実行パスを通す

2020/06/12追記

以下の手順はbashについての環境設定になります。
MacOS Catalinaからは標準で起動するターミナルがzshになっておりますので、使用する設定ファイルをzsh用(zshenv,zshrcやzprofile)にする必要があります。

一応zshenvの場合を後述しておきました。

bashrcにnodeのパスを保存

nodeコマンドを使えるようにするために、nodeコマンドのパスをbashrcへ保存します。

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bashrc

インストール時に表示される下記のパス追加になります。

Add path:
   export PATH=$HOME/.nodebrew/current/bin:$PATH

bash_profileに読み込みを追加

[~/.bash_profile]に以下を追記します。

if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi

bash_profileやbashrcについてはこちらの記事が参考になります。

zshの場合

2020/06/12追記

zshを使用している場合は、上記の.bashrcの代わりに.zshenvにパスを追加しておきましょう。

export PATH=$PATH:/Users/hiro/.nodebrew/current/bin

bashとzshの設定ファイルの読み込みの違いなどは今回は触れません。

zshの設定ファイルについてはこちらの記事が参考になると思います。

ターミナルを再起動してNode.jsのバージョン確認

ターミナルを再起動して、[node -v]コマンドで使用するNode.jsのバージョン確認します。

$ node -v
v13.9.0

上記のように正常にバージョンが表示されればOKです。

npmも使えるか確認

Node.jsのインストールは完了したので、npmも利用できるか確認しましょう。

npmを使うことのほうが多いと思うので、npmコマンドも使用できるかバージョンを表示して確認します。

$ npm -v
6.13.7

こちらもバージョンが表示されればインストールOKです。

MacNode.jsインストールまとめ

今回はMacにNodebrewからNode.jsをインストールして、バージョンを指定して利用するまでの一連の手順をまとめてみました。

Node.jsの開発スピードはとても早く、バージョンアップが頻繁に行われていますので、バージョン管理がしやすいようにNodebrewを使ってのインストールが絶対オススメです。

開発時のパッケージ管理でnpmを使うことが多いと思うので、環境構築をするときの参考になれば嬉しいです。

まとめ
  • Nodebrewを使ってNodeバージョン管理を快適に
  • インストールでエラーの場合はdirを作りましょう

おすすめ本

フロントエンドの開発環境構築のことも書いてあり、人気のフレームワークを使ったサンプルで、最新のSPA開発の勉強ができる一冊だと思います。

よかったらシェアしてね!

コメント

コメント一覧 (2件)

    • testさん、コメントありがとうございます。
      おそらく起動時に.bash_profileが読み込まれていないのですね。
      MacのOSがCatalinaからは起動がbashではなくzshになったので、もしかしたらzshが起動してるのかもしれません。
      この辺りについても少し追記しておきたいと思います。

      貴重なコメントありがとうございます。

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次
閉じる