「RailsとReactを組み合わせてSPA（シングルページアプリケーション）を開発したいが、どのように連携すればよいかわからない」とお悩みではありませんか？
本記事では、RailsとReactを連携させてSPAを構築する方法を、環境構築から基本的な実装まで、わかりやすく解説します。
RailsとReactの連携方法
RailsとReactを連携させる方法は主に以下の3つがあります：
1. RailsのビューにReactコンポーネントを組み込む
react-rails gemを使用して、RailsのビューにReactコンポーネントを直接組み込む方法です。
2. RailsをAPIサーバーとして使用し、Reactをフロントエンドとして分離する
RailsをAPI専用のバックエンドとして構築し、Reactを別プロジェクトとしてフロントエンドを構築する方法です。
3. React on Railsを使用する
react_on_rails gemを使用して、RailsとReactを統合する方法です。
本記事では、2番目の方法である「RailsをAPIサーバーとして使用し、Reactをフロントエンドとして分離する」方法を採用します。
環境構築手順
前提条件
• Ruby 3.1以上
• Rails 7.0以上
• Node.js 16以上
• Yarn
Rails APIの作成
rails new myapp --api -T -d postgresql
cd myapp
bundle install
rails db:create
CORSの設定
config/initializers/cors.rbを作成し、以下の内容を追加します：
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'http://localhost:3000'
resource '*',
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head],
credentials: true
end
end
Reactアプリの作成
npx create-react-app frontend
cd frontend
npm install axios react-router-dom
npm start
Reactコンポーネントの作成とRailsへの組み込み
Reactでコンポーネントを作成し、RailsのAPIと通信することでデータを取得・表示します。
例：ユーザー一覧の表示
frontend/src/components/UserList.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
axios.get('http://localhost:3001/api/users')
.then(response => setUsers(response.data))
.catch(error => console.error(error));
}, []);
return (
<div>
<h2>ユーザー一覧</h2>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
};
export default UserList;
SPAルーティングの実装
React Routerを使用して、クライアントサイドのルーティングを実装します。
ルーティングの設定
frontend/src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import UserList from './components/UserList';
function App() {
return (
<Router>
<Routes>
<Route path="/users" element={<UserList />} />
</Routes>
</Router>
);
}
export default App;
APIとの通信とデータの取得
Rails側でAPIエンドポイントを作成し、Reactからデータを取得します。
Railsコントローラーの作成
rails generate controller api/users
app/controllers/api/users_controller.rb
ルーティングの設定
config/routes.rb
Rails.application.routes.draw do
namespace :api do
resources :users, only: [:index]
end
end
まとめ
本記事では、RailsとReactを連携させてSPAを構築する方法について解説しました。
• RailsをAPIサーバーとして構築
• Reactでフロントエンドを構築
• CORSの設定
• React Routerによるルーティング
• Axiosを使用したAPIとの通信
この構成により、フロントエンドとバックエンドを分離し、それぞれを独立して開発・保守することが可能になります。
今後は、認証機能の追加や、状態管理ライブラリ（例：Redux）の導入など、さらなる機能拡張を検討してみてください。
Japanese 
English