Rails × React > Vue（2025年版）

Rails × React / Vue（2025年版）

Rails とモダンフロントエンド（React / Vue）を組み合わせる方法のまとめです。 Rails 7 以降は Webpacker が廃止され、フロントエンドの統合方法が大きく変わりました。

2025年現在では、次の 3 方式が主流です：

• Rails を API 化して、React/Vue を完全に別アプリに分離（SPA）
• Rails に Vite を導入して、フロントを Rails 内に作る
• Importmap + CDN を使って最低限だけ React/Vue を使う（小規模向け）

ここでは React と Vue の概要と、Rails での導入方法サンプルを紹介します。

---

■ React と Vue のざっくり比較

項目	React	Vue
特徴	UI ライブラリ（View に特化）	フル機能のフレームワークに近い
学習コスト	JSX・Hooks に慣れが必要	直感的で学びやすい
書き方	JSX（JavaScript 内に HTML）	SFC（.vue ファイル）で構造が明確
適性	大規模アプリ、柔軟な設計	中小〜大規模、テンプレート志向

Rails と組み合わせる場合、どちらも “Rails API + SPA” 構成と相性が良い です。

---

■ 1. Rails を API モードにして React/Vue と連携する（おすすめ構成）

最も一般的で、保守性も高い構成です。

▼ Rails の API モード生成

rails new myapp --api

• HTML レンダリングなし
• コントローラは JSON のみ返す
• React/Vue 側で画面を構築

▼ Controller

class Api::PostsController ＜ ApplicationController
  def index
    render json: Post.all
  end

  def create
    post = Post.new(post_params)
    if post.save
      render json: post, status: :created
    else
      render json: { errors: post.errors }, status: :unprocessable_entity
    end
  end
end

---

■ React（create-react-app / Vite）から Rails API を叩く例

▼ React から fetch

useEffect(() => {
  fetch("／api／posts")
    .then(res ⇒ res.json())
    .then(data ⇒ setPosts(data));
}, []);

▼ 新規作成

fetch("／api／posts", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title: "テスト" })
});

---

■ 2. Rails に Vite を導入して React/Vue を同居させる（Rails 8 で人気）

SPA 分離ほど重くしたくない場合に最適。

▼ 導入（Vite Rails）

bundle add vite_rails
bin/vite install

▼ React の追加

bin/vite add react

▼ app/frontend/entrypoints/application.jsx

import React from "react";
import ReactDOM from "react-dom/client";

const App = () ⇒ ＜div＞Hello React！＜／div＞;

ReactDOM.createRoot(document.getElementById("root")).render(＜App ／＞);

▼ Rails 側（ビュー）

＜div id="root"＞＜／div＞
＜％= vite_javascript_tag "application" ％＞

Rails 7〜8 では、この Vite組み込み方式が最もストレスが少ない らしいですね。

---

■ 3. Importmap + CDN で React/Vue を最低限だけ使う

画面の一部にだけ React/Vue を導入したい場合。

▼ React の CDN 例

＜script src="https：／／unpkg.com／react／umd／react.development.js"＞＜／script＞
＜script src="https：／／unpkg.com／react-dom／umd／react-dom.development.js"＞＜／script＞

▼ Rails ビューに直接書く（最小構成）

＜div id="root"＞＜／div＞

＜script＞
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(＜h1＞Hello React＜／h1＞);
＜／script＞

• メリット：簡単
• デメリット：規模が大きくなると破綻しやすい

---

■ Rails × SPA（React/Vue）のフォルダ構成例（2025）

backend／          # Rails API
  app／controllers／api／...
  app／models／
  config／
frontend／         # React or Vue
  src／
  components／
  views／

今は、Rails は API としての役割に絞り、フロントは React/Vue で完全に構築する構成が多いだね。