RectでMockサーバーに通信する

Reactの画面作成だけじゃ物足りないので、
バックエンド側のサーバーと通信処理を行い、
実践に近いアプリを作成したい。

でも、バックエンド側の処理を作る余裕もないぞ(祝日が足りないぞ！)
ここでMock(モック)サーバーの登場だ。
Mockとはサーバ機能の代理を務めるもので、テストでよく使われます。
バックエンド側の処理が別サーバーにあって、画面側の処理だけをテストしたい状況に使うよ。

では、やってみよう！

Reactのテンプレートを使用する(typescript)

npx create-react-app --template typescript react-mockserver-app

モックサーバーの実装

mock用の設定を行います
mockフォルダーを作成後、mock配下で以下のコマンド実行。

npm init
npm install json-server --save-dev

mockファイル

data.json

{
    "data": [
        {
            "id": 0,
            "name": "1号",
            "mail": "AAA@gmail.com"
        },
        {
            "id": 1,
            "name": "2号",
            "mail": "BBB@gmail.com"
        },
        {
            "id": 2,
            "name": "3号",
            "mail": "CCC@gmail.com"
        }
    ]
}

mockサーバー起動

package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "json-server": "json-server --watch data.json --port 5000"
  }

mockサーバー起動コマンド

npm run json-server

動作確認

React実装

App.tsx

/* eslint-disable react-hooks/exhaustive-deps */
import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
import { useEffect, useState } from 'react';
import './App.css';

function App() {
  const url = "http://localhost:5000";
  const options: AxiosRequestConfig = {
    url: `${url}/data`,
    method: "GET",
  };
  const [item, setItem] = useState<any>([]);
  const [status, setStatus] = useState<number | null>(null);

  //API通信を行う箇所
  useEffect(() => {
    axios(options)
      .then((res: AxiosResponse<[]>) => {
        const { data, status } = res;
        setItem(data);
        setStatus(status);
      })
      .catch((e: AxiosError<{ error: string }>) => {
        // エラー処理
        console.log(e.message);
      }).finally(() => {
        if (status === 200 && item === undefined) {
          console.log("データがありません");
        }
      });
  }, []);

  const rows = item.map((data: any, index: number) =>
    <tr key={data}>
      <td>
        {index + 1}
      </td>
      <td>会員ID:{data.id}</td>
      <td>{data.name}</td>
      <td>{data.mail}</td>
    </tr>
  );

  return (
    <div className="App">
      <h1>Reactでmockサーバーを活用するぞ！</h1>
      <table>
        <thead>
          <tr>
            <th>index</th>
            <th>MemberId</th>
            <th>name</th>
            <th>mail</th>
          </tr>
        </thead>
        <tbody>
          {rows}
        </tbody>
      </table>
    </div>
  );
}

export default App;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

動作確認

これで実装完了です！
ソースコードは以下のgithubで公開しているよ(ﾟ∀ﾟ)
https://github.com/sunn-sudo/react-mockserver-app

参照サイト