【完全ガイド】RailsとReactでSPAを構築する方法

「RailsとReactを組み合わせてSPA（シングルページアプリケーション）を開発したいが、どのように連携すればよいかわからない」とお悩みではありませんか？

本記事では、RailsとReactを連携させてSPAを構築する方法を、環境構築から基本的な実装まで、わかりやすく解説します。

RailsとReactの連携方法
環境構築手順
Reactコンポーネントの作成とRailsへの組み込み
1. 例：ユーザー一覧の表示
SPAルーティングの実装
1. ルーティングの設定
APIとの通信とデータの取得
1. Railsコントローラーの作成
2. ルーティングの設定
まとめ

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コントローラーの作成

1	`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）の導入など、さらなる機能拡張を検討してみてください。