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

# 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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951197/d97ea5e5-9cf9-6326-14cc-622ec70024be.png)

## React実装
```tsx: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;
```

```tsx: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951197/6ff5636e-6171-4a66-723f-81246a44a692.png)

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


## 参照サイト
https://future-architect.github.io/typescript-guide/react.html

https://rightcode.co.jp/blog/information-technology/json-server-rest-api-mock-server-syain

https://qiita.com/gotchane/items/b6a4078e57eb6d967ecb

https://zenn.dev/mkt_engr/articles/axios-req-res-typescript