Rails5.1でReact を動かそう【webpackerによる環境構築編】

React Ruby on Rails Webpack

はじめに

2017年4月27日にRuby on Railsのバージョン5.1がリリースされました。
リリース（英語）

いくつか大きなアップデートがありましたが、個人的に大きなものとしては Webpack や Yarn のサポートではないかと思います。

※他のアップデートはこちらをご覧ください。
Railsガイド

このアップデートにより、特にReactなどのモダンなJavaScriptライブラリの導入が非常に楽になり、よりフロントエンドの最新技術をRailsに組み込みやすくなりました。

今回は周辺技術について解説しながら、Rails5.1 + React + Webpackで環境を作ります。

Rails5.1でプロジェクトを新規に作る場合、デフォルトでYarnが使われます。
そして同じくRails5.1でサポートされた webpack を使用することで簡単にReactの環境を作ることができます。

Yarnとは

まずYarnについての見ていきましょう。
YarnとはJavaScriptのパッケージマネージャーです。
ピンとこない方は、npm と同じようなものと考えてください。
Yarn

Facebookで開発された、npmより高速で信頼性の高くセキュアなパッケージマネージャです。
Facebook開発ブログ

こちら比較した結果が出ていますが、この方の場合はキャッシュ未使用時は2倍近く、キャッシュ使用時は10倍近くのスピードの差が出ていますね。
npmとYarnの比較記事

また、もうひとつの特徴としてyarn.lockを作成・更新することでバージョンを固定できるということが挙げられます。
GemfileとGemfile.lockのようなイメージですね。
もちろんnpmでも npm shrinkwrap を実行することでnpm-shrinkwrap.json が作られるのですが、Yarnのほうがお手軽と言えるでしょう。

webpackとは

こちらの公式Read Meにもあるように、webpackはモジュールバンドラーです。
webpack
文字通り解釈すると、モジュールをまとめる（バンドルする）ものです。
複数のJavaScriptやCSSファイルをブラウザ用にまとめて出力することができます。

Reactを取り巻くreact-domやJSXなど様々な依存関係のあるモジュールを変換する必要があり、その為にwebpackが必要となります。

React × Rails

前置きが長くなりましたが、早速ReactをRails5.1に組み込んでみたいと思います。

React x Rails で新規にプロジェクトを作成

といっても、このコマンドを実行するだけです。
rails new reactapp --webpack=react
デフォルトでパッケージマネージャはYarnが使用されますが、--skip-yarn をつけることでYarnを無効とすることができます。

またwebpackをサポートしたことで、以下のコマンドも可能となっています。

rails new webpacker-example-app --webpack=angular  # angularが入ります
rails new webpacker-example-app --webpack=vue  # vue.jsが入ります

実行すると以下のようなメッセージが表示されます。

Bundle complete! 17 Gemfile dependencies, 71 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
       rails  webpacker:install
Webpacker requires yarn. Please download and install Yarn https://yarnpkg.com/lang/en/docs/install/
       rails  webpacker:install:react
Webpacker requires yarn. Please download and install Yarn https://yarnpkg.com/lang/en/docs/install/
         run  bundle exec spring binstub --all

rails webpacker:install を実行してくれとメッセージが出るのでコマンドを実行します。

Yarnが入っていない場合、このようにYarnを入れてくださいとメッセージが表示されます。
Webpacker requires yarn. Please download and install Yarn https://yarnpkg.com/lang/en/docs/install/

Yarnをインストールしましょう。
npm install --global yarn

Webpackを有効にする

Yarnが入ったところで再度rails webpacker:install を実行します。
app/javascript/packs/ ディレクトリができ、ここに application.js が作られているのが確認できるはずです。

Reactを有効にする

今度は rails webpacker:install:react を実行してみましょう。
Reactが有効になり、app/javascript/packs/hello_react.jsx や config/webpack/loaders/react.js が作られるはずです。

JavaScriptの読み込みを変更する

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>WebpackerExampleApp</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

この
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> を
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> こちらに変更しましょう。

コンパイルをする

いくつかコンパイルコマンドはありますが、 ./bin/webpack を実行するとコンパイルが実施されます。
また便利なコマンドとして ./bin/webpack-dev-server を実行することでWebpack Dev Serverが立ち上がります。
他にも--hot とhotオプションをつけることでホットローディングとなり、コンパイルの手間もカットできるので非常に便利です。

まとめ

Rails5.1のタイトルに Rails 5.1: Loving JavaScript とあるように、Rails5.1ではReactは様々なフロントエンドの流行が反映されています。
今回は主に環境構築や周辺の技術解説が中心となりましたが、今後は実際にどうReactのコードを書いていくか解説していきます。