Reactビギナーズガイド」でReactを勉強する。の続き。

前回は

Railsプロジェクトの作成
Reactコンポーネントの作成
babelでReactとES6のコードをトランスパイル
browserifyで依存関係を解決した1つのファイルにまとめる
といったところをやりました。

しかし、コードを変更する度に毎回手動でbabelとbrowserifyを実行するのはとても効率が悪いです。そこで、ファイルの変更を監視し、自動でトランスパイルと依存関係の解決をしたいところです。

「Reactビギナーズガイド」ではこのプロセスをwatchという変更を監視するライブラリと、コマンドが記述されたシェルスクリプトを用意することで解決しています。

1. watch

watchは指定したディレクトリの内容を監視し、変更が発生したら何かしらの処理を実行できるライブラリです。

npm install --global watch

watchをグローバルにインストールすることでwatchコマンドを使用できるようになります。

2. build.sh

続いて必要になるのはファイルの変更を検知した時に実行したい処理です。
今回はbabelによるトランスパイルと、browserifyによる依存関係の解決を実行したいので、同書に従ってシェルスクリプトを作成します。

touch build.sh

build.sh

# トランスパイルしたjsの出力先をapp/frontends配下にしておくと無限ループに陥るため、public配下に出力
babel --presets react,es2015 app/frontend -d public/assets/javascripts/build

browserify public/assets/javascripts/build/books.js -o public/assets/javascripts/bundle.js

date;echo;

3. watchを起動し、開発する

シェルスクリプトが用意できたら以下のコマンドで監視を開始します。
見ての通り、watchコマンドの第一引数に実行ファイル、第二引数に監視するディレクトリを指定しています。

watch 'sh build.sh' app/frontend

watchが起動した状態で、Reactビギナーズガイド」でReactを勉強する。で作成したbooks.jsを変更してみましょう。

posts.js

import React from 'react'
import ReactDOM from 'react-dom'

class Books extends React.Component {
  render() {
    return (
      // 「HelloWorld」から「BookApp」へ変更
      <h1>BookApp</h1>
    )
  }
}

ReactDOM.render(
  React.createElement(Books),
  document.getElementById("books")
)

ターミナルでは以下のような結果が出力されていることがわかります。

app/frontend/books.js -> public/assets/javascripts/build/books.js
2017年 4月 1日 土曜日 13時50分35秒 JST

4. ブラウザで確認する

rails serverを起動し、http://localhost:3000/books/index へアクセスし、「BookApp」が表示されていれば成功です。

変更を繰り返し、自動でビルドがされているか何度か確認してみても良いでしょう。

この「変更の監視と自動ビルド」というプロセスはgulpやgruntなどのタスクランナーを用いる手法や、watchifyのようなライブラリを用いる手法もあるようなので別の機会にそれぞれ試してみたいと思います。

変更を監視し、自動でビルドされるようになったので次回以降は本格的にアプリケーション開発に入っていきたいです。