2017年6月26日
プログラミング
Rails5.1でReact を動かそう【webpackerによる環境構築編】
はじめに
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のコードを書いていくか解説していきます。
Ruby on Railsのお仕事に関するご相談
Bageleeの運営会社、palanではRuby on Railsに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか？
0
0
AUTHOR
Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan（旧eishis）を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
関連記事
2021年12月23日
RailsアプリにGoogle Mapから緯度経度情報を取得する機能を追加する
2021年12月22日
RDBでセットメニューを表現する方法
2021年12月11日
Railsでツリー構造アプリを作ってみた
2021年12月10日
Dockerで作成したRailsアプリケーションをHerokuにデプロイする
2021年12月9日
モデルに書いていたメソッドをPOROに切り出してみた！
2021年12月7日
gem cancancanを使ってみた！
アプリでもっと便利に！気になる記事をチェック！
記事のお気に入り登録やランキングが表示される昨日に対応！毎日の情報収集や調べ物にもっと身近なメディアになりました。
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
