- 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参照)
- asset-pipelineの中で
-
この場合、Railsの
asset_pipelineを用いて、ReactのJS(JSX)ファイルも一緒にコンパイルされる- さらに、
sprockets-coffee-reactを使えば、CoffeeScriptを使ってReactを書くなんてこともできる
- さらに、
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
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