開発初期の段階で、バックエンドの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分で実現できます!ぜひプロジェクトに取り入れてみてください。