ホーム/ API開発におけるMockの課題と価値、そしてEchoAPIが提供する解決策

API開発におけるMockの課題と価値、そしてEchoAPIが提供する解決策

EchoAPIは、AIを活用した動的なモック機能でAPI開発を革新し、バックエンドへの依存をなくすことで、フロントエンドの開発とテストをシームレスに加速します。

EchoAPI

2025年9月17日 • 5 min read

API開発の世界に飛び込んでいる皆さん、こんにちは！今日は、API開発で避けては通れない「Mock」についてお話ししたいと思います。
API開発って、特にプロジェクトの初期段階でスピード感が求められたり、まだバックエンドのインターフェース（API）が完成していなかったりすること、よくありますよね。そんな時、「実際のバックエンドデータがなくても、フロントエンド開発を止めない」ための強力な味方がMockなんです。

一、リアルな開発現場での「困った！」を乗り越えるモックの重要性

想像してみてください。あなたは今、あるEコマースプラットフォームのフロントエンド開発を担当しています。ユーザーが「即時決済」ボタンをクリックしたら、フロントエンドはバックエンドの決済API /pay を呼び出す必要があります。成功した場合、以下のようなレスポンスが返ってくるはずです。

{
    "data": {
        "code": 0,
        "message": "success",
        "pay_dtime":"2025-08-10 10:00:00",
        "order_id":"sn12345678"
    }
}

でも、ここで問題発生！

バックエンドAPIがまだ開発途中：決済成功後の画面ロジックをテストしたくても、APIがないと何もできません。
外部ゲートウェイへの依存：決済APIは外部のゲートウェイに依存しているんですが、テスト環境がまだ準備できていないため、APIが結果を返せないんです。
複雑な認証やデータ準備：一部のAPIは、複雑な認証プロセスや事前のデータ準備が必要で、開発初期段階ではそもそも呼び出すことすら難しいんです。

もしフロントエンドがバックエンドAPIの完成をただ待っているだけだと、開発が完全にストップしてしまいます。まさに、そんな窮地を救ってくれるのがMockなんです。

二、よくあるモックのやり方とその落とし穴

モックにはいくつか定番の方法がありますが、それぞれにちょっとした「困った」が潜んでいます。

1. ローカルJSONファイルでのモック

一番手軽なのは、ローカルに mock/data.json のようなファイルを用意して、APIリクエストがあったときにそのファイルを読み込む方法です。

fetch('/mock/pay.json')

でも、これだと…

データが固定されがち：色々なシナリオをシミュレーションするのが難しいんです。
複雑なロジックには対応できない：ページネーションや条件付き検索のような、ちょっと凝った処理はモックしきれません。

2. フロントエンドでのリクエスト（`axios-mock-adapter`、`Mock.js` など）によるインターセプト

リクエストを途中でキャッチして、ブラウザ上でMockデータを返す方法です。JavaScriptでコードを書くので、ある程度柔軟性があります。

モック.onPost('/api/pay/confirm').reply(200, {
    "data": {
        "code": 0,
        "message": "success",
        "pay_dtime":"2025-08-10 10:00:00",
        "order_id":"sn12345678"
    }
});

ただ、これも…

フロントエンドプロジェクト内でのみ有効：他のプロジェクトで再利用するのが難しいんです。
コードの中にデータが埋め込まれる：後からデータを修正したり、モック用のコードを削除したりする手間とコストがかさみます。

3. 独自のMockサーバー構築（`json-server`、`Easy Mock` など）

独立したMockサーバーを立てて、フロントエンドからのリクエストに応答させる方法です。

でも、これも…

構築・維持コストが高い：サーバーのセットアップや管理に手間がかかります。
柔軟性に欠ける：複雑なロジックを再現するには、別途スクリプトを書く必要があり、自由度が限られます。

これらの方法は、確かに一部分の問題を解決してくれますが、プロジェクトが複雑になるにつれて、「柔軟性に欠ける」「動的にデータを生成できない」といったデメリットが目立ってくるんですよね。

三、EchoAPIのMock機能とその実践的な使い方

そこで登場するのが、EchoAPI！EchoAPIは、Mockに関して、より柔軟でパワフルなソリューションを提供してくれます。開発初期のラピッドプロトタイピングから、複雑なシナリオのデータシミュレーションまで、幅広く対応できるんです。

ここでは、先ほどの決済API /pay を例に、EchoAPIでどのように多様なMockシナリオを実現できるかを見ていきましょう。

1. Mockの基本：固定値のレスポンスを返す

まずは、一番シンプルな「固定値」のレスポンスを返す方法から。

例えば、こんなレスポンスをモックしたいとします。

{
    "data": {
        "code": 0,
        "message": "success"
    }
}

EchoAPIでは、まず新しいAPIを作成します。リクエストメソッドは POST、URLは /pay と設定します。次に、「設計 (Design)」タブの「定義済みレスポンス期待値 (Predefined Response Expectations)」で、以下のようにビジュアルに設定します。

設定が終わったら、「Mock」タブに切り替えると、自動的に「Mock URL」が生成されているはずです。このURLが、まさにMockサーバーへのリンクになります。

このモック URLを実際のAPIエンドポイントとして使用すれば、設定した通りのレスポンスが返ってきます。

これで、バックエンドがなくても、APIからの返り値をシミュレーションできるようになりました！

2. Mockの応用：組み込み関数でランダム値を生成する

次に、レスポンスに動的な要素を加えてみましょう。例えば、決済日時 pay_dtime のように、毎回異なる値（リアルタイム生成）を返したい場合です。

{
    "data": {
        "code": 0,
        "message": "success",
        "pay_dtime":"2025-08-10 10:00:00" // このフィールドは毎回変動させたい
    }
}

EchoAPIには、様々な種類のデータを簡単に生成できる「組み込み変数 (Built-in Variables)」が豊富に用意されています。pay_dtime フィールドの値として、「モックデータ (Mock Data)」を選択し、組み込みの日付・時刻変数を挿入するだけでOKです。

このように設定すると、リクエストごとに異なる日時が返ってくるようになります。

これで、ローカルJSONの限界を超えて、よりリアルなデータフローをシミュレーションできるようになりましたね！

3. Mockの進化：カスタム関数で複雑なロジックを実装する

組み込み変数だけでは表現しきれない、もっと複雑なデータ生成が必要な場合もあります。例えば、order_id のように、「sn というプレフィックスに続いて8桁の数字」という特定のフォーマットを持つ値を生成したい、といったケースです。

{
    "data": {
        "code": 0,
        "message": "success",
        "pay_dtime":"2025-08-10 10:00:00", // このフィールドは毎回変動させたい
        "order_id":"sn12345678" // このフィールドは高度にカスタマイズしたい
    }
}

そんな時は、「カスタム関数 (Custom Functions)」の出番です！EchoAPIでは、カスタム関数を使って、より高度なデータ生成ロジックを実装できます。