ReactとRailsの関係性とサンプルアプリケーションのまとめ

• RailsのフロントエンドのJSフレームワーク(ライブラリ)として最近話題のReactJSを採用することを考える
• その際、ReactとRailsとの関係性にいくつかのパターンがありえるので、そのパターンを紹介したいと思います
• ポイントは、どこまでReactとRailsを密接に関係させるか
• 大きくは、次の3つのパターンに分けられます
  • 1.RailsのViewの中にReactを埋め込む方法
  • 2.Railsプロジェクトの中にReactのフロントエンドアプリを埋め込む方法
  • 3.Rails APIとReactのフロントエンドアプリを別々にする方法
• 以下では、少し詳しくこれらのパターンを見ていきます
• どれが良いとかいうのは、それぞれのPros&Consがあるので、一概には言えないと思いますが、そのプロジェクトのニーズに合わせて適切な選択をしていくんだと思います
• 他にもこういうパターンがあるとか、間違ってるとかあれば、ぜひご指摘お願いいたします

1.RailsのViewの中にReactを埋め込む方法

• react-railsというgemが公開されているので、これを使うのが良い

• react-railsがやっていることは主に次の通り

  • asset-pipelineの中で.js.jsxを変換してくれる
  • Viewの中で、react_componentヘルパーを用いて、Reactのコンポーネントをレンダリングしてくれる
  • prerender: trueオプションを付ければ、サーバーサイドレンダリングも実行可能(1-2参照)

• この場合、Railsのasset_pipelineを用いて、ReactのJS(JSX)ファイルも一緒にコンパイルされる

  • さらに、sprockets-coffee-reactを使えば、CoffeeScriptを使ってReactを書くなんてこともできる

reactjs/react-rails · GitHub

1-1.React -> Rails

• RailsでレンダリングしたViewの中で、Reactが実行される
• ReactからのAjaxリクエストによって、Railsから取得したjsonを用いて、Virtual DOMを組み立てる
• 普通に考えるとこれがもっともシンプルに記述できると思います

sample app

bigardone/rails_and_react · GitHub

1-2.Rails -> React : サーバーサイドレンダリング

• RailsでレンダリングするViewの中に、jsonを埋め込んで、サーバーサイドでJSを実行して初期表示をすることが可能
• いわゆるサーバーサイドレンダリングというやつで、これを使えば、初期のロード時間を短縮し、SEOにも対応できます

sample app

bensmithett/sample-react-rails-app · GitHub

1-3. Rails + React + Flux

• react-railsをベースにしているが、Railsプロジェクト内にFluxアーキテクチャを取り入れた例
• このサンプルでは、Flux実装にaltを採用
• asset管理は、rails-assetsを利用

sample app

zhubert/react-flux-rails-demo

goatslacker/alt

2.Railsプロジェクトの中にReactのフロントエンドアプリを埋め込む方法

2-1. Rails + React

• Railsのasset-pipelineの仕組みを使わずに、フロントエンドアプリケーションを構築
  • 当然react-railsは、使わない
  • Reactのassetsは、webpackなどを使ってコンパイル
• ただし、Railsプロジェクト内にclientディレクトリなどを切って管理される
• アプリケーションとしては、分離されているものの、プロジェクトとしては1つに収めることができるので、3.よりも多少開発はしやすいか
• npmモジュールを使ったり、ES6で記述できたりするので便利だけど、フロントエンドの開発環境をセットアップするのが大変
• そして、フロントエンド、サーバーサイド両方のサーバーを起動する必要がある

sample app

justin808/react-webpack-rails-tutorial · GitHub

3.Rails APIとReactのフロントエンドアプリを別々にする方法

• RailsはAPIに徹し、jsonを返すだけにとどめる
• Reactで、ルーティングやViewのレンダリングを担当する
• この場合、Reactは、Fluxアーキテクチャと共に用いるのが良いと思う
• サーバーサイドレンダリングを考えないなら、フロントとサーバーを明確に分離できる
• 完全に別のプロジェクトとして動ける反面、開発のオーバーヘッドは高くなる(2.同様別サーバー立てて開発したり。)
• APIベースのアプリケーション全般に言えるが、別途以下の事を考慮する必要がでてくる
  • API認証(Tokenベース/Cookieベース)
  • CORS

sample app

FancyPixel/small-frontend · GitHub

React + Flux backed by Rails API - Part 1 | Fancy Pixel

React + Flux backed by Rails API - Part 2 | Fancy Pixel

React + Flux backed by Rails API - Part 3 | Fancy Pixel

Refs.

• この素晴らしい記事を読んだらそれでおしまいなのですが、サンプルアプリとセットで整理してみたいと思い、記事にしました。
• 他にも、react + railsのサンプルアプリがあれば、ぜひご紹介ください。

3 ways to integrate Ruby on Rails + React + Flux | Open Minded Innovations

react-rails // Speaker Deck

React and Rails