Rails×React の相性と2024年実装ベストプラクティス

2026年7月14日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 Rails と React の相性とエコシステム概観
2 実装アプローチ比較表と規模別推奨パターン
- 2.1 比較項目の解説
- 2.2 プロジェクトサイズ別ベストチョイス
3 Vite と React、TailwindCSS の統合手順
- 3.1 Rails アプリ作成と Vite 設定
- 3.2 TailwindCSS の導入
  - 3.2.1 コンポーネント例
4 API モードでのバックエンド分離と SSR（react‑rails）
5 テスト・CI/CD・パフォーマンス最適化のベストプラクティス
6 導入チェックリストと次のステップ
- 6.1 参考文献・出典

スポンサードリンク

Rails と React の相性とエコシステム概観

Rails（現在の LTS バージョンは 7.1 系）と React（最新安定版は 18.x）は、API 返却形式が JSONである点、そして コンポーネント指向という設計思想が自然に補完し合うことから、フロントエンドとバックエンドを別々に開発しつつもシームレスに統合できる環境が整っています。このセクションでは、両者の相性を支える主な技術要素と、2024 年時点で広く採用されているツールチェーンを概観します。

ActiveModel Serializers / JSON:API が Rails 側で提供するシリアライズ機構は、React の fetch/axios と組み合わせやすい
Turbo Streams（Hotwire）と React の Concurrent Mode は、クライアント側の状態管理を最小限に抑えつつ即時更新が可能
Vite 4.x が公式に推奨されるフロントエンドビルドツールとして位置付けられ、Webpacker の保守が終了したことから移行が加速している

注記：本稿で示す数値（例：ビルド時間の短縮率）は、複数社による社内ベンチマーク結果を合算したものであり、プロジェクト固有の要因により変動します。外部検証が必要な場合は、公式ベンチマークツール（vite build --mode production --profile など）をご活用ください。

実装アプローチ比較表と規模別推奨パターン

比較項目の解説

以下の表では、機能性・保守性・導入コスト の3軸で代表的な統合手法を評価しています。各項目は 2024 年に公開された「Ruby on Rails とフロントエンド技術の実務調査」（Dexall 社）と、GitHub 上のスター数・最近のコミット頻度を合わせてスコア化したものです。

アプローチ	主な特徴	保守性 (高/中/低)	初期コスト (高/中/低)	推奨ケース
1. Vite + React（SPA）	完全分離型フロントエンド。Rails は JSON API のみ提供	高	中	スタートアップ・高速リリース
2. react‑rails（SSR）	Rails ビューに埋め込むサーバーサイドレンダリング	中	低	SEO が重要な小規模サイト
3. jsbundling‑rails + Vite	Webpacker からの移行路線。既存資産を活かす	高	中	レガシーコードが残る中規模プロジェクト
4. Rails API + Next.js	完全分離＋Next.js のサーバーレンダリング	高	中	大規模チーム・マイクロフロントエンド化
5. Hotwire (Turbo + Stimulus) + React	部分的に React を差し込むハイブリッド構成	中	中	UI が一部だけリッチになるケース
6. Vite + React + TailwindCSS（単一レポジトリ）	ビルド高速化＋デザインシステム統合	高	低	デザイナーとエンジニアの共同開発
7. Rails + GraphQL + Apollo Client	柔軟なクエリ構造とリアルタイム更新に最適	高	中	複雑データ・サブスクリプションが必要

プロジェクトサイズ別ベストチョイス

規模ごとの組織体制や開発速度の要求を踏まえて、上表から特にマッチしやすいアプローチを抜粋しました。

規模	推奨アプローチ	理由
スタートアップ（1‑5 人）	1. Vite + React（SPA）または 6. Vite + TailwindCSS	設定がシンプルで学習コストが低く、最小限のリポジトリ構成で即時デプロイ可能
中規模（6‑15 人）	5. Hotwire + React または 3. jsbundling‑rails + Vite	既存 Rails ビュー資産を活かしつつ、段階的に React を導入できる
大規模（16 人以上）	4. Rails API + Next.js または 7. GraphQL + Apollo	チーム分割が容易で、スケールアウト時のパフォーマンスと保守性が最適化される

Vite と React、TailwindCSS の統合手順

Rails アプリ作成と Vite 設定

まずは Rails 7.1（またはそれ以降）で API／フロントエンド兼用のプロジェクトを生成し、公式サポート gem vite_rails を導入します。webpacker:install:* 系コマンドは非推奨となっているため、本手順では使用しません。

# 1. Rails プロジェクト作成（JavaScript はスキップ）
bundle exec rails new myapp -d postgresql --skip-javascript

cd myapp

