はじめに
モックサーバーは、開発やテストのために本番環境のAPIを模倣するサーバーです。
実際のAPIが未実装でも、ダミーのレスポンスを返すことでフロントエンド開発を先行できます。
また、テストや負荷試験の安定化、開発スピード向上に役立ちます。
書こうと思ったきっかけ
開発中にバックエンドのAPIが未完成でフロントエンド開発が進められないことがありました。
その際、モックサーバーを活用することでスムーズに開発できたため、その手順を共有したいと考えました。
特に json-server を使うと手軽にモックAPIを構築できるため、その方法を紹介します。
モックサーバー（Mock Server）とは？
モックサーバー（Mock Server）は、開発やテストのために、本番環境のAPIの動作を模倣（モック）するサーバーのことです。
参考になった記事
実際のAPIを用意する前に、ダミーのレスポンスを返すことで、クライアント側の開発やテストを効率的に進めるために使われます。
モックサーバーの用途
フロントエンドの開発を先行して進める
- バックエンドのAPIがまだ実装されていなくても、フロントエンド開発ができる。
- 例えば、
GET /usersに対して固定のJSONを返すモックを用意すれば、フロントエンド開発が可能になる。
テストの自動化
- APIの挙動を一定に保つために、モックを使って安定したテストを実行。
- 外部APIへの実際のリクエストを避けることで、コストや速度を改善。
APIの負荷テスト - モックを使って大量のリクエストを処理するシミュレーションができる。
開発環境と本番環境の切り替え
- ローカル環境ではモックサーバーを使い、本番では実APIを使う。
モックサーバーを使うメリット
- 開発スピードが向上：バックエンドを待たずにフロントエンド開発が進められる
- 安定したテスト環境：APIの仕様が変わっても、テストの挙動を一定に保てる
- 外部APIのコスト削減：有料APIや本番環境へのリクエストを減らせる
モックサーバーを構築してみた
json-server（Node.js）を使ったモックAPIの作成
Node.jsを使う場合、json-server というライブラリを使うと簡単にモックAPIを作れます。
インストールと起動
以下のコマンドを実行すると、db.json をデータソースとしたモックサーバーが起動します。
npm install -g json-server
json-server --watch db.json --port 3000
db.json のサンプル
以下のようなデータを用意すると、/users エンドポイントでモックデータを取得できます。
{
"users": [
{ "id": 1, "name": "Alice" },
{ "id": 2, "name": "Bob" }
]
}
動作確認
ブラウザで http://localhost:3000/users にアクセスすると、上記のデータがJSON形式で返ってきます。
ブラウザでの表示例
サーバー側のログ
json-server --watch db.json --port 3000 の動作
このコマンドにより、db.json をデータソースとして、ポート 3000 でモックAPIサーバーが起動する。
-
--watchオプションについて
--watch（-w）は省略可能。バージョン1以降のjson-serverでは、デフォルトでファイル変更を監視する。 -
サーバー起動メッセージの解説
-
JSON Server started on PORT :3000→ サーバーがhttp://localhost:3000/で起動。 -
Watching db.json...→db.jsonの変更がリアルタイムで反映される設定になっている。 -
Static files: Serving ./public directory if it exists→./publicディレクトリがあれば、静的ファイル（HTML, CSS, JS など）も配信可能。 -
Endpoints: http://localhost:3000/users→db.json内にusersというデータがあり、http://localhost:3000/usersにアクセスすると、そのデータが取得できる。
-
まとめ
モックサーバーを使うことで、開発スピードの向上やテストの安定化が可能です。
json-server を使えば、簡単にモックAPIを作成でき、開発環境の柔軟性が向上します。
これを活用することで、APIが未完成でもフロントエンドの開発を円滑に進められます。