なお、執筆時点でのReact.jsのバージョンは0.12.2です。サンプルとして、次の4つを、本記事のタイトル下にある［ダウンロード］から入手できます
| 表示 | ファイル名 |
|---|---|
| 完成版（Jestによるテスト） | sample-2-jest.zip |
| 完成版（Jestによるテスト、Bootstrapによるスタイリングあり） | sample-2b-jest.zip |
| 完成版（Mochaによるテスト） | sample-2-mocha.zip |
| 完成版（Mochaによるテスト、Bootstrapによるスタイリングあり） | sample-2b-mocha.zip |
対象読者
- JavaScriptフレームワーク・ライブラリの選定に悩んでいる方
- 本格的にJavaScriptを触るのが初めてという方
- jQueryでの大規模なフロントエンド開発に限界を感じている方
必要な環境
Node.jsがインストールされていることが必要です。
Node.js形式でモジュールを定義する
前回、途中まで作成したTODOアプリでは、すべてのコードを単一ファイルに記述していましたが、正しくは複数ファイル（モジュール）に分けて管理すべきです。ただし、モジュール間の依存性を整理する必要があります。それには、Node.js形式[1]でモジュールを定義するのが便利です。
Node.js形式のモジュールはrequire(……)で呼び出すことができます。
まず、app.jsからストレージを扱う部分をstorage.jsとして切り出します。
var TodoStorage = {
...
}
module.exports = TodoStorage;
このようにmodule.exportsにモジュール名を代入することで、別ファイルに定義されているモジュールをインポートすることが可能になります。同様にして、すべてのコンポーネントをモジュールとして別ファイルに切り出しても構いません。
次に、ファイルとして切り出したstorage.jsと、npm（後述）のパッケージとして定義されているreactを、app.jsからそれぞれ呼び出すように変更します。
var React = require('react/addons');
var TodoStorage = require('./storage.js');
...
[1] CommonJS形式とも呼ばれます。元々CommonJSはコミュニティベースのJavaScript標準化プロジェクトで、Node.jsのモジュールは（明言されていませんが）これを実装したものと言われています。
Node.jsモジュールをブラウザで動かすためのツールBrowserify
ただし、このようにして定義したモジュールは、そのままではブラウザ上で動作しません。そこで、Browserifyというツールを使い、ブラウザ上で動作するようにコードを変換します。
モジュールをブラウザ上で動作させるには2つの戦略があります。
- 実行時、必要に応じて動的にモジュール（.jsファイル）をロードするようにする
- あらかじめモジュール間の依存性を解決し、単一ファイルにまとめる
前者のアプローチはAMD（Asynchronous Module Definition）と呼ばれ、Require.jsが有名です。
ここでは後者のアプローチを採用します。単一のファイルに結合することによってブラウザからのリクエスト数が減り、動的にロードするよりもパフォーマンスの向上が期待できます。
次ページ以降、少し長くなりますが、1つずつ環境を整えていきます。