わけが分からないMacのWeb開発環境を自分の言葉でまとめてみる2

web2.md

前回は、Macのソフトウェアの関係と、Homebrewについて書きました。今回は、その中にあったnodebrewというものと、nodebrewと関係の深いNode.jsについて書きたいと思います。

はじめに

• 自分の言葉でまとめているので、厳密な意味として間違っている可能性があります。ご了承ください。指摘・ツッコミ大歓迎です。コメントによろしくお願いいたします。

• 開発環境は、Mac OSX 10.12とします。（Windowsについてはよくわからないので）

Node.jsとは

Javascriptというものを聞いた事があると思います。ホームページ上でインタラクティブな処理をするのによく使われる言語です。

Javascriptは通常ブラウザでしか使えないのですが、Node.jsは、それをサーバで使えるようにするものです。Node.jsはプラットフォーム（土台）の扱いですかね。フレームワークやライブラリではないです。

• 参考：Node.js を5分で大雑把に理解する - Qiita

nodebrewとは

Node.jsは土台となるソフトウェアなので、定期的にバージョンアップをしています。すると、バージョンによる環境依存などが発生してきます。そうなると、開発者としてはNode.jsを案件の開発環境に合わせてバージョンを切り替えたい、という要望が出てきます。

nodebrewは、Homebrewの配下で使うソフトウェアで、複数のNode.jsを切り替えたり、管理することが出来るソフトです。

ここまでを一度まとめる

ここまでで出てきたNode.js、nodebrewの関係を前回の表に追加してみます。nodebrewはNode.jsの複数バージョンを管理するわけですね。

Mac
└ Homebrew(Macソフトを管理)
     ├ Homebrew-cask（Macバイナリを管理）
     │ ├ Google Chrome.app
     │ └ Firefox.app　...etc
     ├ git
     ├ nodebrew（Node.jsを管理）
     │ ├ Node.js v7.1.0
     │ └ Node.js v7.10.0　...etc
     ├ youtube-dl
     └ ffmpeg　...etc

npmはNode.jsのpackage管理をする

先程、Node.jsはプラットフォーム（土台）と書きました。という事は、そのプラットフォームを使って動くソフトウェア（packageと呼びます）がたくさんあるわけです。Node.jsのpackageを管理するのがnpmです。

• npm

Node.jsが使える状態であれば、npmコマンドをターミナルで使うことができます。例えばgulpと呼ばれるpackageをインストールする場合は、以下のようなコマンドになります。

npm install -g gulp

「npmでインストールするよ、グローバル領域（-g）に、gulpというpackageを」…と言った感じでしょうか。

npmは、グローバルな領域（つまりそのMac全体でどこでも使えるようにする）場合と、各プロジェクト単位で使えるようにする場合の2種類があります。

npmを使ってたくさんのpackageをインストールすることになりますが、このコマンドを毎回入力するのは面倒ですね。また、グローバル領域にすべてのpackageを入れると容量も気になります。そこでインストールするものを1つのファイルにまとめて記述する方法、ファイルがあります。

npm init

今回は「TestProject」を例にやってみましょう。「TestProject」を作成し、ターミナルで「TestProject」の中に入ります。

mkdir TestProject
cd TestProject

ここでおもむろにnpm initと入力して実行します。npm initは対話形式でprojectの初期設定を行うためのコマンドです。とりあえず、何もせずリターンを繰り返せばいいでしょう。

すると、「TestProject」フォルダの中に「package.json」というファイルが作られています。これが設定をまとめて記述するためのファイルです。

package.jsonにgulpを書き込む

package.jsonにgulpを書き込んでみましょう。どうせなら、インストールしながらやればいいでしょう。以下のようなコマンドを入力します。

npm install -D gulp

「npmでインストールするよ、gulpというpackageを。packageの情報をpackage.jsonに書き込んでくれ（-D）に、」…と言った感じでしょうか。

このコマンドを実行すると、「node_modules」というフォルダが作られ、gulpとそれに関係するファイルがインストールされます。また、gulpの情報がpackage.jsonに書き込まれます。

ここまでの情報をまた図にしてまとめてみましょう。

Mac
└ Homebrew(Macソフトを管理)
     ├ Homebrew-cask（Macバイナリを管理）
     │ ├ Google Chrome.app
     │ └ Firefox.app　...etc
     ├ git
     ├ nodebrew（Node.jsを管理）
     │ ├ Node.js v7.1.0
     │ └ Node.js v7.10.0　...etc
     ├ youtube-dl
     └ ffmpeg　...etc

TestProject（作成したプロジェクトフォルダ）
├ package.json（インストール情報が書き込まれる）
└ node_modules（インストールファイルを格納するフォルダ）
     └ gulp　...etc

プロジェクトはMac全体の説明とは別の話題になるので、別ツリーにしました。Node.jsにあるnpmコマンドを使って、packageをインストールしたりします。

このpackage.jsonを他の開発者に渡して、もらった開発者はnpm installをすることで、同じバージョンのpackageを1コマンドでインストールできるようになるわけです。便利ですね。

今回のつみかさね

ここから先は、さらに各ツールの細かい説明になっていくので、このあたりで止めていますが、書いてわかると思いますが、「ソフト管理ソフト」が幾重にも重なって、個別に管理していることがわかると思います。

今回例として出したgulpもその設定を書き留めるgulpfile.jsがあったりします。こういう形になっているのは、複数の開発者で同じ環境を簡単に構築する事ができるようにするための工夫だそうなので、まずはこうしたファイルが何を指しているのかだけでも理解すると、「わけのわからないファイルがたくさんあって混乱する」という事態は防げるのではないかと思います。

[asin:B01N2Y16BQ:detail]