第2回 簡単なReact.jsの使い方 （1/8）

１）快適なReact.js開発環境をgulpで作る

React.jsはJSX という言語を利用して開発します。
JSX はトランスコンパイル言語と呼ばれるもので、JavaScriptに変換して利用します。
jsxというコマンドを利用すればJSX ファイルをJavaScriptに変換することが可能ですが、ソースコードを変更するたびにJSX をコンパイルするのは面倒です。まずはソースコードの変更を検知して自動的にコンパイルし、ブラウザのリロードまでを行ってくれる環境を構築しましょう。

JavaScriptには便利なツールがいくつかありますが、今回はgulp + webpackを利用して環境を構築します。これらの動作にはNode.js が必要となりますので、まずはNode.js のインストールから行いましょう。なお、この組み合わせの他にもGrunt + Browserifyなどがあります。

Node.jsのインストール

Node.js のホームページから各OS用のパッケージをダウンロードし、Node.js をインストールしてください。

React.js開発のためのテンプレートダウンロード

次に、gulp + webpackの環境を構築する必要がありますが、いろいろと設定する項目が多いのでテンプレートを用意しました。このテンプレートは下記の手順を省略することができます。

• 使用するライブラリの依存関係の定義
• ビルド手順の定義
• JavaScriptを動かすHTMLの作成

テンプレートを使用するにはレポジトリをクローンし、ライブラリのインストールを行ってください。

git clone https://github.com/jirokun/ReactTemplate
cd ReactTemplate
npm install -g gulp
npm install

このテンプレートは以下のディレクトリ構成となります。後述するサーバサイドレンダリングでJavaを使用するため、Maven の構成に則っています。

├── dist          # ビルドした結果を格納する
├── node_modules  # node.jsのライブラリ群が入る
└── src
    ├── main
    │   ├── jsx   # JSXファイル
    │   └── www   # 静的ファイル
    └── test
        └── js    # JavaScriptのテストファイル

JSX ファイルはsrc/main/jsxに.jsxというファイル名で保存します。ここに格納されたファイルはビルドされ、dist/scripts/client-bundled.jsにまとめられます。wwwディレクトリにはindex.htmlなどの静的ファイルを格納します。ここに配置されたファイルはビルド時にdist/にコピーされます。

テンプレートにはあらかじめsrc/main/www/index.htmlが格納されており、dist/scripts/client-bundled.jsを参照するようにHTMLが書かれています。

コラム　ソースの依存関係の解決

通常プログラムを作成する場合、ファイルを分割して開発します。分割したファイルの依存関係を解決するために、importやrequireなどを使用しますが、ブラウザで実行するJavaScriptでは他のファイルをロードする仕組みがありません。そのためHTMLの中に必要となるファイルをscriptタグで書いて依存関係を解決します。

しかし、JavaScriptの実行環境であるNode.js ではrequire機能が備わっています。このrequireをブラウザ側でも使用するためwebpackやbrowserifyが開発されました。webpackができた経緯については「JavaScriptとECMAScript、CommonJS/AMD/Browserify/RequireJS/Webpack、TypeScriptに関する覚え書き」が詳しいです。