Rails と React を連携する方法 - 初心者向け完全ガイド

Web開発•2025/2/14

はじめに

Rails と React を組み合わせることで、強力でスケーラブルなウェブアプリケーションを開発することができます。React のフロントエンドと Rails のバックエンドを組み合わせることで、最新のウェブ開発のトレンドに対応したアプリを作成できます。

初心者向けに、この組み合わせでアプリを構築する基本的な方法を、コード例を交えてわかりやすく説明します。これから学ぶ内容は、プログラミングの初心者でも理解できるようにステップバイステップで解説しています。

この記事を読むとわかること

Rails と React をどのように連携させるか
React コンポーネントの作成方法
Rails での API を作成し、React からデータを取得する方法
効率的にフルスタック開発を行うための基本的な考え方

Rails と React の連携とは？

Rails はバックエンドに使われ、React はフロントエンドを担当します。Rails で API を構築し、React からその API にアクセスすることで、効率的にデータをやり取りすることができます。

Rails の役割

Rails はデータベース管理やサーバーサイドでのビジネスロジック処理を担います。主に API を提供するバックエンドとして機能します。

React の役割

React はユーザーインターフェースを担当します。JavaScript を使って動的なコンポーネントを作成し、API から取得したデータをリアルタイムで表示することができます。

Rails API を作成する

まずは、Rails 側で API を作成します。Rails には API モードが用意されており、RESTful な API を簡単に作成できます。次に、簡単な CRUD 操作を行う API を作ってみましょう。

Rails API の設定

まず、Rails プロジェクトを作成し、API モードで動作させます。


rails new myapp --api
cd myapp

これで、Rails は API モードで設定されます。

モデルとコントローラを作成

次に、簡単な「Post」モデルを作成し、データを扱えるようにします。


rails g model Post title:string body:text
rails db:migrate

その後、Posts コントローラを作成し、基本的な CRUD 操作を行えるようにします。


rails g controller Posts


class PostsController < ApplicationController
  def index
    @posts = Post.all
    render json: @posts
  end

  def show
    @post = Post.find(params[:id])
    render json: @post
  end
end

これで、GET /posts と GET /posts/:id の API エンドポイントが完成しました。

React アプリの作成

次に、React を使ってフロントエンドを作成します。Rails と React を同じプロジェクト内で動作させる方法として、React を Rails プロジェクトに組み込む方法を見ていきます。

React のインストール

Rails に React を組み込むには、まず react-rails ジェムをインストールします。


gem 'react-rails'

その後、bundle install を実行し、React のセットアップを行います。


rails webpacker:install:react

これで、Rails プロジェクト内で React を使用できるようになりました。

React コンポーネントの作成

React でコンポーネントを作成し、Rails のビュー内に埋め込む方法を説明します。まず、app/javascript/components ディレクトリ内に新しい React コンポーネントを作成します。


import React, { useEffect, useState } from 'react';

const Posts = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Posts;

このコンポーネントでは、Rails API からデータを取得して表示しています。useEffect フックを使って、コンポーネントがマウントされると同時に API からデータをフェッチし、取得したデータを posts ステートに保存しています。

React コンポーネントをビューに埋め込む

作成した React コンポーネントを Rails のビューで使用するために、app/views/posts/index.html.erb に埋め込みます。


<%= react_component("Posts") %>

これで、Rails サーバーを立ち上げると、/posts ページに React コンポーネントが表示されるようになります。

フルスタック開発のための基本的な考え方

Rails と React を組み合わせた開発の基本は、バックエンドとフロントエンドを分けて、API を通じてデータのやり取りを行うことです。このアプローチにより、フロントエンドとバックエンドが独立しているため、より柔軟な開発が可能になります。

Rails と React のメリット

フロントエンドとバックエンドの分離: フロントエンドとバックエンドを独立して開発できるため、チームでの協業がしやすくなります。
柔軟なユーザーインターフェース: React を使うことで、動的でインタラクティブなユーザーインターフェースを作成できます。
スケーラビリティ: API ベースのアーキテクチャはスケーラブルで、他のサービスとも簡単に統合できます。

まとめ

この記事では、初心者向けに Rails と React を組み合わせてフルスタック開発を行う方法を紹介しました。Rails をバックエンドとして API を提供し、React をフロントエンドで使ってデータを表示することで、動的でインタラクティブなアプリケーションを作成できます。

このアプローチを理解し、実際のアプリケーション開発に活用することで、より効率的にプロジェクトを進めることができるようになるでしょう。

この記事で学んだことを基に、実際に Rails と React を使った開発に挑戦してみましょう！