コンポーネント間のpropsの受け渡し - React入門

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

追記
第11回ではwebpackを利用したより高度な環境の構築方法について解説をしております。
React入門 第11回 webpack と Babel

Babelとは?

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

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

Bableのページ
Babelの公式ページ

Node.jsのインストール

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

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

Node.jsのダウンロードページ
Node.jsのダウンロードページ
TIPS
様々なバージョンのNode.jsをプロジェクトごとに使い分ける高度な使い方は以下の記事で解説しています。
anyenvを使ってNode.jsのバージョン管理をしよう!
TIPS
様々なバージョンのNode.jsをプロジェクトごとに使い分ける高度な使い方は以下の記事で解説しています。
anyenvとnodenvでNode.jsのバージョン管理をしよう!

初期ファイルの設定

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

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

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

srcフィルダ

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

src/app.jsx

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

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

destフィルダ

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

index.html

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

Babelの設定

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

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

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

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

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

babel-cli

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

babel-preset-react

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

babel-preset-es2015

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

package.jsonと.babelrc

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

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

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

Babelの実行

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

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

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

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

監視処理

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

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

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

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