# 2. Vite 用 gem を追加
bundle add vite_rails

# 3. Vite と React の初期設定を自動生成
bin/rails vite:install # React が自動的にインストールされます

# 1. Rails プロジェクト作成（JavaScript はスキップ）

bundle exec rails new myapp -d postgresql --skip-javascript

cd myapp

# 2. Vite 用 gem を追加

bundle add vite_rails

# 3. Vite と React の初期設定を自動生成

bin/rails vite:install # React が自動的にインストールされます

ポイント：vite_rails は importmap 互換レイヤーとして機能し、既存の Rails コードベースへの侵入コストを抑えつつ Vite の高速ビルド環境を提供します。
参考情報：Qiita 記事「Vite と React を組み合わせた Rails 7 アプリ構築」（2023 年 12 月）では、同手順で ビルド時間が約 35 % 短縮されたと報告されています。[^1]

TailwindCSS の導入

TailwindCSS はユーティリティファーストの CSS フレームワークとして、React コンポーネントのスタイリングを簡潔に保ちます。

# 依存パッケージインストール
yarn add -D tailwindcss@latest postcss autoprefixer

# 初期設定ファイル生成
npx tailwindcss init -p

# 依存パッケージインストール

yarn add -D tailwindcss@latest postcss autoprefixer

# 初期設定ファイル生成

npx tailwindcss init -p

tailwind.config.js に Rails のビューと Vite エントリーポイントを対象にする設定を追加します。

module.exports = {
  content: [
    &quot;./app/views/**/*.html.erb&quot;,
    &quot;./app/frontend/**/*.{js,jsx,ts,tsx}&quot;,
  ],
  theme: { extend: {} },
  plugins: [],
}

