こんにちは！バックエンドの実装待ちで、フロントエンドの手が止まってイライラした経験はありませんか？「APIの仕様書はあるのに、エンドポイントがまだ動かないから画面を作れない……」というあのジレンマです。
これを一発で解決するのが、今回紹介する 「Stoplight Prism（プリズム）」 を使ったモックサーバー構築術です。
これをマスターすれば、バックエンドの開発スピードに依存せず、あなたが主導権を握ってフロントエンド開発を爆速で進められるようになりますよ。毎日のコーディングが劇的に楽しくなるはずです。一緒に手を動かしていきましょう！
—
なぜSwagger / OpenAPIの「モック」が最強なのか？
私たちが普段書く、あるいは受け取る OpenAPI（旧Swagger）の定義ファイル（YAMLやJSON）。これ、ただドキュメントとしてブラウザで眺めるだけではもったいないです。
OpenAPIの定義ファイルは、いわば「APIの契約書（コントラクト）」です。この契約書さえあれば、実際のサーバープログラム（Node.jsやGo、Rubyなど）が1行も書かれていなくても、「こういうリクエストを投げたら、こういうレスポンスを返す」という偽物（モック）のサーバーを数秒で立ち上げることができます。
ここで登場するのが、モックサーバー生成ツールの最高峰 Stoplight Prism です。
Prismの何が凄いかというと、「OpenAPIの定義ファイルを読み込ませるだけで、自動的にバリデーション付きのモックサーバーを起動してくれる」点にあります。適当なJSONを返すだけのチャチなモックとは違い、リクエストのパラメータが間違っていればちゃんと400エラーを返してくれる、非常に頭の良いやつです。
—
Step 1: 環境構築とPrismのインストール
まずは、お使いのPCにPrismを迎え入れましょう。
PrismはNode.js製ツールなので、Node.js（LTS版推奨）がインストールされている環境が必要です。
ターミナル（MacならiTermやTerminal、WindowsならPowerShellなど）を開き、以下のコマンドを叩いてグローバルインストールします。
Stoplight Prismのグローバルインストール
npm install -g @stoplight/prism-cli
インストールが成功したか、バージョンを確認してみましょう。
prism –version
バージョン番号（例: `v5.x.x` など）が表示されれば、準備完了です！
—
Step 2: 精度高い「Hello World」！最小限のOpenAPI定義を用意する
「モックサーバーなんて難しそう」と思うかもしれませんが、驚くほど簡単です。まずは最小限のOpenAPI（YAML）ファイルを作成し、動かしてみましょう。
プロジェクト用の適当なフォルダを作り、その中に `openapi.yaml` というファイルを作成してください。
`openapi.yaml`
openapi: 3.0.0
info:
title: 爆速フロントエンド開発のためのサンプルAPI
version: 1.0.0
paths:
/greetings:
get:
summary: 挨拶を返すシンプルなエンドポイント
description: フロントエンドの初期表示テスト用に使えます。
responses:
‘200’:
description: 成功時のレスポンス
content:
application/json:
schema:
type: object
properties:
message:
type: string
example: “こんにちは！Prismの世界へようこそ！”
author:
type: string
example: “シニアエンジニア先輩”
たったこれだけです。この数行のYAMLが、あなたの強力なAPIサーバーに変貌します。
—
Step 3: 魔法のコマンドでモックサーバーを起動する
それでは、先ほど作成した `openapi.yaml` を使って、Prismのモックサーバーを起動しましょう。ターミナルで以下のコマンドを実行してください。
prism mock openapi.yaml
おっと、次のようなログが流れてサーバーが立ち上がりましたね？
[CLI] ✨ Starting Prism…
[CLI] ℹ️ Loading 1 file from openapi.yaml
[CLI] ℹ The following operations will be available:
[CLI] GET /greetings
[CLI] ╔════════════════════════════════════════════════════════╗
[CLI] ║ Mock Server: http://127.0.0.1:4010 ║
[CLI] ╚════════════════════════════════════════════════════════╝
[CLI] ℹ️ Prism is now simlulating: `0.0.0.0` / `127.0.0.1`
おめでとうございます！これで `http://127.0.0.1:4010` にモックサーバーが起動しました。
動作確認をしてみよう
別のターミナルタブを開くか、ブラウザ（またはcURL、Postmanなど）で以下のURLにアクセスしてみてください。
curl http://127.0.0.1:4010/greetings
どうでしょうか？以下のようなJSONが返ってきたはずです。
{
“message”: “こんにちは！Prismの世界へようこそ！”,
“author”: “シニアエンジニア先輩”
}
バックエンドのエンジニアがまだ寝ていようが、コードを1行も書いてなかろうが、あなたの手元にはすでに「動くAPI」が存在しています。これでフロントエンドのAPIクライアント実装（AxiosやFetchなど）を迷いなく進められますね。
—
Step 4: さらに実践的！動的なレスポンス制御とエラーシミュレーション
実際の開発では、「正常系」だけでなく、「エラー系（400 Bad Requestや500 Internal Server Error）」の画面バリデーションや、複数のデータパターンをテストしたいですよね。
Prismは、OpenAPIの定義にちょっとした工夫をするだけで、動的なレスポンス制御やエラーシミュレーションを完璧にこなしてくれます。
1. 複数のレスポンス例（Examples）を用意する
同じ `200 OK` でも、ユーザーのステータスによって返すデータを変えたい場合、OpenAPIの `examples` 機能を使います。
抜粋
responses:
‘200’:
description: ユーザー情報の取得
content:
application/json:
schema:
type: object
properties:
id: { type: integer }
name: { type: string }
examples:
# パターンA: 通常ユーザー
normalUser:
summary: 一般ユーザーの例
value:
id: 1
name: “山田 太郎”
# パターンB: プレミアムユーザー
premiumUser:
summary: プレミアム会員の例
value:
id: 2
name: “テック 太郎 (VIP)”
このように定義しておくと、フロントエンド側から特定のヘッダーやクエリを投げることで、返してほしいレスポンスを自在に切り替えることができます。（Prismはデフォルトで定義された最初の例を返しますが、必要に応じて切り替え制御も可能です）
2. あえて「エラー」を発生させてみる
「APIがエラーを返したときの、フロントエンドのエラーハンドリング（トースト通知など）が正しく動くかテストしたい」
そんな時もPrismなら一瞬です。
Prismを起動する際に、少しオプションを加えてみましょう。通常、Prismはリクエストがスキーマに違反しているとバリデーションエラーを返しますが、特定のステータスコードを強制的にテストしたい場合は、プレビュー機能やコントラクトテストの文脈を活用します。
また、Prismはデフォルトでリクエストのバリデーションを行います。例えば、必須のクエリパラメータが抜けている状態でリクエストを投げると、Prismが自動的に `400 Bad Request` を返してくれます。
実際に試してみましょう（もし定義に必須パラメータを設定している場合）。フロントエンドが意図しないデータを送ったときに、モックサーバーがちゃんと怒ってくれるか確認できるため、手戻りのない堅牢なコードが書けるようになります。
—
プロからのアドバイス：チーム開発への組み込み方
このPrismによるモックサーバー、個人のローカル開発で使うだけでも十分すぎるほどの効果がありますが、チーム開発に組み込むとさらに真価を発揮します。
1. GitリポジトリにOpenAPI定義を置く
プロジェクトのルートに `api/` などのディレクトリを作り、OpenAPIのYAMLファイルをチーム全員で管理します。
2. `package.json` にモック起動スクリプトを仕込む
フロントエンドの `package.json` に以下のようなスクリプトを書いておきます。
“scripts”: {
“mock”: “prism mock api/openapi.yaml”
}
これで、メンバーは `npm run mock` を叩くだけで、全員が同じモック環境を共有できるようになります。
—
まとめ
今回は、Stoplight Prismを使ってフロントエンド開発を爆速化する手法を解説しました。
- OpenAPI定義ファイルさえあれば、数秒で高機能なモックサーバーが手に入る
- Prismなら、リクエストのバリデーションも自動で行ってくれる
- バックエンドの実装を待つ必要が一切なくなり、自分のペースで開発を進められる
「仕様書ファースト」で開発を進める文化がチームに定着すると、手戻りが劇的に減り、プロダクトの品質も跳ね上がります。ぜひ今日の開発から、あなたのプロジェクトにPrismを取り入れてみてください。
毎日のコーディングが、もっと自由で楽しいものになることを応援しています！