JavaScriptでモックAPIサーバーを作成する方法

フロントエンド機能の開発やテストは、依存するバックエンドがまだ準備できていない場合、特に難しくなることがあります。バックエンドAPIへの依存によって、開発プロセスが遅れることも少なくありません。

このような状況では、モックAPIを作成することで、バックエンドとは独立して機能を開発できるため、多くの時間を節約できます。また、APIの準備が整う前に、テストを容易に行い、APIが失敗する可能性のあるシナリオを特定できます。

この記事では、モックAPIサーバーの概要、モックAPIの作成に使えるツール、開発やテストを効率化する方法、簡単なモックサーバーのセットアップ方法を解説します。

モックAPIサーバーとは

モックAPIサーバーとは、クライアントから受け取ったリクエストに対して、現実的なレスポンスを返す模擬APIサーバーです。通常、開発中のバックエンドサーバーの代わりとして使われます。

モックAPIサーバーは、現実的なレスポンス値を含む仮データを使って実際のAPIを模倣しますが、データの永続化など、元のコンポーネントが持つ機能面・非機能面の特性の多くは備えていません。

モックAPIサーバーは、次のようなさまざまな場面で使用できます。

• 開発：モックAPIサーバーを使うと、フロントエンドチームとバックエンドチームの依存関係を一時的に解消できます。それぞれのチームが独立して作業、開発、テストを進められます。

• テスト：ソフトウェア開発に欠かせないテストを、フロントエンドチームがバックエンドチームによる完全なAPIの開発を待たずに実施できます。また、すべてのテストリクエストが実際のAPIではなくモックAPIサーバーに送られるため、実際のAPIがテストデータで汚染されることも防げます。

• 外部コンポーネント：Storybookなどのツールを使ってフロントエンド機能を紹介する際、モックAPIサーバーを使って外部依存関係を模擬することもできます。

モックAPIのベストプラクティス

モックAPIサーバーを作成するときは、次のベストプラクティスを念頭に置きましょう。

• モックAPIは、実際のAPIと同じスキーマとインターフェースに対応している必要があります。これにより、レスポンスをより現実的なものにできます。

• アプリケーションに外部依存関係がある場合は、モックAPIでもそれらを模擬する必要があります。

• モックAPIは、リクエストの転送に対応している必要があります。これにより、実際のAPIが開発された後、モックレスポンスから実際のレスポンスへ段階的に切り替えられます。

• モックAPIでは、予期しないエラーやパフォーマンスの低下、無効なユーザー入力をシミュレートできるようにします。こうすることで、アプリケーションがこれらの状況に適切に対応できるようになります。

APIモックツール

モックAPIサーバーの作成に役立つツールは数多くあります。たとえば、次のようなものがあります。

• Mock Service Worker (MSW)：Mock Service Workerは、Service Worker APIを利用するAPIモックライブラリです。このAPIにより、MSWはプロキシサーバーとして実際のリクエストをインターセプトし、モックレスポンスを返せます。リクエストのインターセプトはネットワークレベルで行われるため、アプリケーションはレスポンスがモックAPIから返されていることを認識しません。

• Postman：Postmanは、APIの構築、使用、テスト、ドキュメント作成を行うためのプラットフォームです。保存済みのモックデータを返すモックAPIサーバーも作成できます。Postmanはリクエストの設定を保存済みのサンプルと照合し、設定に最も近いデータを含むモックレスポンスを返します。操作しやすいGUIを備えているため、Postmanのモックサーバーを簡単にセットアップできます。

• Mirage JS：Mirage JSは、バックエンドサービスに依存せずにJavaScriptアプリケーションを構築・テストできるAPIモックライブラリです。動的なシナリオを簡単に作成できるため、モックAPIをより現実的なものにできます。動的なシナリオを作成でき、インメモリデータベースも備えているMirage JSは、モックAPIサーバーを作成するうえで最も柔軟な選択肢です。

Mirage JSでモックAPIサーバーを作成する

このセクションでは、Mirage JSを使って簡単なモックAPIサーバーを作成する方法を説明します。

前提条件

始める前に、次のものを用意してください。

• システムにNode.js v16以降がインストールされていること。

• 任意のIDE。

• React.jsの基本的な知識。

