はじめまして、こんにちは！
MyTalent開発チームのフロントエンドエンジニア・田中です😎
今日は「Mockoon」というローカル環境でお手軽にモックサーバーを立ち上げることができるアプリケーションをご紹介したいと思います！
Mockoonとは
Mockoonは2017年に登場したAPIモックサーバーをローカルで簡単に作成・実行できるオープンソースのアプリケーションです。
API開発やテストにおいて、実装が先行しがちなフロントエンドに対しバックエンドでの実装がされていない場合や、外部APIへの依存を避けたい場合に非常に役立ちます。
GUIベースで直感的に操作でき、環境構築や設定に手間取ることなく、すぐにモックサーバーを作成して利用を開始できます。
Mockoonの魅力
フロントエンドの開発をしていると、一度は下記のような経験をしたことがあるはずです…！
UIデザインとAPI仕様書はあるんだけど、バックエンドのAPIの実装がまだ揃っていない…！
そんな中で、やはり真っ先に浮かぶのがAPIモックサーバーではないでしょうか？
しかし、思い立ったがすぐ、いざモックサーバーを１から作成しようとするとかえって ヤクの毛刈り のような状態になってしまったり、あるいはとてもコスパが悪かったりと、モックサーバーの構築や運用が容易でないケースがほとんどかと思います。
逆にそこまで大きくない機能開発であれば、ちょっとコード内にハードコードして直接データを埋め込んで開発してみたり、レビュー時にレビュワーに「L100 ~ L110までを以下のように変更してください！」とお願いしてしまえば事足りるケースもあります。
ですが、いずれも融通や柔軟性に限りがある上にリスクがあることは明らかです…
では、下記の要件を満たせるアプリケーションがあるとすれば、どうでしょうか…？？✨
- 未実装の 一部APIだけをモック し、実装済みのAPIに関しては実際のバックエンドにフォールバックすることができる（実APIを使用することができる）
- 他者と 共通のモックデータ を使うことができる
- GUI を通して容易にレスポンスの種類や内容、応答時間等を柔軟に変更・設定できる
特に1.の要件はjson-serverやMSW、Prismaなどにはない大きな特徴であり、部分的にAPIを模擬しながら開発やテストを進めたい開発シーンを考えると非常に魅力的なポイントです🤩！
作成したモックデータはGit等で共有もできますし、レスポンスを手元でよしなに変更できるというのも他のツールにはない素敵ポイントです🫶
モックデータも OpenAPI の Specification から容易に作成できるので、Mockoonのセットアップに時間はそうかかりません…！
インストール
こちら からインストール可能です！
または Homebrew からも入手できます。
セットアップ
（公式のチュートリアルはこちら）
起動すると以下のような画面が開きます。
画面の構成としては赤枠の部分がエンドポイントのリスト、青枠の部分がAPIの仕様（定義）部分になります。
インストール直後に用意されているデモ用のプリセットは不要であれば消してしまっても問題ありません。（この記事では削除しています）
それでは、必要な環境とエンドポイントを足していきましょう！
UI上のヘッダーの「Routes」から「New local environment」を押下して、設定ファイルを作成します。
すると起動直後と同等の画面が開くはずです。
次に必要なHTTP Routeを作成していきます…！
今回は GET: /users というエンドポイントを作成します。
赤枠の中をそれぞれ埋めていきます。上部の赤枠がパスの部分で、下部の赤枠がレスポンスボディになります。
OpenAPI の specification（.yaml）を Mockoon にインポートしてモックデータを一気に作成することも可能ですが、schema に対応していなかったり、一部のAPIのモックデータのみ必要になるケースを想定すると、Swagger等からレスポンスサンプルをコピペで持ってくるのが一番手っ取り早いです。
ここまで来れば GET: /users のモックの作成は完了です👏
実際にモックサーバーとして機能するか試してみましょう。
画面右上にある 「▶︎」を押下することでモックサーバーが立ち上がります。下記コマンドでレスポンスを確認できれば成功です…！
※ ポート番号は作成した環境によって異なります。画面右の環境名の下に小さく表示されているアドレスを確認してください。
curl http://localhost:3002/users
CORSやProxyの設定を追加する
モックAPIを作成するとき、フロントエンドのアプリケーションとモックされたAPIが同じドメイン上になく、CORSエラーに直面することがあると思います。
各APIのヘッダーにCORS関連のヘッダーを設定できるので、以下の通りに設定していきます。
画面赤枠の部分をクリックすると必要なヘッダーが一通り設定できますが、変更と追加が必要になります。
Access-Control-Allow-Origin を * から アプリケーションのドメインに変更し、Access-Control-Allow-Credentials: true を追加してください…！
必要であれば Content-Type もここで設定できますが、Routesからエンドポイント毎に設定もできますので必須ではありません。
さらに「Setting」タブで表示される画面赤枠部分のチェックの状態も確認しておきます。
ここのチェックをしておくとMockoonが自動的にすべてのOPTIONSでのプリフライトに200で応えるようになり、以下のヘッダーがプリフライトのリクエストに自動で追加されますが、CORSに必要なヘッダーは先ほど設定したので特にONにしておく必要はありません。
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS Access-Control-Allow-Headers: Content-Type, Origin, Accept,Authorization,Content-Length, X-Requested-With
最後にProxyの設定をしてしまいましょう！
こちらを設定しておくことで、「Mockoonで管理しているエンドポイントはMockoonが応答し、それ以外は実際のバックエンド（サーバー）にリクエストを送る」ことができます🤩
「Target URL」に実際のローカル環境で叩いているAPIのパスを入力します。
ここまでの設定で準備が整いました🎉
あとは同じように画面上部の「▶︎」から起動してみましょう…！
うまくいっていればMockoonにモックデータを作成したエンドポイントへのアクセスのみがモックデータを返しており、そのほかは実際の応答が返ってきているはずです…！
モックデータは動的にレスポンスを生成することもでき、また、200 / 400 / 404 などのステータス別にレスポンス自体をルーティングさせることも可能です✨
ほかにも
MockoonにはCRUD機能もあり、複数のエンドポイントを生成し、データバケットに対してCRUD操作（Create、Read、Update、Delete）を実行することができ、小規模なデータベースをシミュレートすることも可能です。
また、Mockoon自体はCLIやDockerのイメージも配布されており、必要に応じて Github Actions上で使うこともできます…！
最後に
今回は「Mockoon」をご紹介させていただきました…！
API仕様書さえ先に作ってしまえばフロントエンドの実装にスピード感が出せるようになったのではないでしょうか…？？
現在、TalentXでは一緒に働く仲間を募集しております。
talentx.brandmedia.i-myrefer.jp
カジュアル面談も行っておりますので、ぜひご応募ください！
