2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Prismで1分でローカルにモックサーバーを立てる

2
Last updated at Posted at 2026-08-30

はじめに

異業種からIT企業に転職して半年以上の初心者です:beginner:
今月は、最近、仕事でPrismサーバーを扱う機会がありました。
これまで存在を知らなかったのですがとっても便利だったので、復習がてら自分でもサーバーを立ててみました!
なので備忘録も兼ねて使い方をまとめます。

Prismサーバーとは?

一言で言うと、OpenAPIの仕様書をもとに、本物のAPIのように振る舞う仮のサーバー(モック)を簡単に作れるツールです。

通常、フロントエンド開発でモックを使おうとすると、レスポンス用のダミーデータ(JSONファイルなど)をエンドポイントごとにわざわざ手動で作る必要があるため手間がかかります。

ですが、Prismを使えば openapi.yaml(API仕様書)があるだけで、自動で適切なレスポンス(モックデータ)を生成してくれます。個別でJSONファイルを用意する手間がないので、バックエンドの実装を待たずにフロントエンド開発を進められるのが一番のメリットです。

初登場ワード

Prismを扱うにあたり、openapi.yamlとSwaggerはどこにでも出てくるので軽くまとめておきます。

1. openapi.yaml とは?

APIの設計書(仕様)を記述するためのYAMLファイルです。
「どのURL(エンドポイント)にどんな形式でアクセスしたら、どんなデータが返ってくるか」が書かれています。

2. Swagger とは?

OpenAPI仕様(openapi.yaml など)を人間が見やすいドキュメント(ブラウザ上の画面)として表示したり、画面上からテストリクエストを送ったりできるツール群のことです。

イメージのまとめ

  • openapi.yaml : APIの設計書(データ)
  • Swagger : 設計書を見やすく表示するWeb画面
  • Prism : 設計書通りに動く仮想のAPIサーバー

Prismのセットアップと実行手順

手順1: openapi.yamlを用意する

プロジェクトのルートディレクトリに openapi.yaml という名前で以下のサンプルファイルを保存します。
※実際に返却してほしいデータ等はexampleに設定することで、その値が返却されます。

openapi.yaml
openapi: 3.0.0
info:
  title: Sample User API
  version: 1.0.0
paths:
  /users/{id}:
    get:
      summary: ユーザー情報を取得
      parameters:
        - name: id
          in: path
          required: true
          schema:
            type: integer
      responses:
        '200':
          description: 成功時のレスポンス
          content:
            application/json:
              schema:
                type: object
                properties:
                  id:
                    type: integer
                    example: 1
                  name:
                    type: string
                    example: "山田太郎"
                  role:
                    type: string
                    example: "developer"

手順2: Prismを起動する

npxを使えば、事前インストールなしで直接実行できます。

npx @stoplight/prism-cli mock openapi.yaml

コマンドを実行すると、ターミナルに以下のような出力が表示され、サーバーが起動します。

[CLI] Prism is listening on http://127.0.0.1:4010

手順3: 実際にリクエストを送ってみる

別のターミナルを開き、curl コマンドでアクセスしてみます。

curl http://127.0.0.1:4010/users/1

実行結果

{
  "id": 1,
  "name": "山田太郎",
  "role": "developer"
}

openapi.yamlexample に書いたデータがそのまま返ってきました!

💡 叩くURLに注意!
http://127.0.0.1:4010/(末尾の /users/1 なし)にアクセスすると、Route not resolved, no path matched というエラーになります。
必ず定義したパス(/users/1 など)を指定してリクエストを送る必要があります◎

使ってみて感じたPrismのメリット

  1. 設定がめちゃくちゃ簡単: 設定ファイルを一切書かず、YAMLを指定するだけで動く。
     (API仕様書をそのまま流用できるので仕様書をExcel等で作成する必要もない)
  2. 型チェックをしてくれる: 定義にないリクエストを送るとエラーを返してくれるため、実際のAPI開発に近い状態でテストができる。
  3. フロントエンド開発が止めずに進む: バックエンドの実装待ち時間がゼロになる。

おわりに

最初はPrismやOpenAPIなど初めて遭遇するものばかりでしたが、仕組みを理解して動かしてみると非常にシンプルなツールでした。
この記事が、自分と同じようにPrismを初めて触る方のちょっとした参考になれば幸いです。

2
0
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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?