AssetPipelineなしでRailsのモデルのデータをReactで取得する方法

サーバ側はRailsでフロント側はReactみたいな構成でシステム開発していることってまあまああると思うのですが、

RailsとReactは全く別の機構なのでその間でどういう形でデータのやりとりをしていますでしょうか？

SPAなどでは問答無用でAPIで初期状態も含めてデータを取得してくるようなことをやってくるとは思うのですが、そこまでかっちりReactを使っている訳ではなく、初期状態はRailsでレンダリングして、残りのユーザからの入力などによるViewの変更はReactでみたいなことありますよね。

ただ、AssetPipelineなどを使って入ればrails-reactというgemを使って自動（あまり意識せずに）データを受け渡しできるのですが、そうではない場合にどのようにデータをやりとりするか以下にまとめます。

JavaScriptでDOMをパース

上に書いた内容でRails-Reactでデータの受け渡しをする場合は、基本的な考え方としてモデルの内容を一旦json形式に変換して、DOMにレンダリングします。

その処理自体を自分で書いても良いのですがさすがに辛いので、楽して上にも書いたrails-reactのReactComponentヘルパーを使います。このヘルパーの引数にKeyとモデルなどのデータを私てあげるとそれをjson形式に変換してレンダリングしてくれます。

(例)

<div data-react-class="Settings"
data-react-props='{"settings":[{"id":72,"user_id":1,
"space_id":"space-a",
"api_key":"hogehoge"},' >

実際のモデルだともっと行数が多いのですが、例では簡略化しています。

DOMへのモデルのレンダリングができたらあとはそれをページが描画されたタイミングなどでパースするだけです。

function getSettings(selector: string){
  const node = document.querySelector(`div[data-react-class=${selector}]`)
  const json = JSON.parse(node.getAttribute('data-react-props'))
  return json
}

こんな感じのメソッドを定義してあげて使い回せばjavascript側でも無事Railsのモデルのデータを取得ができます。

RailsとJavaScriptを確実に分けて開発したい！asset pipelineは使わないという主義の人はこうやって見ると良いかもしれません。