Rails5でwebpackerを使ってReactと連携してみる

Railsのwebpackerを試してみる。

プロジェクトを作成する

rails newの際にwebpackのオプションを指定することでgemのwebpackerが入る。reactを使いたいので、reactの指定をします。 この辺りはgithubのreadmeに書いてあるので、見てみるといいですね。

github.com

$ rails new sample --webpack=react

gemfileを見るとgem 'webpacker'の記述が確認できますね。yarn.lockや.babelrcも生成されています。yarn.lockの中を見てみるといろんなパッケージが入っていますね。

設定する

$ bundle exec rails webpacker:install
$ bundle exec rails webpacker:install:react 

トランスパイル対象は、packs配下

トランスパイル対象は、app/javascript/packs配下。このディレクトリにコンポーネントを作っていくわけですね。

デフォルトでは、hello_react.jsxというファイルが存在しています。このファイルを使って適当な文字をブラウザに表示させてみたい。

文字をブラウザに出力する

まずは、普通にrailsでコントローラーとviewを作ります。

$ bundle exec rails g controller Sample index

上記でsample/indexにアクセスすると、生成されたindexのページが表示されるはず。サーバーを起動して確かめてみましょう。

$ bumdle exec rails s

今のままでは、ただ単にrailsのみの画面を表示させているだけなので、reactを使って表示させたいです。

# index.html
<h1>Sample#index</h1>
<div id="root">
</div>
<%= javascript_pack_tag 'hello_react' %>

# hello_react.jsx
import React from 'react'
import ReactDOM from 'react-dom'


ReactDOM.render(
  <div>Hello World!</div>,
  document.getElementById('root'),
)

javascriptの読み込みに<%= javascript_pack_tag 'hello_react' %>を使ってファイル名を指定します。あとはその中にあるreactのコードが反映される。これでブラウザを更新してみると、期待通りの画面になっているはずです。

ただ、ブラウザをいちいち更新するのは面倒です。変更を検知するようにwebpack-dev-serverを立ち上げておきましょう。

$ ./bin/webpack-web-server

これで、ファイルを変更すると、その度にコンパイルされるのがターミナルからわかるのではないでしょうか。

まとめ

reactだけで何かを作るときには、webpack.config.jsにいろいろ設定を書いて使っていたけど、railsでwebpackerインストールしちゃえば、すでに環境ができた状態でやってくれるから楽ですね。