2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

watchを使ってReactとES6の変更を監視 + 自動ビルドする

Last updated at Posted at 2017-04-01

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」が表示されていれば成功です。

image

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

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

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

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?