Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
169
Help us understand the problem. What is going on with this article?
@jwako

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

More than 5 years have passed since last update.
  • 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

169
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
169
Help us understand the problem. What is going on with this article?