2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Reactでmockサーバーを活用するぞ!

Last updated at Posted at 2023-02-18

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

動作確認
mock-server-curl.png

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();

動作確認
動作確認.png

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

参照サイト

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?