フロントエンドで完結する簡易的なAPIモック作成について

挨拶

ども！こんにちは「デモ開発」が連続で続いていて、デッドヒートの波に乗っている龍ちゃんです。一件は完了しているので、記事の共有をしておきます。最近はサムネイルの作りに凝っています。：「生成AI×LINE」で作るチャットゲーム

ちょうど開発を進めていく中で、フロントエンドの開発効率を爆上げする方法を見つけたので、リハビリがてらさくっとブログにまとめていきたいと思います。

実際にこちらの内容を利用したリポジトリはこちらになります。

本日の内容 フロントエンドで完結するモックの作りこみについてになります。APIの実装を待つよりも先にデータ構造からデザインを確認したいときに使うことができます。

フロントエンド開発時のモックについて

モックといえば、モック用にアプリケーションを構築する方法もあります。今回は、フロントエンドでAPIのモックを作成する方法について紹介していきます。API通信ライブラリとしてはaxiosを対象としています。

ディレクトリ構成

今回は、API通信部分をapiというファイル内に処理をまとめておきます。各ファイルの構造としては、以下のようなイメージです。

api
+---User                     # API名
    +---api.ts               # API通信処理
    +---constants.ts         # 返信用定数
    +---type.ts              # response request Type定義

apiディレクトリ内にAPIに対応したディレクトリを作成します。各APIディレクトリには、以下の3つのファイルから構成されています。

環境変数で、モックと本番環境との切り替え制御を行います。api.ts内で環境変数を呼び出して判定を行い、モックの場合はconstat.tsからダミーのレスポンスを呼び出して返信します。

構築方法

まずは、環境編素を用意します。

# モック使用時はtrueとして、モックではない場合false
VITE_MOCK="true"

constants.tsとtype.tsはそれぞれ対応する情報を適宜入れてください。api.tsでは定義した情報を利用して構築します。

import axios from "axios";

import { dummyFetchEnemyResponse, dummyPostBattleResponse } from "./constants";
import { RequestPostBattleType, ResponsePostBattleType } from "./type";
import { axiosClient } from "../axiosClient";

import { sleep } from "@utilities/utilitiesLogic";

export const postBattle = async (data: RequestPostBattleType) => {
  
  // 環境変数読み込み
  const mockFlag = import.meta.env.VITE_MOCK as boolean;
  
  // 環境変数によってはダミーを返答する
  if (mockFlag) {
    await sleep(2000);
    return dummyPostBattleResponse;
  }
  
  // API通信の処理
  const response = await axios.post<ResponsePostBattleType>("/api/battle", data);
  return response.data;
};

上記のコードによってモックと本番環境を環境変数によって切り分けを行うことができます。API通信のラグを再現するために特定の秒数待機するプログラムを作成しています。

export const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms));

これによって正常系のローディングを含む処理を再現することができます。

終わり

さっくりとまとめ終わりました。こちらを利用することで、フロントエンドから型定義を作成することで「フロント→バック」の順番で作成することができます。

本来であれば、「バック→フロント」の順番でAPIのテストを行って開発するのがきれいです。でも、定義等をノリで作っていく場合はフロントから作り上げていく方が楽なんですよね。

というわけでおすすめしています！ではまた～