投稿日： 2019年6月14日
最終更新日： 2023年3月28日

【簡単オススメMockAPI】Mockoonを使って爆速でMacやWindowsマシンのローカル環境にStubサーバーを作ってみよう【Node.js】

YouTubeも見てね♪

ねこじゃすり

ワタオカねこじゃすりライトグレー

created by Rinker

PEPPY(ペピイ)

¥3,850 (2025/01/05 12:56:12時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品！

[ノースフェイス] THE NORTH FACE メンズアウターマウンテンライトジャケット

created by Rinker

THE NORTH FACE(ザノースフェイス)

¥33,000 (2025/01/05 13:22:08時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です！

レッドブルエナジードリンク 250ml×24本

created by Rinker

Red Bull(レッドブル)

¥4,000 (2025/01/05 12:33:39時点 Amazon調べ-詳細)

翼を授けよう！

モンスターエナジー 355ml×24本 [エナジードリンク]

アサヒ飲料モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker

モンスター

¥4,718 (2025/01/05 12:33:40時点 Amazon調べ-詳細)

脳を活性化させるにはこれ！

Bauhutte ( バウヒュッテ ) 昇降式 L字デスクブラック BHD-670H-BK

created by Rinker

Bauhutte(バウヒュッテ)

¥15,855 (2025/01/05 12:09:12時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！

BANDAI SPIRITS ULTIMAGEAR 遊戯王千年パズル 1/1スケール

created by Rinker

BANDAI SPIRITS(バンダイスピリッツ)

¥10,429 (2025/01/05 12:09:13時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ！！

MOFT X 【新型ミニマム版】 iPhone対応スマホスタンド

created by Rinker

MOFT

Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！

爆速でMockサーバーを構築しよう

簡単なStubを用意したいだけなのに・・・

技術調査や初期開発フェーズでは、自由にリクエストを投げれるサーバーが存在しない事が多く、そのためにMockサーバーを用意するという事は少なく無いと思います。

しかし、そのためにサーバーを借りたり、Mockサーバー構築のためのプログラムを構築したりと、やりたい事に対する作業ボリュームが多いですよね。orz

そんな時は、今回紹介するMockoonを使って爆速でローカルマシンにMockサーバーを構築しちゃいましょう！

Mockoon

What’s?

Mockoonとは、GUIベースのモックサーバーを構築するためのアプリケーションとなっています。

Mock API in seconds

Mockoon is the easiest and quickest way to run mock APIs locally.
No remote deployment, no account required, open source.Mock API in seconds – Mockoon

要約すると、「Mockoonを使えばMockAPIをローカルで構築する事が出来るよ！」との事です！

すごい自信ですね！！！笑

しかし、実際にそのくらい簡単爆速でローカルにMockAPIを構築する事が出来たので、あながち間違いでは無いですね。

また、内部的にはNode.jsを使ってElectronで作成しているようですね。
サーバーは同じくNode.jsのExpressです。

また、ネーミングはRaccoon(たぬき)から来ているようです。
意味は特になさそうなのであくまで語感で名前をつけた感じですかね？ロゴもたぬきの顔っぽくて可愛い！笑

GUIなので分かりやすい

GUIアプリケーションからサーバーを立てたりエンドポイントを追加編集出来るので、とても直感的で簡単です。

小難しいところはアプリケーション内部がよしなにやってくれるので、簡単に導入出来てしまうところが便利ですよね♪

また、GUIのため作成したエンドポイントの一覧や詳細がとても見やすくなっています。

HttpMethodやHttpStatusも選択式なのでポチポチで設定変更出来ちゃうのも楽ですよね♪

ホットリロード機能

モックサーバーを起動した状態でレスポンスを編集すると、再起動すること無く変更が反映されます。

再起動する手間がないのはとても便利ですよね♪

ただ、エンドポイントを変える場合はリロードが必須なので注意です。

手順

インストール

Homebrew

定番のHomebrewからのインストールにも対応しています。

==> Satisfying dependencies
==> Downloading https://github.com/mockoon/mockoon/releases/download/v1.4.0/mockoon.setup.1.4.0.dmg
==> Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/97478419/b3611c00-765e-11e9-9c45-264f028d28b3?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20190702%2Fus-east-1%2Fs3%2Faws4_r
######################################################################## 100.0%
==> Verifying SHA-256 checksum for Cask 'mockoon'.
==> Installing Cask mockoon
==> Moving App 'Mockoon.app' to '/Applications/Mockoon.app'.
🍺  mockoon was successfully installed!

==> Satisfying dependencies

==> Downloading https://github.com/mockoon/mockoon/releases/download/v1.4.0/mockoon.setup.1.4.0.dmg

==> Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/97478419/b3611c00-765e-11e9-9c45-264f028d28b3?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20190702%2Fus-east-1%2Fs3%2Faws4_r

######################################################################## 100.0%

==> Verifying SHA-256 checksum for Cask 'mockoon'.

==> Installing Cask mockoon

==> Moving App 'Mockoon.app' to '/Applications/Mockoon.app'.

🍺 mockoon was successfully installed!

インストーラー

Homebrewが使えない場合は、公式サイトからOSに合わせたインストーラーをダウンロードしましょう。

ダウンロードしたインストーラーを実行する事で設定等をする必要なくインストールは完了します。

起動

インストールが完了したらアプリケーションを起動してみましょう。

小難しい初期設定等もなくアプリケーションが起動したと思います。

サーバー起動

では、試しにMockサーバーを起動してみましょう。緑の実行ボタンをクリックする事でサーバーが起動します。

この状態でリクエストを投げてみましょう。

デフォルトではportが3000で/anserが有効になっています。

< HTTP/1.1 200 OK
< X-Powered-By: Express
< Content-Type: text/plain; charset=utf-8
< Content-Length: 0
< ETag: W/"0-2jmj7l5rSw0yVb/vlWAYkK/YBwk"
< Date: Wed, 12 Jun 2019 09:00:17 GMT
< Connection: keep-alive
<
* Connection #0 to host localhost left intact

< HTTP/1.1 200 OK

< X-Powered-By: Express

< Content-Type: text/plain; charset=utf-8

< Content-Length: 0

< ETag: W/"0-2jmj7l5rSw0yVb/vlWAYkK/YBwk"

< Date: Wed, 12 Jun 2019 09:00:17 GMT

< Connection: keep-alive

* Connection #0 to host localhost left intact

はい、爆速で完成です。

機能紹介

動的なレスポンスを生成可能

Stubサーバーの場合、基本的にはある程度固定のレスポンスしか返せないのが普通ですが、Mockoonであればある程度動的なレスポンスを返却する仕組みが備わっています。

具体的には、リクエストの情報をレスポンスに含めたり簡単なケース文を指定出来るのでリクエスト/レスポンスのリアルに近い動きが見えやすくなるというメリットがあります。

{
   "userId": "{{ urlParam 'id'}}",
   "name": "{{ queryParam 'name' 'John' }}",
   "lang": "{{{header 'Accept-Language' 'en'}}}",
   "elementTitle": "{{ body 'elements.0.title' 'default' }}",
   "ip": "{{ ip }}",
   "method": "{{ method }}",
   "hostname": "{{ hostname }}",
   "friends": [
     {{#repeat 2}}
     {
       "id": {{@index}},
       "name": "{{ firstName }} {{ lastName }}"
     }
     {{/ repeat}}
   ],
   "oneItem": "{{ oneOf(array 'item1' 'item2' 'item3') }}",
   "someItems": "{{ someOf(array 'item1' 'item2' 'item3') 1 2 }}",
   "userName":
     {{#switch (urlParam 'id')}}
       {{#case "1"}}"John"{{/case}}
       {{#case "2"}}"Jack"{{/case}}
       {{#default}}"Peter"{{/default }}
     {{/switch}}
}

{

"userId": "{{ urlParam 'id'}}",

"name": "{{ queryParam 'name' 'John' }}",

"lang": "{{{header 'Accept-Language' 'en'}}}",

"elementTitle": "{{ body 'elements.0.title' 'default' }}",

"ip": "{{ ip }}",

"method": "{{ method }}",

"hostname": "{{ hostname }}",

"friends": [

{

"id": {{@index}},

"name": "{{ firstName }} {{ lastName }}"

}

"oneItem": "{{ oneOf(array 'item1' 'item2' 'item3') }}",

"someItems": "{{ someOf(array 'item1' 'item2' 'item3') 1 2 }}",

"userName":

{{#case "1"}}"John"{{/case}}

{{#case "2"}}"Jack"{{/case}}

{{#default}}"Peter"{{/default }}

}

もちろん複雑な動的レスポンスの生成は厳しそうですが、これだけでも十分Stubサーバーとしては便利な機能となっています。

レスポンスヘッダーもカスタム可能

モックAPIのレスポンスヘッダーも簡単にカスタム可能です。

< HTTP/1.1 200 OK
< X-Powered-By: Express
< Content-Type: application/json; charset=utf-8
< HOGE: FUGA # 追加されている
< Content-Length: 121
< ETag: W/"79-NunjB3DzdDmDDPMzc1O3Wx2nv10"
< Date: Fri, 14 Jun 2019 13:06:34 GMT
< Connection: keep-alive

< HTTP/1.1 200 OK

< X-Powered-By: Express

< Content-Type: application/json; charset=utf-8

< HOGE: FUGA # 追加されている

< Content-Length: 121

< ETag: W/"79-NunjB3DzdDmDDPMzc1O3Wx2nv10"

< Date: Fri, 14 Jun 2019 13:06:34 GMT

< Connection: keep-alive

レスポンスヘッダーにMockoonで定義した項目が追加されていますね♪

設定ファイル管理が可能

このMockoonの設定については、設定ファイルでの管理が可能です。

export

現在の設定をすべて出力する場合はTools > Export all environmentsでファイル出力可能です。

これでJsonファイルが生成されます。

{
    "id": "mockoon_export",
    "appVersion": "1.4.0",
    "checksum": "7f2a84418b3d15e583fd9925a5f7830a",
    "subject": "full",
    "data": [
        {
            "uuid": "d6fb1690-8cf0-11e9-8ffc-611e08794da7",
            "name": "LocalMock",
            "endpointPrefix": "",
            "latency": 0,
            "port": 3001,
            "routes": [
                {
                    "uuid": "",
                    "documentation": "",
                    "method": "get",
                    "endpoint": "accounts",
                    "body": "{\n   \"accounts\": [\n        {\n            \"id\": 1001,\n            \"name\" : \"Taro\",\n            \"age\": 20\n        },{\n            \"id\": 1002,\n            \"name\" : \"Jiro\",\n            \"age\": 19\n        },{\n            \"id\": 1003,\n            \"name\" : \"Hanako\",\n            \"age\": 18\n        }\n    ]\n}",
                    "latency": 0,
                    "statusCode": "200",
                    "headers": [
                        {
                            "key": "HOGE",
                            "value": "FUGA"
                        }
                    ],
                    "filePath": "",
                    "sendFileAsBody": false
                },
                {
                    "uuid": "7f4942c0-8cf3-11e9-8ffc-611e08794da7",
                    "documentation": "",
                    "method": "get",
                    "endpoint": "blogs",
                    "body": "{\n   \"blogs\": [\n        {\n            \"id\": 2001,\n            \"title\" : \"爆速\",\n            \"author\": \"Taro\"\n        },{\n            \"id\": 2002,\n            \"name\" : \"モック\",\n            \"author\": \"Jiro\"\n        },{\n            \"id\": 2003,\n            \"name\" : \"サーバー\",\n            \"author\": \"Hanako\"\n        }\n    ]\n}",
                    "latency": 0,
                    "statusCode": "200",
                    "headers": [
                        {
                            "key": "",
                            "value": ""
                        }
                    ],
                    "filePath": "",
                    "sendFileAsBody": false
                }
            ],
            "proxyMode": false,
            "proxyHost": "",
            "https": false,
            "cors": true,
            "headers": [
                {
                    "key": "Content-Type",
                    "value": "application/json"
                }
            ]
        }
    ]
}

{

"id": "mockoon_export",

"appVersion": "1.4.0",

"checksum": "7f2a84418b3d15e583fd9925a5f7830a",

"subject": "full",

"data": [

{

"uuid": "d6fb1690-8cf0-11e9-8ffc-611e08794da7",

"name": "LocalMock",

"endpointPrefix": "",

"latency": 0,

"port": 3001,

"routes": [

{

"uuid": "",

"documentation": "",

"method": "get",

"endpoint": "accounts",

"body": "{\n \"accounts\": [\n {\n \"id\": 1001,\n \"name\" : \"Taro\",\n \"age\": 20\n },{\n \"id\": 1002,\n \"name\" : \"Jiro\",\n \"age\": 19\n },{\n \"id\": 1003,\n \"name\" : \"Hanako\",\n \"age\": 18\n }\n ]\n}",

"latency": 0,

"statusCode": "200",

"headers": [

{

"key": "HOGE",

"value": "FUGA"

}

"filePath": "",

"sendFileAsBody": false

{

"uuid": "7f4942c0-8cf3-11e9-8ffc-611e08794da7",

"documentation": "",

"method": "get",

"endpoint": "blogs",

"body": "{\n \"blogs\": [\n {\n \"id\": 2001,\n \"title\" : \"爆速\",\n \"author\": \"Taro\"\n },{\n \"id\": 2002,\n \"name\" : \"モック\",\n \"author\": \"Jiro\"\n },{\n \"id\": 2003,\n \"name\" : \"サーバー\",\n \"author\": \"Hanako\"\n }\n ]\n}",

"latency": 0,

"statusCode": "200",

"headers": [

{

"key": "",

"value": ""

}

"filePath": "",

"sendFileAsBody": false

}

"proxyMode": false,

"proxyHost": "",