Contents
RailsとReact統合の基礎知識
Rails 8環境でReactを統合することで、バックエンドとフロントエンドを分離した開発が可能になります。これにより、UI/UXの柔軟性向上や開発効率の改善が期待できます。本ガイドでは、Vite + APIモードという最新手法でRailsとReactを統合する手順を解説します。
なぜRailsとReactを統合するか
Railsはバックエンドの安定性と迅速な開発性を兼ね備えていますが、単一の技術スタックでは現代的なUI構築に限界があります。一方で、Reactはコンポーネントベースの設計により、動的かつ使いやすいユーザーインターフェースを構築できます。この組み合わせにより、データ駆動型の高機能なアプリケーション開発が可能になります。
本ガイドで使用する技術スタック概要
本ガイドでは以下のような技術スタックを使用します。
| 技術 | 説明 |
|---|---|
| Rails 8 | バックエンドフレームワークとして採用 |
| Vite | Reactプロジェクトのビルドツールとして使用 |
| APIモード | RailsとReactを分離した通信形式を採用（ActionController::APIに基づく簡易なコントローラー構成） |
| jsbundling-rails | JavaScriptのバンドリングをRailsに統合 |
この組み合わせは、開発効率と運用性のバランスが取れた最新手法です。
jsbundling-railsの導入手順
Rails 8標準のjsbundling-railsを使用することで、JavaScriptバンドルをシンプルかつ効率的に管理できます。以下に導入手順を解説します。
Gemfileへの追加手順
-
Gemfileを開き、以下の行を追加してください：
ruby
gem 'jsbundling-rails' -
コマンドで依存関係をインストールします：
bash
bundle install -
rails app:javascript:installコマンドで初期設定を行います。
Webpackerからの移行注意点
- Rails 7以前ではWebpackerが使用されていましたが、Rails 8ではjsbundling-railsがデフォルトです。
- 移行する際には、以下のような手順を実施してください：
app/javascript/packsディレクトリ内のファイルを削除config/webpacker.ymlなどのWebpacker関連設定ファイルを削除package.jsonにViteやReactの依存関係を追加- 注意：Webpackerとjsbundling-railsは互換性がありません。プロジェクト内に両方存在している場合は、不要なライブラリを削除してください。
ViteでReactプロジェクトを構築する方法
Viteは高速な開発サーバーとビルドツールとして知られ、Reactプロジェクトの構築にも最適です。以下に手順を解説します。
create-viteコマンドの実行手順
-
Railsアプリケーションルート直下で以下のコマンドを実行します：
bash
npx create-vite@latest react-app --template react -
生成されたディレクトリに移動し、依存関係をインストールします：
bash
cd react-app
npm install -
開発サーバーを起動します：
bash
npm run dev
補足：ViteはTypeScriptやCSS Modulesもサポートしており、将来的な拡張性が高くなります。
APIモード設定時のディレクトリ構成例
RailsとReactをAPIモードで運用する場合の推奨的なディレクトリ構成は以下のようになります：
|
1 2 3 4 5 6 7 8 |
my_app/ ├── app/ │ └── javascripts/ # Rails側のJavaScript（API用） │ └── components/ # Reactコンポーネントが格納される ├── config/ │ └── vite.js # Vite設定ファイル └── react-app/ # Viteで生成されたReactプロジェクト |
重要：Viteの設定(
vite.config.js)では、Railsアプリケーションとの通信パスを正しく指定しないとエラーが発生します。
ReactコンポーネントをRailsビューに埋め込む方法
Railsビュー（ERBファイル）でReactコンポーネントを使用するには、react-rails gemやViteの設定が必要です。以下に手順を示します。
react-rails gemの導入
-
Gemfileに以下の行を追加します：
ruby
gem 'react-rails' -
依存関係をインストール後、
rails generate react:installコマンドで初期設定を行います。
ERBテンプレート内のReactレンダリング
-
Railsビュー（例:
app/views/home/index.html.erb）に以下のように記述します：
erb
<%= react_component("MyComponent", { message: "Hello from Rails!" }) %> -
ReactコンポーネントはViteで生成されたプロジェクト内に配置し、エクスポートする必要があります。
注意：Reactコンポーネントが正しくロードされない場合は、Viteの設定ファイル(
vite.config.js)を確認してください。
CORS設定とAPI通信の確認
RailsからReactアプリケーションにデータを送信する際には、CORS（クロスドメインリソース共有）の設定が不可欠です。
Rails側のCORS設定手順
-
config/application.rbに以下の行を追加します：
ruby
config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'http://localhost:3000' # Railsがデフォルトで起動するポート
resource '*', headers: :any, methods: [:get, :post, :options]
end
end -
バックエンドを再起動して設定を反映します。
Fetch APIでのデータ取得サンプル
Reactアプリケーション側でRailsからデータを取得する例です：
|
1 2 3 4 5 |
fetch('http://localhost:3000/api/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error fetching data:', error)); |
補足：APIモードでは、RailsがJSON形式でレスポンスを返す必要があるため、コントローラーの設定も確認してください。
データバインディング実装例
RailsとReact間でのデータ受け渡しには、JSONフォーマットを使用します。以下に基本的な手順を示します。
Railsコントローラーからのデータ送信
- コントローラーでデータをJSON形式で返す例です：
ruby
def index
@items = Item.all
render json: @items, each_serializer: ItemSerializer
end
Reactコンポーネントでの受信処理
- 受け取ったデータをReactコンポーネントで表示する例です：
javascript
useEffect(() => {
fetch('http://localhost:3000/api/items')
.then(response => response.json())
.then(data => setItems(data))
}, []);
return (
))}
);
注意：Reactコンポーネントは「ステート管理」に
useStateやuseEffectを使用して、データの変更を反映してください。
まとめ
本記事では、RailsとReactを統合するための基礎知識と実装手順を解説しました。以下のポイントをおさえてください：
- jsbundling-railsでRails 8に最適なJavaScriptバンドリング環境を構築
- Vite + APIモードでフロントエンド開発の効率化を実現
- ReactコンポーネントをERBビューに埋め込む方法とCORS設定の注意点
- RailsとReact間でのデータバインディングにおけるJSON送信の仕組み
本ガイドに従って環境構築を行い、Reactコンポーネントが正しく表示されることを確認してください。問題が発生した場合はコメント欄で質問ください。