開発初期の段階で、バックエンドのAPIがまだ準備できていないことはよくありますよね。
そんなとき、モックサーバーがあればAPIの挙動を擬似的に体験でき、
開発スピードを大きく向上させることができます！
今回は、openapi.yaml を使ってたった3分でモックサーバーを立てる方法を紹介します。

なぜモックサーバーが必要？

フロントエンド開発の先行が可能：バックエンドが完成する前でも動作確認ができる。
仕様の擦り合わせに便利：APIのレスポンスを実際に見ながら議論が進む。
テストに役立つ：想定通りのレスポンスが得られるかを自動化しやすい。

さっそく始めましょう！

ステップ1: OpenAPI仕様書を準備

まず、APIの定義を書いた openapi.yaml を用意します。以下は簡単なサンプルです：

openapi: 3.0.0
info:
  title: Quick Mock API
  version: 1.0.0
paths:
  /greet:
    get:
      summary: Returns a greeting
      responses:
        '200':
          description: Greeting message
          content:
            application/json:
              schema:
                type: object
                properties:
                  message:
                    type: string
                    example: "Hello, Quick Mock!"

ポイント
- レスポンスの内容を example に記載することで、具体的なデータを指定可能です！

この例では、GET /greet にアクセスすると "Hello, Quick Mock!" というレスポンスを返します。

ステップ2: Prismをインストール

次に、モックサーバー構築用のツール Prism をインストールします。以下のコマンドを実行してください：

npm install -g @stoplight/prism-cli

補足
- Node.jsが必要なので、まだの方はインストールしてください!

ステップ3: モックサーバーを起動

準備が整ったら、次のコマンドでモックサーバーを起動します：

prism mock openapi.yaml

うまくいけば、以下のようなメッセージが表示されます：

[INFO]  Mocking HTTP server running at http://localhost:4010

これで、モックサーバーがローカル環境で起動しました！

ステップ4: 動作確認

下記のコマンドでアクセスしてみてください！

curl http://localhost:4010/greet

以下のようなレスポンスが返ってくれば成功です！

{
  "message": "Hello, Quick Mock!"
}

わずか3分でモックサーバー完成！

これでモックサーバーの立ち上げは完了です。バックエンドの実装を待たずに、APIの挙動を再現できる環境が整いました。
やったね！

まとめ

モックサーバーを使えば、

開発スピードが向上
API設計の問題点を早期発見
チーム間のコミュニケーションが円滑化

Prismを使えば、これらがわずか3分で実現できます！ぜひプロジェクトに取り入れてみてください。