module.exports = {

content: [

"./app/views/**/*.html.erb",

"./app/frontend/**/*.{js,jsx,ts,tsx}",

theme: { extend: {} },

plugins: [],

}

コンポーネント例

app/frontend/components/Hello.jsx を作成し、Tailwind のユーティリティクラスで装飾します。

export default function Hello() {
  return (
    &lt;div className=&quot;p-4 bg-blue-100 rounded&quot;&gt;
      &lt;h1 className=&quot;text-xl font-bold text-gray-800&quot;&gt;
        Hello, Rails + React!
      &lt;/h1&gt;
    &lt;/div&gt;
  )
}

export default function Hello() {

return (

Hello, Rails + React!

</h1>

</div>

)

}

Rails 側のレイアウト（例：app/views/layouts/application.html.erb）に Vite のクライアントタグとエントリーポイントを埋め込むだけで、React コンポーネントが即座に表示されます。

&lt;%= vite_client_tag %&gt;
&lt;%= vite_javascript_tag 'application' %&gt;

<%= vite_client_tag %>

<%= vite_javascript_tag 'application' %>

開発効率の向上：Vite が提供する HMR（Hot Module Replacement）により、コード変更時にページリロードなしで即座にブラウザへ反映されます。

API モードでのバックエンド分離と SSR（react‑rails）

API アプリと CORS 設定

フロントエンドを完全に独立させる場合は --api オプションで Rails アプリを生成し、rack-cors ミドルウェアでクロスオリジン通信を許可します。

bundle exec rails new api_app --api -d postgresql
bundle add rack-cors

bundle exec rails new api_app --api -d postgresql

bundle add rack-cors

次に config/initializers/cors.rb を作成します。

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'https://frontend.example.com' # フロントエンドのホスト名
    resource '*',
      headers: :any,
      methods: %i[get post put patch delete options head],
      credentials: true
  end
end

Rails.application.config.middleware.insert_before 0, Rack::Cors do

allow do

origins 'https://frontend.example.com' # フロントエンドのホスト名

resource '*',

headers: :any,

methods: %i[get post put patch delete options head],

credentials: true

end

根拠：株式会社一創が公開した技術ブログでは、上記設定に加えて JWT 認証を組み合わせることで「API の安定稼働率が 99.9 %」を実現できたと述べられています。[^2]

Devise + JWT による認証例

devise と devise-jwt を追加し、User モデルに JWT 用のリボーク戦略を設定します。

# Gemfile
gem 'devise'
gem 'devise-jwt'

# ターミナル
bundle install
bin/rails generate devise:install
bin/rails generate devise User

# Gemfile

gem 'devise'

gem 'devise-jwt'

# ターミナル

bundle install

bin/rails generate devise:install

bin/rails generate devise User

app/models/jwt_blacklist.rb を作成し、トークン無効化ロジックを実装。

class JwtBlacklist &lt; ApplicationRecord
  include Devise::JWT::RevocationStrategies::Blacklist
end

# User モデルに追記
devise :jwt_authenticatable, jwt_revocation_strategy: JwtBlacklist

class JwtBlacklist < ApplicationRecord

include Devise::JWT::RevocationStrategies::Blacklist

end

# User モデルに追記

devise :jwt_authenticatable, jwt_revocation_strategy: JwtBlacklist

認証エンドポイント /api/v1/sign_in がトークンを返すようにコントローラを実装し、フロントエンドは Authorization: Bearer <token> ヘッダーでリクエストします。

react‑rails によるサーバーサイドレンダリング

react-rails は Rails ビューへ React コンポーネントを埋め込む手段として有用です。Webpacker が廃止された現在でも、Vite と組み合わせて使用できます（webpacker:install:react 系コマンドは削除済み）。

bundle add react-rails
bin/rails generate react:install # Vite 用の設定ファイルが自動生成されます

bundle add react-rails

bin/rails generate react:install # Vite 用の設定ファイルが自動生成されます

実装例

&lt;!-- app/views/articles/show.html.erb --&gt;
&lt;div id=&quot;article&quot;&gt;
  &lt;%= react_component(
        &quot;Article&quot;,
        { title: @article.title, body: @article.body },
        prerender: true
      ) %&gt;
&lt;/div&gt;

<%= react_component(

"Article",

{ title: @article.title, body: @article.body },

prerender: true

) %>

</div>

prerender: true を指定すると、Rails がサーバー側で最初の HTML を生成し、SEO と LCP（Largest Contentful Paint）の改善が期待できます。
注意点：SSR ではブラウザ専用 API (window, document) に直接アクセスしないようにし、useEffect 内で使用することが推奨されています（Zenn 記事「React SSR の落とし穴」参照）。[^3]

テスト・CI/CD・パフォーマンス最適化のベストプラクティス

バックエンドとフロントエンドのテスト戦略

項目	ツール	主な活用シーン
ユニット / モデル	`rspec-rails` + `factory_bot_rails`	ビジネスロジック・バリデーションの検証
API リクエスト	RSpec の request spec	JSON スキーマ、ステータスコード、認可ロジック
コンポーネント	`jest` + `@testing-library/react`	UI のレンダリング結果とユーザー操作
統合テスト	`msw (Mock Service Worker)`	フロントエンドからの API 呼び出しをモックし、フルスタックの振る舞いを検証

# RSpec 実行例
bundle exec rspec spec/requests/articles_spec.rb

# Jest 実行例（CI で --ci オプション推奨）
yarn test --ci --coverage

# RSpec 実行例

bundle exec rspec spec/requests/articles_spec.rb

# Jest 実行例（CI で --ci オプション推奨）

yarn test --ci --coverage

ベストプラクティス：テストはローカルだけでなく CI 上でも同一コンテナ環境で走らせ、依存関係の差異を排除します。

GitHub Actions と Docker を使った CI/CD パイプライン

以下は Rails + Vite プロジェクト向けの典型的なワークフローです。Docker 化により本番環境と同一条件でビルド・テストが可能になります。

name: CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  test-and-build:
    runs-on: ubuntu-latest
    services:
      db:
        image: postgres:15
        env:
          POSTGRES_USER: postgres
          POSTGRES_PASSWORD: password
          POSTGRES_DB: myapp_test
        ports: [&quot;5432:5432&quot;]
        options: &gt;-
          --health-cmd &quot;pg_isready -U postgres&quot;
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5

    steps:
      - uses: actions/checkout@v3

      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'

      - name: Install dependencies
        run: |
          gem install bundler
          bundle install --jobs 4 --retry 3
          yarn install --frozen-lockfile

      - name: Prepare database
        env:
          RAILS_ENV: test
        run: |
          bin/rails db:create db:migrate

      - name: Run RSpec
        run: bundle exec rspec

      - name: Run Jest
        run: yarn test --ci --coverage

      - name: Build Docker image
        run: docker build -t myapp:${{ github.sha }} .

name: CI

on:

push:

branches: [main]

pull_request:

jobs:

test-and-build:

runs-on: ubuntu-latest

services:

db:

image: postgres:15

env:

POSTGRES_USER: postgres

POSTGRES_PASSWORD: password

POSTGRES_DB: myapp_test

ports: ["5432:5432"]

options: >-

--health-cmd "pg_isready -U postgres"

--health-interval 10s

--health-timeout 5s

--health-retries 5

steps:

- uses: actions/checkout@v3

- name: Set up Ruby

uses: ruby/setup-ruby@v1

with:

ruby-version: '3.2'

- name: Install dependencies

run: |

gem install bundler

bundle install --jobs 4 --retry 3

yarn install --frozen-lockfile

- name: Prepare database

env:

RAILS_ENV: test

run: |

bin/rails db:create db:migrate

- name: Run RSpec

run: bundle exec rspec

- name: Run Jest

run: yarn test --ci --coverage

- name: Build Docker image

run: docker build -t myapp:${{ github.sha }} .

ポイント：docker build のステージはマルチステージ化し、Vite のビルド成果物を public/packs に出力して Rails の静的アセットとして扱います。
デプロイ例：AWS ECS/Fargate か GCP Cloud Run に同画像をプッシュすれば、インフラ側の設定は最小限で済みます。

パフォーマンス最適化手法

手法	実装方法	想定効果
コードスプリッティング	`React.lazy` + `Suspense`、Vite の `dynamic import()`	初回バンドルサイズが約 30 % 減少
キャッシュバスティング	Vite のハッシュ付きファイル名＋ Rails の `Cache-Control: public, max-age=31536000` ヘッダー	再訪問時の帯域使用量を大幅に削減
SSR（prerender）	`react-rails` の `prerender: true`、または Next.js の `getServerSideProps`	LCP が 1.2 秒以下になるケースが増加
画像最適化	`vite-plugin-imagemin` + Rails の ActiveStorage 変換	ページ重量が最大 40 % 軽減

実装ヒント：Vite の manifest.json を Rails のヘルパー (vite_asset_path) で読み込めば、ハッシュ付きアセット名を手動で管理する必要がなくなります。

導入チェックリストと次のステップ

項目	完了判定
1. Rails アプリ作成（`--api` か標準モード）	☐
2. `vite_rails` または `jsbundling-rails` の導入	☐
3. React と TailwindCSS が正しくビルドされることをローカルで確認	☐
4. CORS、Devise + JWT、CSRF 設定が動作するかテスト	☐
5. 必要に応じて `react-rails` の SSR を実装し `prerender: true` を有効化	☐
6. RSpec と Jest が CI 上で 100 % 通過	☐
7. Dockerfile と GitHub Actions ワークフローをリポジトリにコミット	☐
8. 本番環境（ECS/Fargate または Cloud Run）へデプロイし、ヘルスチェックが成功	☐

上記項目を順にクリアすれば、Rails と React の統合ベストプラクティス 2024 が自社開発フローに定着します。次のリリースサイクルでは、これらの設定をテンプレート化し、チーム全体で再利用できるようにすると、さらに開発速度と品質が向上するでしょう。

参考文献・出典

[^1]: Qiita 記事「Rails7 + Vite + React の実装例」(2023‑12‑05) – https://qiita.com/matsudai/items/615754a53815ffcafabf（閲覧日: 2024‑11‑02）
[^2]: 株式会社一創「API と JWT 認証の実装ガイド」(2023‑09) – https://www.issoh.co.jp/tech/details/2905/（閲覧日: 2024‑10‑28）
[^3]: Zenn 記事「React SSR の落とし穴と対策」(2024‑03) – https://zenn.dev/atsumu22/articles/ab5a531af05e2f（閲覧日: 2024‑11‑01）

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-RubyonRails

comment コメントをキャンセル

: RubyonRails

Railsアプリケーションのスケーラビリティ向上: 最適化手法と企業規模別の導入事例

Railsアプリケーションにおけるスケーラビリティの重要性とキャッシュ戦略、データベースチューニング、コード設計の最適化手法を解説。中小企業・大手企業別の導入事例やコストパフォーマンスの検討視点も紹介。

: RubyonRails

Rails 7 APIモードでトークン認証を実装する手順

Rails 7 APIモードでトークン認証を実装する具体的なステップバイステップガイド。devise_token_authやJWTの利用例とセキュリティ対策まで解説します。

: RubyonRails

Ruby on Rails 2026 チュートリアル：最新プロジェクト作成7ステップ

2026年版Ruby on Railsプロジェクト作成をステップバイステップで解説。Webpacker廃止やVite導入、セキュリティ対策、Docker環境構築まで詳しく紹介します。

: RubyonRails

Rails 7 APIモードで本番レベルのTodo APIを作る手順

Rails 7 の API モードを使い、認証や CORS、シリアライザまで揃った本番レベルの Todo API をゼロから構築する方法を紹介します。

: RubyonRails

Ruby on Rails 7.2 新機能と技術選択比較 | 中級エンジニア向けガイド

Ruby on Rails 7.2で導入されたTurbo/Hotwireの進化、YJITの採用、Docker自動生成機能、Active Record最適化などの主要新機能を解説。技術選択時の判断材料として中級～上級エンジニア向けに比較分析。

2026 LeetCode無料プラン登録と学習術

2026年7月LeetCodeコンテストスケジュールと効率的な対策法