はじめに
異業種からIT企業に転職して半年以上の初心者です![]()
今月は、最近、仕事で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: 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.yamlのexample に書いたデータがそのまま返ってきました!
💡 叩くURLに注意!
http://127.0.0.1:4010/(末尾の /users/1 なし)にアクセスすると、Route not resolved, no path matched というエラーになります。
必ず定義したパス(/users/1 など)を指定してリクエストを送る必要があります◎
使ってみて感じたPrismのメリット
- 設定がめちゃくちゃ簡単: 設定ファイルを一切書かず、YAMLを指定するだけで動く。
(API仕様書をそのまま流用できるので仕様書をExcel等で作成する必要もない) - 型チェックをしてくれる: 定義にないリクエストを送るとエラーを返してくれるため、実際のAPI開発に近い状態でテストができる。
- フロントエンド開発が止めずに進む: バックエンドの実装待ち時間がゼロになる。
おわりに
最初はPrismやOpenAPIなど初めて遭遇するものばかりでしたが、仕組みを理解して動かしてみると非常にシンプルなツールでした。
この記事が、自分と同じようにPrismを初めて触る方のちょっとした参考になれば幸いです。