MockAPIを使って、APIまたなく、フロントエンド開発できます。

# 自己紹介
- トゥオン、ベトナム出身
- ユニークビジョン株式会社のエンジニア: 5年目

---


# フロントエンド開発で辛いなこと
- APIに関連する部分はAPIがないといけません　→　APIはMockしたい


---

# MockAPI作成の方法


---

## TsのProxy: Mock APIを開発します。

```ts

import axios, { AxiosInstance } from 'axios';

export class Api {
  private readonly axios: AxiosInstance;

  constructor() {
    this.axios = axios.create({
      headers: {
        'Content-Type': 'application/json',
      },
    });
  }

  async getMe() {
    const response =  await this.axios
      .request<{name: string}>({
      method: 'get',
      url: '/v1/me',
    });

    return response.data;
  }
}

export const clientApi = new Api();

clientApi.getMe();
```


---


- Mock開発

```ts

// eslint-disable-next-line object-curly-newline
export function makeMock<T extends Api>(name: string, target: Partial<T> = {}): T {
  return new Proxy(
    target,
    {
      get: function(target: T, handler: string, receiver: unknown) {
        if (Object.keys(target).indexOf(handler) === -1) {
          return () => {
            throw new Error(`${name}.${handler}(...)　has not defined`);
          };
        }

        return Reflect.get(target as unknown as Record<string, unknown>, handler, receiver);
      },
    },
  ) as T;
}

const mockClientApi = makeMock<Api>('api', {
  getMe: async () => {
    return  { name: 'Mock User' };
  },

});

export function useApi() {
  if (process.env.MODE === 'test') {
    return mockClientApi;
  } else {
    return clientApi;
  }
}

useApi().getMe();

```

---

# Webpack のProxy: MockAPIサーバー使う方法

---

webpack.config.js
```js
devServer: {
        ...
        proxy: {
           '/api': {
                target: 'http://localhost:3000',
                router: () => 'https://example-mock-server.com',
                logLevel: 'debug' /*optional*/
           }
        }
}
```
https://dev.to/sanamumtaz/webpack-dev-server-setting-up-proxy-59bk

- ロカールでAPI実行するときに、直接のサーバーじゃなくMock APIサーバーにアクセスします。

---

# VIteのProxy設定


---

- https://vitejs.dev/config/server-options.html

```js
export default defineConfig({
  server: {
    proxy: {
      // string shorthand: http://localhost:5173/foo -> http://localhost:4567/foo
      '/foo': 'http://localhost:4567',
      // with options: http://localhost:5173/api/bar-> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      // with RegEx: http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, ''),
      },
      // Using the proxy instance
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy will be an instance of 'http-proxy'
        },
      },
      // Proxying websockets or socket.io: ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true,
      },
    },
  },
})

```

---

## Mockサーバー作る方法
- Postmanで簡単Mockサーバー作れます。
- https://learning.postman.com/docs/designing-and-developing-your-api/mocking-data/setting-up-mock/


---

# 以上