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月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

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

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

簡単に自分で作れるWebAR

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

palanARへ
palanar

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

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

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

yamakawa

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

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

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

kobori

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

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

sasai

ささい エンジニア

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

damien

Damien

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

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

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

miyagi

ogawa

ogawa

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

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

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

sugimoto

sugimoto

CONTACT PAGE TOP