エディターで手順を進めるには、チュートリアルのGitHubリポジトリをクローンしてください。

モックサーバーをセットアップする

ターミナルで次のコマンドを実行し、必要な依存関係をインストールして開発サーバーを起動します。

1npm install
2npm run start

ウィジェットが回転するだけで、アプリには機能が表示されないはずです。これは、準備ができていないAPIからアプリがデータを取得しようとしているためです。開発プロセスを効率化するため、モックサーバーを作成しましょう。

srcディレクトリにmock.jsというファイルを作成し、次のコードを追加します。

1//mock.js
2import { createServer } from "miragejs";
3
4const createMockServer = function () {
5 let server = createServer();
6
7 return server;
8};
9
10export default createMockServer;

上記のコードでは、miragejsからcreateServerをインポートしています。この関数は、指定した設定オブジェクトを使ってMirageサーバーを起動します。設定オブジェクトには、サーバーが処理する各種ルート、モック用のインメモリデータベース、名前空間などの情報を含めることができます。

createMockServer関数は、サーバーのインスタンスを作成して返します。

インメモリのモックデータベースを作成する

次に、Mirageのデータレイヤーを使って簡単なモックデータベースを作成し、データを保存・返却できるようにします。

mock.jsファイルを次のコードに合わせて更新します。

1//mock.js
2import { createServer, Model } from "miragejs";
3
4const createMockServer = function () {
5 let server = createServer({
6   models: {
7     todos: Model
8   },
9 });
10
11 return server;
12};
13
14export default createMockServer;

修正後のコードでは、miragejsからModelもインポートしています。これはMirageモデルの基本定義です。

次に、引数として設定オブジェクトをcreateServerに渡しました。設定オブジェクト内では、modelsプロパティにオブジェクトを設定し、そのオブジェクト内でmodelsプロパティのtodosにmodelを設定しています。これにより、Mirageはインメモリデータベースに空のtodosコレクションを作成します。

インメモリデータベースにデータを登録する

次に、seedsフックを使ってインメモリデータベースにデータを手動で追加します。seedsフックを使うと、Mirageに初期データを設定できるため、アプリケーションの初回起動時からモックAPIに表示用のデータを用意できます。

データベースに初期データを登録するには、createServerの設定オブジェクト内でmodelsプロパティの下に次のコードを追加します。

1    //mock.js
2   seeds(server) {
3    server.create("todo", {
4      id: 1,
5      title: "Reach out to a friend",
6      completed: true,
7    });
8
9    server.create("todo", {
10      id: 2,
11      title: "Make breakfast",
12      completed: true,
13    });
14
15    server.create("todo", {
16      id: 3,
17      title: "Text John Doe",
18      completed: false,
19    });
20  },

上記のコードでは、設定オブジェクトにseedsフックを追加しました。seedsフックは、引数としてサーバーのインスタンスを受け取ります。

次に、サーバーインスタンスでcreateメソッドを呼び出し、インメモリデータベースにデータを追加しました。createメソッドは2つの引数を受け取ります。1つ目はデータを保存するコレクションの単数形の名前（例：「todos」は「todo」）、2つ目は保存するデータです。

モックルートハンドラーを定義する

次に、routesフックを使ってルートハンドラーを定義します。routesフックでは、利用可能な各パスとHTTPリクエストに対するルートハンドラーを指定できます。

API呼び出しのルートハンドラーを追加するには、createServerの設定オブジェクトでseedsフックの直下に次のコードを追加します。

1routes() {
2    this.namespace = "api/todos";
3
4    this.get("/", (schema, request) => {
5      return schema.todos.all().models
6    });
7  },

上記のコードでは、routesフックを使ってすべてのルートハンドラーに共通の名前空間（api/todos）を定義しています。これにより、各ルートハンドラーで繰り返し指定する必要がなくなります。

次に、パスとコールバックを受け取るgetメソッドを使ってGETルートハンドラーを定義しました。コールバックでは、アプリからschema引数にアクセスできます。これを使ってインメモリデータベースにアクセスします。また、リクエストボディにアクセスするためのrequest引数も利用できます。

最後に、schema.todosでallメソッドを呼び出し、インメモリデータベース内のすべてのtodoを返しました。schema引数にモデル名を連結すると、インメモリモデルにアクセスできます。allメソッドは、modelNameとmodelsの2つのプロパティを持つCollectionオブジェクトを返します。

