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

  • 149
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。
  • 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