バックエンドエンジニアの豊永です。
本記事では、Rails 8 環境で React を導入し、実際にコンポーネントを表示するまでの手順を、できるだけシンプルに紹介します。
やりたいこと
Rails 8 で、できるだけ簡単に React を利用できるようにしたいです。
背景
動作確認するために、作りたての Rails 環境に React を導入しようとしました。
※ 今回は TypeScript の導入は行いませんが、将来、JSX、TypeScript を利用していくことを想定しています。
Rails 7 からデフォルトになった import maps を利用して React の導入を試みました。
Rails で JavaScript を利用する - Railsガイド
導入まで出来ましたが、以下のことが分かりました。
- import maps 単体では、JSX や TypeScript が使えない、React のコンポーネントが書きづらい
- ビルドのステップがないので、当然ではある
- config/importmap.rb へ、紐付けの設定を書くのが大変
別の方法は JavaScript バンドラーを使うことになります。
以下が、候補でした。
- esbuild
- webpack
調べたところ、webpack は設定ファイル (webpack.config.js) に設定できる項目を理解するのが大変そうな印象だったので、esbuild で試すことにしました。
スムーズに出来たので、本記事では私の環境で動作確認できた方法を紹介します。
動作確認の環境
$ sw_vers
ProductName: macOS
ProductVersion: 15.4
BuildVersion: 24E248
$ ruby --version
ruby 3.4.2 (2025-02-15 revision d2930f8e7a) +PRISM [arm64-darwin24]
$ rails --version
Rails 8.0.2
手順
Rails のプロジェクトを作成
$ rails new . --database=sqlite3 --skip-javascript
※ すでにソースコード管理したいディレクトリにいる想定です。
gem ( jsbundling-rails ) の インストール
jsbundling-rails は、Rails で JavaScript のバンドラーの扱いを便利にするものです。
esbuild や、webpack などの JavaScript のバンドラーのインストーラーも用意されています。
ライブラリは、こちらです。
jsbundling-rails
Gemfile
+gem "jsbundling-rails", "~> 1.3"
$ bundle install
$ rails javascript:install:esbuild
react 周りのパッケージをインストール (react、react-dom)
$ yarn add react react-dom
App.jsx の作成
$ mkdir app/javascript/components
app/javascript/components/App.js
import React from "react";
const App = () => {
return <h1>Sample React (App.jsx)</h1>;
};
export default App;
React を利用するように application.js に処理を追加
app/javascript/application.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./components/App";
document.addEventListener("DOMContentLoaded", () => {
const root = document.getElementById("root");
if (root) {
ReactDOM.createRoot(root).render(<App />);
}
});
Controller ファイルと View ファイルを追加
app/controllers/sample_controller.rb
class SampleController < ApplicationController
def index
end
end
app/views/sample/index.html.erb
<div id="root"></div>
ルーティングの設定を追加
config/routes.rb
+ get "sample" => "sample#index"
esbuild のインストール
$ yarn add --dev esbuild
React のビルドコマンドの修正
package.json
- "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets"
+ "build": "esbuild app/javascript/application.js --bundle --sourcemap --outdir=app/assets/builds --loader:.js=jsx --loader:.jsx=jsx"
bin/dev で開発環境を一括起動
bin/dev は、foreman を使用して複数のプロセスを同時に管理・起動します。
つまり、 Rails サーバーと esbuild の watch モードが同時に起動します。
$ bin/dev -p 3006
※ -p はポート指定です。デフォルトでは 3000 が使われます。
http://localhost:3006/sample でアクセスすると、React コンポーネントが表示されます。
bin/dev の詳細
このコマンドを実行しています。
bin/dev
exec foreman start -f Procfile.dev --env /dev/null "$@"
Procfile に サーバー、フロントエンドの起動コマンドが書いてあります。
Procfile.dev
web: env RUBY_DEBUG_OPEN=true bin/rails server
js: yarn build --watch
手順としては、以上になります。
まとめ
Rails 8 環境で React を導入し、jsbundling-rails と esbuild を利用して簡単に React コンポーネントを表示するところまでの紹介でした。
本記事が、Rails 8 環境で React を導入する際の参考になれば幸いです。
Discussion