modelNameプロパティはモデル名、modelsプロパティは登録済みデータを含む配列です。

次のコードをroutesフックに追加して、POSTルートハンドラーを定義します。

1  this.post("/new", (schema, request) => {
2       let attrs = JSON.parse(request.requestBody);
3       attrs.completed = false;
4
5       return schema.todos.create(attrs);
6   });

上記のコールバック関数では、リクエストオブジェクトからリクエストボディを取得して解析します。新しいタスクはデフォルトで未完了にするため、completedプロパティをfalseに設定します。Mirageは、インメモリデータベースに最初に登録された最後のtodoのidをインクリメントして、新しいtodoに一意のidを自動で割り当てます。最後に、`create``メソッドを使って新しいtodoをデータベースに追加しました。

次のコードをroutesフックに追加して、PATCHルートハンドラーを定義します。

1   this.patch("/:id", (schema, request) => {
2       let newAttrs = JSON.parse(request.requestBody);
3       let { id } = request.params;
4       let todo = schema.todos.find(id);
5       return todo.update(newAttrs);
6   });

上記のコールバック関数では、リクエストオブジェクトからリクエストボディを取得して解析します。次に、リクエストボディに付属するparamsオブジェクトからidプロパティを分割代入します。findメソッドを使って、インメモリデータベースから一致するidを持つtodoを検索します。最後に、updateメソッドを使ってtodoを更新します。

次のコードをroutesフックに追加して、DELETEルートハンドラーを定義します。

1  this.delete("/:id", (schema, request) => {
2       let { id } = request.params;
3       return schema.todos.find(id).destroy();
4   });

この関数では、リクエストボディに付属するparamsオブジェクトからidプロパティを分割代入します。次に、findメソッドを使ってインメモリデータベースから一致するidを持つtodoを検索し、destroyメソッドを呼び出してインメモリデータベースから削除しました。

完成したモックサーバーは次のようになります。

1import { createServer, Model } from "miragejs";
2
3const createMockServer = function () {
4 let server = createServer({
5   models: {
6     todos: Model,
7   },
8
9   seeds(server) {
10     server.create("todo", {
11       id: 1,
12       title: "Reach out to a friend",
13       completed: true,
14     });
15
16     server.create("todo", {
17       id: 2,
18       title: "Make breakfast",
19       completed: true,
20     });
21
22     server.create("todo", {
23       id: 3,
24       title: "Text John Doe",
25       completed: false,
26     });
27   },
28
29   routes() {
30     this.namespace = "api/todos";
31
32     this.get("/", (schema, request) => {
33       return schema.todos.all().models;
34     });
35
36     this.post("/new", (schema, request) => {
37       let attrs = JSON.parse(request.requestBody);
38       attrs.completed = false;
39
40       return schema.todos.create(attrs);
41     });
42
43     this.patch("/:id", (schema, request) => {
44       let newAttrs = JSON.parse(request.requestBody);
45       let id = request.params.id;
46       let todo = schema.todos.find(id);
47       return todo.update(newAttrs);
48     });
49
50     this.delete("/:id", (schema, request) => {
51       let id = request.params.id;
52       return schema.todos.find(id).destroy();
53     });
54   },
55 });
56
57 return server;
58};
59
60export default createMockServer;

最後に、createMockServer関数をApp.jsファイルにインポートし、App.jsファイル内でcreateMockServer関数を呼び出してモックサーバーを起動します。

たとえば、次のようにします。

1//app.js
2import createMockServer from "./mock";
3
4createMockServer();

Reactアプリケーションを開くと、モックAPIに登録したデータがToDoアプリに表示されます。

これで、実際のバックエンドAPIを使う場合と同じようにToDoアプリをテストできます。

モックAPIサーバーのまとめ

この記事では、モックAPIサーバーの概要とその重要性、作成時のベストプラクティス、役立つツールについて解説しました。また、Mirage JSを使って簡単なモックAPIサーバーを作成する方法も紹介しました。

開発プロセスにモックAPIサーバーを取り入れると、開発を効率化し、独立して作業できるようになるため、ワークフローの改善につながります。