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
関連記事

2021年4月16日
ElasticBeanstalkでAmazonLinux2 Ruby環境にデプロイする

2021年3月23日
Google Analyticsの新バージョン!「Google Analytics 4(GA4)」のレポートデータをRubyで取得する

2020年12月16日
Ruby Enumerableモジュールを理解して繰り返し処理を書く際の選択肢を増やす

2020年12月14日
SendGridのEvent Webhookについて調査してみた

2020年12月7日
ActionTextとrails5系でも使えるWYSIWYGエディターgemをいろいろ試してみた

2019年12月16日
Active Storageを使ってS3にファイルをダイレクトアップロードする
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
Miu マーケター
ドイツでWEBマーケティングしています。
しんのき エンジニア
主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
furuya エンジニア
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
うえまつゆい エンジニア
サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

Damien
WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト デザイナー

かっきー

まりな

suzuki

taro
xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。
miyagi

ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。
