React + PostmanモックサーバーでAPIコール処理をやってみる

# はじめに
フロントエンド開発において、バックエンドAPIの開発待ちの状態になることもあると思います。そんなときには、Postmanのモックサーバー機能活用できそうです。本記事では、Postmanのモックサーバー機能を使って簡単にAPIをモックとして作成し、Reactで作ったフロントのUIからコールする処理を実装していきます。


# 環境
- React：18.3.1
- Vite：6.0.1
- tailwindcss：3.4.15
- Postman Mock Server

# 本記事で書かない事
- Tailwind CSSの設定手順
- Vite、React の環境構築

# ゴール
Postman Mock Serverを作成しフロントからコールしてレスポンスを取得できることを確認する。
作成するUIイメージは次の通りです。

![mockapi-postman.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/58a8db1b-24ee-035d-00b3-8ba6a4498d33.gif)

# 1. Postmanでモックサーバーを作成する

簡単なユーザー情報を返すAPIを想定したモックサーバーを作成します。

１. 左側メニューの「Mock Servers」→「Create Mock Server」をクリック
２. 以下の情報を入力：
   - Method: GET
   - URL: /api/users
  
   ```json:Response Body
   {
     "users": [
       {
         "id": 1,
         "name": "ほげほげ太郎1",
         "role": "user"
       },
       {
         "id": 2,
         "name": "ほげほげ太郎2",
         "role": "user"
       }
     ]
   }
   ```
   

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/faa07387-543a-5c93-6f52-4cf90fddb8c7.png)

   
３. 「Next」→「Create Mock Server」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/6ed1f68d-81ed-dc81-5b1f-52251a5c6052.png)

４. 生成されたモックサーバーのURLをコピーしておきます。


## モックサーバーの動作確認

試しにPostmanからコールしていみます。
Mock servers > 作成したモックAPI > View collection Docs > Openrequest からコールしてみると、レスポンスが想定通り返ってくることを確認できました。

```json:response
   {
     "users": [
       {
         "id": 1,
         "name": "ほげほげ太郎1",
         "role": "user"
       },
       {
         "id": 2,
         "name": "ほげほげ太郎2",
         "role": "user"
       }
     ]
   }
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/cf1a6da1-7b1b-bcdd-d94f-dc31aab8f35a.png)


# フロント部分の作成

次に、モックサーバーから取得したデータを表示するフロント部分をReactで実装します。

```tsx
import { useState } from 'react'

interface User {
  id: number
  name: string
  role: string
}

function App() {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(false)

  const handleClick = async () => {
    setLoading(true)
    try {
      const response = await fetch('対象のAPI')
      const data = await response.json()
      setUsers(data.users)
    } catch (error) {
      console.error('Error:', error)
    }
    setLoading(false)
  }

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="p-8 w-full max-w-md">
        <button 
          onClick={handleClick}
          disabled={loading}
          className="w-full bg-blue-500 text-white px-4 py-2 rounded disabled:bg-gray-400"
        >
          {loading ? 'Loading...' : 'ユーザ一覧を取得'}
        </button>

        <div className="mt-4 space-y-4">
          {users.map(user => (
            <div key={user.id} className="p-4 border rounded">
              <div className="font-bold">{user.name}</div>
              <div className="text-gray-600">{user.role}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default App
```

# モックAPIをコールしてみる

実装したアプリケーションを起動し、実際にモックサーバーからデータを取得してみます。

```
npm run dev
```

`ユーザ一覧を取得` を押下するとPostman のモックサーバで作成しておいた２つのユーザデータを取得できている事を画面上で確認できました。

![mockapi-postman.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/58a8db1b-24ee-035d-00b3-8ba6a4498d33.gif)


# 参考
- [Postman Mock Servers](https://learning.postman.com/docs/designing-and-developing-your-api/mocking-data/setting-up-mock/)
- https://tailwindcss.com/docs/guides/vite
- https://zenn.dev/ryomaejii/articles/a55f428609ffc5