RailsとVite Reactでaxios通信を行う手順

2024年9月22日

当ページのリンクには広告が含まれています。

Narazu

railsとreactでデータのやり取りしたい！

上記の悩みに対してメモ程度ですが解決できたらお思います。

この記事を読んで実行したらrailsからデータを取得し、reactで表示できるようになります。

本記事の項目

railsとreactのデータのやり取り
CORSエラー対策

まだrailsとreactのアプリケーションを立ち上げていない方は以下を参考にやってみてください。

あわせて読みたい

【構築手順】Docker+rails+Vite react環境構築毎回環境構築調べているな。毎回調べて時間を費やすので私自身のメモ程度にとらえてください。 Docker+rails+Vite reactの環境構築このメモを実行すれば上記の環境が…

apiファイルの作成とライブラリのインストール

まず、front内にapi/lib/apiClient.tsというディレクトリとファイルを作成します。

mkdir -p front/api/lib && touch front/api/lib/apiClient.ts

ライブラリのインストール

axiosのライブラリをまだ導入していない場合はをnpm installします。

npm install axios

dockerを使用している場合はコンテナに入って実行してください。

docker exec -it コンテナ名 bash
npm install axios

rails側でキャメルケースを使っている場合は以下のライブラリが便利です。

必要ならインストールしてください。

インストール後、applyCaseMiddlewareを使って、リクエストやレスポンスのキーをキャメルケースやスネークケースに変換するミドルウェアを適用できます。

npm install axios-case-converter

本番環境とローカル環境でbase_urlを分ける設定

本番環境とローカル環境でURLを分けたい場合は、flontディレクトリの直下に以下のファイルを用意します。

touch front/.env.development
touch front/.env.production

productionが本番環境で、developmentがローカル環境で読み込んでくれます。

それぞれ、設定を書きます。

VITE_API_BASE_URL=https://本番環境用のドメイン名。
GENERATE_SOURCEMAP=false

# railsのローカルホスト。それぞれの環境でポート番号を合わせてください
VITE_API_BASE_URL=http://localhost:3000

ReactでAPIを便利に使うための設定

先ほど作成してapiClient.tsにコードを書きます。

import axios, { AxiosInstance } from "axios";
import applyCaseMiddleware from "axios-case-converter";

const options = {
  ignoreHeaders: true,
};

const createClient = (): AxiosInstance => {
  const instance = axios.create({
    baseURL: `${import.meta.env.VITE_API_BASE_URL}/api/v1`

  });
  return applyCaseMiddleware(instance, options);
};

const client = createClient();

export default client;

APIを実際に使ってみる

使いたいファイルで以下のように呼び出せるようになります。

import axios from '@/api/lib/apiClient';

importする際../../とやりたくない場合は以下の設定をお勧めしているのでぜひ参考にしてみてください。

あわせて読みたい

【Vite React TypeScript】で絶対パスでimportする方法 importする時、層が深すぎて../../../../../多すぎる。上記のような可読性の低いコードは、エラーが起きやすく原因も分かりにくいです。絶対パスでimportする方法こ…

今回はテストデータをrails側で作成しreact上で表示したいと思います。

rails側で下準備

まずrails側でroutes.rbの設定やcontrollerの作成などを行います。

controllerの作成

今回はtracks_controller.rbとして作成します。

コマンドでコントローラーを作成します。
railsのapiモードなのでapi/vi/配下に作成したいと思います。

rails generate controller api/v1/Tracks

その後作成したコントローラーにメソッドを追加します。

class Api::V1::TracksController < ApplicationController

  def test
    # ダミーデータを作成
    dummy_data = {
      id: 1,
      name: "Test Track",
      artist: "Test Artist",
      album: "Test Album",
      duration: 240
    }
    
    # JSON形式でダミーデータを返す
    render json: dummy_data, status: :ok
  end

  
end

routes.rbの設定

routesを以下のように書きます。

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :tracks, only: [] do
        collection do
          get 'test'
        end
      end
    end
  end
end

reactのコード

今回は分かりやすくするためにApp.tsxに書きます。

import { useState, useEffect } from 'react'
import './App.css'

import axios from '@/api/lib/apiClient';

interface TrackTestData {
  id: number;
  name: string;
  artist: string;
  album: string;
  duration: number;
}

function App() {
  const [track, setTrack] = useState<TrackTestData | null>(null);

  useEffect(() => {
    const fetchTestData = async () => {
      try {
        const res =   await axios.get<TrackTestData>('tracks/test')
        setTrack(res.data);
      } catch(err) {
        console.log('Error fetching track data:', err);
      }
    }
    fetchTestData();
  },[])

  return (
    <div>
      {track ? (
        <div>
          <h1>Track Information</h1>
          <p><strong>ID:</strong> {track.id}</p>
          <p><strong>Name:</strong> {track.name}</p>
          <p><strong>Artist:</strong> {track.artist}</p>
          <p><strong>Album:</strong> {track.album}</p>
          <p><strong>Duration:</strong> {Math.floor(track.duration / 60)}:{track.duration % 60} (min:sec)</p>
        </div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  )
}

export default App

完成したらreactで設定しているポート番号へアクセスしてみてください。
今回は5174でやっているので以下にアクセスしてみます。

http://localhost:5714/

おそらく、以下のように「Loading…」となり読み込めていないと思います。

rails側が悪いのか確認するために、以下にアクセスしてみます。

http://localhost:3000/api/v1/tracks/test

以下のようなデータがブラウザ上で表示できていればrailsは正常に起動しています。

{"id":1,"name":"Test Track","artist":"Test Artist","album":"Test Album","duration":240}

初心者の方にオススメ

プログラミングに興味のある方
アプリケーション開発をやってみたい方
昔プログラミングに挫折した方
プログラミング学校が高いと思っている方

脱初心者のためには独学だと限界があります。

「買い切り」でコンパクトで質の高い動画を100本以上揃え、受講期間なしで自由に学ぶことのできるオススメのオンラインスクールです！

10~20分の動画講義が100本以上
回数無制限の質問対応
買い切りで受講期間制限なし

＼脱初心者／

スキルハックスで学ぶ

検証ツールで確認

ブラウザ上で右クリックして「検証」をクリックします。

「ネットワーク」→「Fetch/XHR」で確認できます。

CORSエラーとなっていたのでこのエラーを対処します。

CORSエラーの対処法

rails側で以下の設定を施します。

まずGemfileに以下のgemを追加します。

gem 'rack-cors'

bundle installします。

bundle install

config/initialisers/cors.rbを編集します。
全てコメントアウトされていると思いますので以下のように修正します。

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "*"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

railsが起動しているコンテナを再起動します。

docker restart api

コンテナ名が不明な場合は以下で調べられます。

$ docker ps -a

CONTAINER ID   IMAGE         COMMAND                   CREATED        STATUS           PORTS                               NAMES
604e3798f668   front         "docker-entrypoint.s…"   9 days ago     Up 9 days        0.0.0.0:5173->5173/tcp              front
9a3c6f26cc3d   api           "entrypoint.sh bash …"   9 days ago     Up 9 days        0.0.0.0:3000->3000/tcp              api
bea5395449c4   mysql:8.0     "docker-entrypoint.s…"   9 days ago     Up 9 days        33060/tcp, 0.0.0.0:4306->3306/tcp   db

再度アクセスしてみて以下のような画面になっていればOKです。