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](https://github.com/reactjs/react-rails)

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

#### sample app

[bigardone/rails_and_react · GitHub](https://github.com/bigardone/rails_and_react)

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

#### sample app

[bensmithett/sample-react-rails-app · GitHub](https://github.com/bensmithett/sample-react-rails-app)

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

#### sample app

[zhubert/react-flux-rails-demo](https://github.com/zhubert/react-flux-rails-demo)

[goatslacker/alt](https://github.com/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](https://github.com/justin808/react-webpack-rails-tutorial)

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

#### sample app

[FancyPixel/small-frontend · GitHub](https://github.com/FancyPixel/small-frontend)

[React + Flux backed by Rails API - Part 1 | Fancy Pixel](http://fancypixel.github.io/blog/2015/01/28/react-plus-flux-backed-by-rails-api/)

[React + Flux backed by Rails API - Part 2 | Fancy Pixel](http://fancypixel.github.io/blog/2015/01/29/react-plus-flux-backed-by-rails-api-part-2/)

[React + Flux backed by Rails API - Part 3 | Fancy Pixel](http://fancypixel.github.io/blog/2015/01/30/react-plus-flux-backed-by-rails-api-part-3/)

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

[3 ways to integrate Ruby on Rails + React + Flux | Open Minded Innovations](http://www.openmindedinnovations.com/blogs/3-ways-to-integrate-ruby-on-rails-react-flux)

[react-rails // Speaker Deck](https://speakerdeck.com/hokaccha/react-rails-1)

[React and Rails](http://rny.io/rails/react/2014/07/31/reactjs-and-rails.html)