「React入門」の前回はブラウザ上でJSXの変換を行いましたが、今回はNode.jsとBabelを利用してローカルでJSXを変換する方法について解説を行います。

Babelとは?

Babelとは様々なコードをブラウザが解釈できるJavaScriptに変換してくれるツール(JavaScriptトランスパイラ)です。今回はBabelを利用してJSXの記述をJavaScriptに変換します。

BabelはJSX以外にもES2015などのまだブラウザが実装していない機能をブラウザが解釈できるJavaScriptに変換する際などにもよく利用されますので、今回はES2015の設定も合わせて行なっておきましょう。

Node.jsのインストール

まずは、事前にNode.jsをインストールしておく必要があります。Node.jsの「公式ページ」でインストーラーが公開されていますのでそちらからダウンロードができます。

執筆時点(2016年9月20日)ではv4.5.0 LTS と v6.6.0 Currentの２つのバージョンがダウンロードできますが、安定版の最新であるv4.5.0 LTSをインストールしておけば今回は大丈夫です。

初期ファイルの設定

適当なフォルダを作成して以下のようなディレクトリを作成しましょう。

./
├── /src
│   └── app.jsx
├── /dest
└── index.html

各フォルダ/ファイルは以下のような用途で利用します。

srcフィルダ

実際に記述するソースファイルを格納しておいくフォルダ

src/app.jsx

Reactのコードを記述するファイル、拡張子jsxとしておき後ほどBabelでJavaScriptに変換を行います。

ファイルには以下のコードを記述します。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('app')
);

destフィルダ

JSXで書いたコードがJavaScriptに変換されて書き出されるフォルダ、ひとまずは空でも大丈夫。

index.html

確認用のHTMLファイル、以下のHTMLを記述します。

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="dest/app.js"></script>

Babelの設定

Nodeモジュールのインストール

作成した作業ディレクトリで以下のコマンドを打ってNode.jsの設定を行います。

まず、以下のコマンドでpackage.jsonを作成します。

npm init -y

次に、以下のコマンドでJSXの変換に必要なNodeモジュールのインストールを行います(すごく時間がかかりますがエラーを出すまで閉じないでください)。

npm install --save-dev babel-cli babel-preset-react babel-preset-es2015

各モジュールは以下のような機能です。

babel-cli

Babelをコマンドラインから実行するためのモジュール

babel-preset-react

BabelでJSXを変換するためのモジュール。Babelでは変換対象のモジュールのことをプリセットと呼びます。

babel-preset-es2015

ES2015を変換するプリセット。

package.jsonと.babelrc

Nodeモジュールのインストールが終了しましたら、package.jsonのscriptsに以下のbuildコマンドを追加しましょう。

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d dest"
  },

最後にpackage.jsonと同階層にBableで変換するプリセット(今回はreactのみ)を指定した「.babelrc」という設定ファイルを作成します。

{
  "presets": ["es2015","react"]
}

これで設定は完了です。最後にBableを実行してちゃんと変換できるか確認しましょう。

Babelの実行

package.jsonのscriptsで設定した以下のコマンドでBableの変換はできますの実行してみましょう。

npm run build

以下のように表示されて、destディレクトリにapp.jsが出力されるかと思います。

nishihatakazuma-no-MacBook-Pro:03 nishihatakazuma$ npm run build

> 03@1.0.0 build /Users/nishihatakazuma/GitHub/to-r/react-tutorial/docs/03
> babel src -d dest

src/app.jsx -> dest/app.js

dest/app.jsのソースを確認するとJSXの記述がJavaScriptに変換されるのがわかります。

ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, world!'
), document.getElementById('app'));

このようにBabelを実行することで、コードはJSXで記述したコードをJavaScriptに変換してブラウザに解釈させることが可能です。

監視処理

このままではsrcのファイルを変更するたびにbuildコマンドを実行しなくてはいけなく少し面倒です。

app.jsxを監視しておき変更があれば即座にapp.jsに反映されるようにするにはpackage.jsonのscriptsを以下のように変更して

 "scripts": {
    "build": "babel src -d dest",
    "watch": "babel src -d dest -w"
  },

コマンドで「npm run watch」と入力するとファイルの監視処理が走ります。
監視時には差分だけみてコンパイルが行われコンパイル時間が短くなるので、ガリガリとコードを書くときにはおすすめです。

次回はJSXについて解説を行なっていきます。