「gulpとかwebpackとか使いたいんだけど、それにはnpmが必要なの?」
「npmって何?node.jsとなにか関係があるの?」
「node.jsのインストールには手順があるの??」
こんにちは、タカフです。
新しいMacのセットアップをしているのですが、以前のMacにはググりながらインストールしたNode.jsも、そのインストールには何かと手順があるので、上記の質問でさまよっている人の為にも記事にしたいと思います。
Node.jsとはなにか
Node.js自体はWebサーバーでJavascript記述によるWebアプリケーションの開発として使われたりするのですが、
Node.js周りで使われるパッケージ管理システムのnpmというコマンドからアクセスできるパッケージの中にプログラミング開発に便利なgulpやwebpackやFramework7などが存在して、それら一連のパッケージをインストールするのに必要なものとなっています。
要は、
gulpやFramework7やWebpackにはnpmが必要で、
npmはnode.jsをインストールすると一緒にインストールされ、
node.jsにはnodebrewが必要で、
nodebrewにはHomebrewが必要なのです。
なので、必要なものを逆から順番にインストールしていけばいいだけです。
Homebrewをインストールする
Homebrewとは、macOS用パッケージマネージャーの事で、開発に必要なパッケージを簡単にインストール出来るようになっているシステムの事です。
Homebrew公式サイトにアクセスしてみます。
Homebrewのインストールは公式サイトにのっているコマンドをターミナルに貼り付けて実行するだけです。
Macにあらかじめ入っているrubyを使ってインストールするんですね。
2019年5月現在は以下のコードとなっていますが、
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
このインストール用のスクリプトは変わるかもしれないので、Homebrew公式サイトからコピペしましょう!
インストールが完了するとHomebrew(brewコマンド)が 使えるようになります。
nodebrewをインストールする
Homebrew(brew)をインストールしたら今度はnodebrewをインストールします。
nodebrewとは、node.js自体をこのローカルMacの中でバージョン管理するためのシステムです。
node.jsを使った開発を続けていくとわかりますが、node.jsって現在進行形で進化していてバージョンが日々増えていくんですね。
なので、新しいツールをインストールする時に最新のnode.jsのバージョンが求められることがあります。または古いバージョンのnode.jsを使うこともあります。
そういう時にこのnodebrewでバージョンを切り替えられるようにしておくわけです。
nodebrewのインストールはHomebrewの brew コマンドを使います。
以下のように brew コマンドでnodebrewをインストールしましょう。
$ brew install nodebrew
これで、nodebrew コマンドが使えるようになりました。
nodevrewのバージョンは次のようなコマンドで調べられます。
$ nodebrew -v
nodebrew 1.0.1
nodebrewでインストール可能なnode.jsのバージョンを確認
先程も書きましたが、nodebrewはあくまでnode.jsのバージョン管理システム(コマンド)です。
なのでnodebrewでインストール可能なnode.jsのバージョンの一覧を確認出来るので以下のコマンドで確認してみましょう。
$ nodebrew ls-remote
(たくさんバージョン表示されるので途中省略)
v12.0.0 v12.1.0
2019年5月現在の最新は v12.1.0みたいですね。一昔前は v0.x.xの時代がずっと続いていたので、最新のnode.jsのバージョンアップ状況は目覚ましいものがありますね。
node.jsをインストールする
基本的には最新バージョンをインストールしておけば問題ないです。
以下のコマンドで最新バージョンのnode.jsをインストールしてみましょう。
$ nodebrew install-binary latest
すると以下のようなエラーが出ることがあります。
Fetching: https://nodejs.org/dist/v12.1.0/node-v12.1.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/taksuzuki/.nodebrew/src/v12.1.0/node-v12.1.0-darwin-x64.tar.gz:
Warning: No such file or directory
0.0%
curl: (23) Failed writing body (0 != 1058)
download failed: https://nodejs.org/dist/v12.1.0/node-v12.1.0-darwin-x64.tar.gz
これは、ユーザーのホームフォルダ直下に .nodebrew/src フォルダが無い為ですね。
新規でnode.jsをインストール場合はフォルダがないので、このままターミナルから作ってあげましょう。(Finderから作ってもOKです。)
$ mkdir -p ~/.nodebrew/src
mkdir はそのコマンド通り、ディレクトリ(directory)を作る(make)ためのコマンドです。オプションの-pがあることで途中のフォルダがなくても一発で作れます。-pオプションがないとsrcフォルダが作る前に.nodebrewフォルダがないエラーとなります。
改めて、最新バージョンのnode.jsをインストールするコマンドを実行します。
$ nodebrew install-binary latest
Installed successfully が表示されればインストール成功です。
ローカルマシンにインストールされたnode.jsのバージョン一覧を確認してみましょう。
$ nodebrew ls
v12.1.0
current: none
これはlsで表示されているのはv12.1.0であり、現在(current)選択されているバージョンはnoneという意味となっています。
今しがたインストールした最新バージョンのnode.jsを選択バージョンとしたいので、以下のようなコマンドでバージョン選択します。
$ nodebrew use v12.1.0
use v12.1.0
先程のコマンド nodebrew ls でcurrentに v12.1.0が表示されていればバージョンの選択が完了しました。
nodeコマンドへのパスを通す
上記までの作業でnodeコマンドは確かにインストールされました。
ですが、nodeコマンドはそのままでは使えません。
PCが起動されたら自動実行してくれるスクリプトファイルにnodeコマンドが使えるようパスを通すコマンドを記述してあげます。
具体的にはユーザーのホームフォルダに .bash_profile というファイルを設置してあげます。
現在ターミナルを開いていると思うのでviでやってみましょう。
$ vi ~/.bash_profile
vi編集画面を開いたら、以下のように記述します。
# nodeコマンド、npmコマンドへのパスを通す
export PATH=$HOME/.nodebrew/current/bin:$PATH
記述したら保存してviを閉じます。
次のPC再起動からこれが実行されるのですが、今すぐこのスクリプトを実行したい時は以下のコマンドです。
$ source ~/.bash_profile
nodeコマンド、npmコマンドの確認
上記までの作業が完了するとnode.jsやnpmがインストールされています。
コマンドで確認してみましょう。
$ node -v
v12.1.0
$ npm -v
6.9.0
ちゃんとインストールされていますね。
初めてnode.jsをインストールする人は結構長い作業で大変だったかと思います。お疲れ様でした。
これであなたも立派なnode使いになりました!
nodeのパッケージ管理システムであるnpmコマンドを存分に打ちまくっていきましょう!
現場からは以上です。