2017年6月26日

プログラミング

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

目次

  1. はじめに
  2. Yarnとは
  3. webpackとは
  4. React × Rails
  5. まとめ

はじめに

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

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

※他のアップデートはこちらをご覧ください。
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を作成・更新することでバージョンを固定できるということが挙げられます。
GemfileGemfile.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.jsxconfig/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が立ち上がります。
他にも--hothotオプションをつけることでホットローディングとなり、コンパイルの手間もカットできるので非常に便利です。

まとめ

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

Ruby on Railsのお仕事に関するご相談

Bageleeの運営会社、palanではRuby on Railsに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP