[React×Rails]APIモードでの開発の流れ

はじめに

最近はフロントエンド技術が盛り上がってきたことで、フロントエンドとバックエンドを分離して開発する事が増えました。そこでRailsではAPIモードを使用して必要な情報を渡すのですが、何しろモダンなやり方なので参考資料が少ないです。そこで、備忘録的にまとめておこうと思います。

注意点

あくまで開発をしていく上での流れを掴めればいいと思うので、細かいことは省いているのでご了承ください。

Rails側の実装の流れ

1.APIモードでプロジェクトを立ち上げる。

$ rails new アプリ名 --api

2.モデルの設定(migrationやseed、バリデーションなど)を行う。

3.ルーティングの設定を行う。
※namespaceを用いることで理解しやすくなります。

routes.rb

Rails.application.routes.draw do
  # namespaceを利用することで、理解しやすくなる
  namespace :api do
　　　　　　　　# 開発途中でAPIの仕様を変更する場合に備えURLにバージョン番号を持たせる
    namespace :v1 do
      # ルーティングを記載
    end
  end
end

4.コントローラーの設定を行う。
※ルーティング同様にnamespaceを用いる

app/controllers/api/v1/users_controller.rb

module Api
  module V1
    class UsersController < ApplicationController
      def index
        users = User.all

        # 渡したいデータをJSON形式で返す
        render json: {
          users: users
        }, status: :ok
      end
    end
  end
end

React側の実装の流れ

1.Reactのプロジェクトを立ち上げる。(名前は任意のもので良いがここではfrontendとする)

$ npx create-react-app frontend

2.データを持つコンポーネント(Container Component)を格納するディレクトリを作成する。

$ mkdir src/containers

3.データを持たないコンポーネント(Presentational Component)を格納するディレクトリを作成する。

$ mkdir src/conpornents

4.利用するURLを記載するファイルを格納するディレクトリを作成する。

$ mkdir src/urls

5.APIを叩く関数を定義するファイルを格納するディレクトリを作成する。

$ mkdir src/apis

6.それぞれコンポーネントを積み上げてビューを作成していく。

終わりに

ここではReactを使いましたが、Vueなども似たような感じで使えるので、試してみても面白いかもしれないです。これからこういった手法を取る開発が増えてくると思うので、流れは掴んでおいた方がいいでしょう！