0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

かーくんの隠居アドカレAdvent Calendar 2024

Day 2

3分でできる!OpenAPIモックサーバーの作り方

Last updated at Posted at 2024-12-01

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?