npmによるプロジェクトの管理
フロントエンド開発を行う上で、「Node.js」と付属のパッケージマネージャ「npm」はいまや必須アイテムといっても過言ではないでしょう。特にnpmは膨大な量のライブラリを中央リポジトリに管理しており、これらを一挙に手中に収めることができるのもReact.jsの魅力のひとつでしょう。
以下の説明で必要になるので、サンプルを試す方はインストールしておいてください。
ディレクトリ構成は次のようにします。srcディレクトリ以下に配置した.jsファイル（中身はJSX）をBrowserifyで結合したものを、buildディレクトリ以下に作成します。
sample/ ├─node_modules/ （自動生成） ├─build/ （自動生成） │ └─bundle.js ├─src/ │ ├─storage.js │ └─app.js ├─package.json ├─gulpfile.js └─index.html
各ファイル、ディレクトリの役割は次表のとおりです。
| ファイル（ディレクトリ） | 役割 |
|---|---|
| node_modules/ |
npmにより管理されるパッケージのインストール先。npm installコマンドにより自動生成される |
| build/ | ソースを元に自動生成されるファイルの出力先。bundle.jsはBrowserifyにより、アプリケーションが依存するすべてのモジュールを結合したファイル |
| src/ | ソースファイルはこのディレクトリで管理する |
| package.json | このプロジェクトをパッケージとしてnpmに管理させるための定義ファイル |
| gulpfile.js | ビルドツールGulpで必要になる設定ファイル |
| index.html | TODOアプリのメインページ |
npmによるプロジェクト管理では、package.jsonに必要なライブラリやツールを記述していきます。このプロジェクトのpackage.jsonは以下のとおりです[2]。
{
"name": "react-sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "http-server",
"build": "gulp js",
"watch": "gulp watch"
},
"author": "",
"license": "MIT",
"dependencies": {
"director": "^1.2.7",
"object-assign": "^2.0.0",
"react": "^0.12.2",
"http-server": "^0.7.4"
},
"devDependencies": {
"browserify": "^8.0.2",
"gulp": "^3.8.10",
"gulp-connect": "^2.2.0",
"reactify": "^0.17.1",
"vinyl-source-stream": "^1.0.0"
}
}
[2] ディレクトリ、package.jsonともにテスト環境を除いています。完全版はリンクからダウンロードしてください。
最低限押さえておくべきnpmの使い方
サンプルをダウンロードした時点では、アプリケーションの実行に必要なライブラリ本体が付属されていません。プロジェクトのルートディレクトリ（package.jsonと同じフォルダ）で次のコマンドを実行すると、package.jsonのdependenciesと、開発時に必要なdevDependenciesに記載されたライブラリをnode_modules以下にインストールすることができます[3]。
$ npm install
新たに依存ライブラリを追加する場合には、次のようにライブラリ名を指定すると、自動的に最新バージョンがインストールされます。また、--saveをつけることで、package.jsonのdependenciesに追記することができます[4]。
$ npm install [ライブラリ名（reactなど）] --save
プロジェクトでよく使うコマンドは"scripts"に登録しておくと、次のように簡単に実行できて便利です[5]。
$ npm run [コマンド名（watchなど）]
また、ライブラリによって提供するコマンドは、例えばnode ./node_modules/gulp/bin/gulp.jsの代わりに、単にgulpと記述することができます。
