はじめに
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のコードを書いていくか解説していきます。
関連記事:
Author Profile
