【Rails7】特定のviewsで部分的にReactを使う

「ここのページだけReact使いたいんだよな〜」とか「ページのここの部分にReact入れ込みたいんだよな〜」ということはありませんか？
今回はそんなあなたにReactを部分的に使用する方法を紹介します。

こちらの記事を応用していきます。↓ www.mof-mof.co.jp

下準備
Reactの導入方法はこちらの記事をご参照ください↓↓
www.mof-mof.co.jp

手順

1. package.json に記載されているビルドスクリプトのビルド対象に app/javascript/*.* が入っていることを確認する。

入っていない場合は以下を参考に書き換えてみてください。

"build:js": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds"

2. Reactで実装と、renderの設定をする

app/javascripts/mofmof.tsx

import React from 'react';
import { createRoot } from 'react-dom/client';

export const Mofmof = () => {
  return (
    <>
      <div>mofmof</div>
    </>
  );
};

const container = document.getElementById('mofmof');
if (container) {
  const root = createRoot(container);

  document.addEventListener('DOMContentLoaded', () => {
    root.render(<Mofmof />);
  });
}

3. viewsファイルのReactを使いたい箇所に以下を追記する

<%= javascript_include_tag "mofmof", "data-turbo-track": "reload", type: "module" %>

色んなページでReactを使いたい場合は、renderの設定を別ファイルに分けて共通化するのがよいと思います。

終わり

この方法だとReact側でsessionを管理しなくても、Rails側で使用しているsession（ログイン情報など）を利用できます。
そのため、ReactからRailsのAPIを叩いたときにログインユーザーが閲覧できるデータだけ取得する時などに便利かと思います。

また、要件によっては工数を削減することにもつながると思うので、個人開発するときには重宝するかもしれません。

（ちょこっと動的にしたい！というときなんかは、ReactではなくHotwireを使うのがRails7風だと思いました。）