「rails react」でググると、react-railsは真っ先に見つかるんですが、まだ使い慣れてないとgemにお任せはちょっと不安だし、情弱なだけで実はもっといい方法あるんじゃないかと思い、いろいろ探してみました。
調べているとこんな記事あり、だいたい三つの方法があるとのこと。
3 ways to integrate Ruby on Rails + React + Flux | Open Minded Innovations
- react-railsを使う
- frontend/backendを切り離してあつかう
- RailsをAPIサーバーとして使い、API server と React+Flux Front end Appとして切り離してあつかう
そのほかも調べてみましたが、だいたいはどれかに当てはまる気がしました。
1.react-railsを使う
Method 1: Use React inside of Rails with react-rails
react-railsのgemを使う。一番simpleで導入しやすい方法です。
2.frontend/backendを切り離してあつかう
Method 2: React/Flux front end app within Rails
サンプル
react-webpack-rails-tutorial/client at master · justin808/react-webpack-rails-tutorial
解説blog
Fast Rich Client Rails Development With Webpack and the ES6 Transpiler - Rails on Maui
ざっくり言うと、frontendは完全にrailsに依存せず、webpackと呼ばれるcompileをしてbuildされたassetsをrails側が読み込む、というもの。
1.との大きな違いは、assetsまわりをrails asset pipelineに任せず独立させているところでしょうか。そのメリットとして以下のようなものが上げられます。
- Modulesを使える
- npmのpackage managerを使える
- ES6仕様で書ける
このあたりはアプリケーションの規模と、1.でどれだけ不便が生じるかもう少し検証してみる必要がありそうですが、commonJsのモジュール仕様で書けるのは個人的にはわかりやすくかけて便利だなと思います。railsでなく他のbackendとreactを使っていた人にとっては、このあたりをすでに前提でやっていることもあると思います。
webpackまでいかなくても RailsでReactを動かしてみる (browserify + watchify + reactify) - Qiita の記事のようにjs部分はrailsから独立してcompileさせる方法をとるのもここに入るかと思います。
3. RailsをAPIサーバーとして使い、API server / React/Flux Front end Appとして切り離す
Method 3: Separated Rails API and React/Flux front end app
React + Flux backed by Rails API - Part 1 | Fancy Pixel
2.と同じようにサーバーと分離していますが、こちらはrailsを完全にAPIサーバーとして扱い、よりfrontendAppとして独立しています。server renderingが必要ないならこっちのほうがよいっぽい。具体的にはもっと上のサンプルをいじってみる必要あり。