はじめに

APIを利用した開発では、バックエンドが未完成の状態でも、フロントエンドの実装や画面確認を進めたい場面がよくあります。
そんなときに役立つのが、モックサーバーを使った開発手法です。

この記事では、モックサーバーをノーコードで構築できるMockoonを使って、簡単にテスト用サーバーを用意する方法をご紹介します。
エンドポイント定義やレスポンス制御、ダミーデータの生成まで一通り揃っており、個人開発からチーム開発まで幅広く活用できます。

※本記事は Mockoon v9.4.0 を前提にしています。

モックサーバーとは何か

モックサーバーとは、本番のAPIの代わりにリクエストを受け取り、あらかじめ定義したレスポンスを返すテスト用のサーバーです。
APIが未完成でも、接続側は実データに近い形で開発を進められます。
特に画面実装やUI確認では、バックエンドの完成を待つ必要がなくなり、開発効率が大きく向上します。

そんなモックサーバーをノーコードで構築できるのがMockoonです。

Mockoonの特徴とできること

  • インストール後すぐに使える
  • GUI操作だけでモックサーバーを構築できる
  • レスポンスの条件分岐に対応
  • Faker.jsによるダミーデータ生成が可能
  • 設定をOpenAPIファイルとして保存でき、Gitなどで管理してチームに共有できる

特に、ダミーデータを自動生成できる点は、画面確認など非常に便利です。

Mockoonのインストールと基本操作

公式サイト（https://mockoon.com）からアプリをダウンロードして起動します。

初期設定手順

  1. Mockoonを起動します。
  2. メニューバーの「File」→「New local environment」で環境を作成します。このとき、指定した場所へJSONファイルが作成されます。
  3. メニューバーの「Routes」→「Add new route」でエンドポイントを追加します。
  4. HTTPメソッドとパスを設定します。
  5. ステータスコードとレスポンスbodyを設定します。
  6. 左上の「▶」をクリックしてサーバーを起動します。

これだけで、ローカルにモックサーバーが立ち上がります。

定義したパスにリクエストを送ると、設定したレスポンスが返ってきます。

次のようにしてパスパラメータも定義できます。id​ は任意の名前です。

GET /sample/:id

なお、手順2で作成したJSONはOpenAPI（RESTful APIの仕様を定義するフォーマット）です。
別環境で「File」→「Open local environment」から読み込むだけで、同じAPIを再現可能です。

パラメータによるレスポンス分岐

Mockoonでは、リクエストに応じてレスポンスを切り替えられます。
例えば、クエリパラメータに param=good​ が含まれる場合のみ、成功レスポンスを返してみます。

GET /sample?param=good

まず、200レスポンスに条件（Rules）を追加します。
今回はクエリパラメータparam​がgood​ のときですので、以下のように設定します。

条件式は他に regex​、null​ などに対応しており、「！」で否定条件も設定できます。
プログラマーなら何となくできてしまう分かりやすさがいいところ。

続いて、ステータスコード400を返すレスポンスを作成します。
レスポンスは「＋」から追加できます。

レスポンスのリスト右側の旗マークをクリックし、当てはまる条件がないときに使用するレスポンスを選択します。
今回は400のレスポンスをデフォルトにします。

試しにリクエストを送信してみましょう。
左がparam=good​を付けたとき、右が付けなかったときです。

分岐できていますね！

Logsタブからログも見られます。

Faker.jsを使ったダミーデータ生成

Mockoonには Faker.js が組み込まれており、リアルなダミーデータを簡単に生成できます。
IDや日付、メールアドレスなどを自動生成できるため、画面確認や開発中の検証に最適です。

{
  "uuid": "{{faker 'string.uuid'}}",
  "number": "{{faker 'number.int' min=1 max=100}}",
  "email": "{{faker 'internet.email'}}",
  "date": "{{dateFormat (faker 'date.past' years=5) 'yyyy/MM/dd'}}"
}

出力例：

{
  "uuid": "279302b4-a11e-4aa3-a8c3-268d39bedf2a",
  "number": "30",
  "email": "Will15@yahoo.com",
  "date": "2022/03/08"
}

一部のデータは日本風にできます。
「Application」→「Setting」からFaker.jsのLocaleを「Japanese」に変更します。

{
  "人名": "{{faker 'person.fullName'}}",
  "電話番号": "{{faker 'phone.number'}}",
  "都道府県": "{{faker 'location.state'}}",
  "市区町村風": "{{faker 'location.city'}}",
  "郵便番号": "{{faker 'location.zipCode'}}"
}

出力例：

{
  "人名": "大野 彩香",
  "電話番号": "0890-27-5641",
  "都道府県": "愛媛県",
  "市区町村風": "片山町",
  "郵便番号": "022-8904"
}

都道府県以外はあくまで「それっぽい」値であり、実在しない値になることがある点は注意が必要です。
また、Localeはアプリ側の設定のため、OpenAPIには含まれません。他の環境にJSONファイルを共有しても反映されませんので、環境ごとに設定が必要です。

さいごに

Mockoonは、モックサーバー構築に必要な機能がひと通り揃った扱いやすいツールです。
特に、ダミーデータを簡単に生成できる点は、フロントエンド開発や画面確認において大きな助けになります。

バックエンドが未完成でも開発を止めずに進められるため、チーム全体の開発効率向上につながります。
モックサーバーが必要になった際は、Mockoonを一度試してみてはいかがでしょうか。