はじめに ![:sleepy:]( ":sleepy:")
JSON Server
https://github.com/typicode/json-server
- 簡単なものならコーディング不要でサクッとAPIをモックできるNode.jsのライブラリ
- 詳しく使い方を知りたい場合は上記リポジトリのREADMEを読んだほうが良い
まえがき
まだAPIが用意できていないけど、フロント側の実装を進めたいときに便利です。
本記事ではサクッと使える簡単なモックと、応用として以下2つの方法を記載したいと思います。
- POSTリクエストで任意のレスポンスを返す
- サーバーサイドエラーのモックする
サクッと使う
任意のディレクトリを作成し移動後、 json-server をインストールする
$ npm install json-server --save-devdb.json を作成し、モックしたいデータを挿入
{"molcars":[{"name":"ポテト","favoriteFood":"ニンジン"},{"name":"シロモ","favoriteFood":"レタス"}],"episodes":[{"id":1,"title":"渋滞は誰のせい？"},{"id":2,"title":"銀行強盗をつかまえろ！"}]}これでおわり！
あとは以下コマンドを叩いて json-server を起動し……
$ json-server --watch db.json
curlなりなんなりで、このように db.json に記載したデータが返却されます。
$ curl -X GET 'http://localhost:3000/molcars'[{"name": "ポテト",
"favoriteFood": "ニンジン"},
{"name": "シロモ",
"favoriteFood": "レタス"}]$ curl -X GET 'http://localhost:3000/episodes'[{"id": 1,
"title": "渋滞は誰のせい？"},
{"id": 2,
"title": "銀行強盗をつかまえろ！"}]応用
上記だけじゃ機能として物足りない場合、
json-server をモジュールとして使用することでほしい機能を追加できます。
json-server をモジュールとして使う
公式のREADMEにあるシンプルなコードです。
constjsonServer=require('json-server')constserver=jsonServer.create()constrouter=jsonServer.router('db.json')constmiddlewares=jsonServer.defaults()server.use(middlewares)server.use(router)server.listen(3000,()=>{console.log('JSON Server is running')})以下コマンドで起動可能
$ node server.js
この時点でできることはサクッと編と基本的に同じで、
上記コマンドで起動したあとにcurlするとdb.jsonの値が同じように返却されます。
というわけで、上記のコードにほしい機能を追加していきましょう。
POSTリクエストで任意のレスポンスを返す
サクッと編で作成したモックでは、
POSTでリクエストを送ると実際に以下のようなレスポンスが返却され、
なおかつこのレスポンスと同じデータが db.jsonに勝手に挿入されます。
{"id":2}(idの値は自動でインクリメントされます。)
なのでPOSTでリクエストした際のレスポンスを設定したい場合や、
勝手に db.jsonに値を追加してほしくない場合は
POSTリクエストを server.js内でGETとして処理するように変更します。
constjsonServer=require('json-server')constserver=jsonServer.create()constrouter=jsonServer.router('db.json')constmiddlewares=jsonServer.defaults()server.use(middlewares)/** ↓ POST を GET として処理する場合はここを追加 ↓ */server.use(jsonServer.bodyParser)// POST, PUT, PATCH を扱うために必要server.use((req,res,next)=>{if(req.method==='POST'){// POST のリクエストを GET に変換req.method='GET'}next()})/** ↑ POST を GET として処理する場合はここを追加 ↑ */server.use(router)server.listen(3000,()=>{console.log('JSON Server is running')})あとは先程と同様に起動して
$ node server.js
curlでレスポンスが返ってくることが確認できます。
$ curl -X POST 'http://localhost:3000/molcars'[{"name": "ポテト",
"favoriteFood": "ニンジン"},
{"name": "シロモ",
"favoriteFood": "レタス"}]サーバーサイドエラーのモック方法
公式のREADMEに記載されていますが、
レスポンスを変更したい場合は router.render メソッドを上書きします。
任意のステータスコードおよびエラーメッセージを返す場合はserver.jsを以下のように変更します。
constjsonServer=require('json-server')constserver=jsonServer.create()constrouter=jsonServer.router('db.json')constmiddlewares=jsonServer.defaults()server.use(middlewares)server.use(router)server.listen(3000,()=>{console.log('JSON Server is running')})/** ↓ サーバサイドエラーをモックしたい場合はここを追加 ↓ */router.render=(req,res)=>{// ステータスコードを設定res.status(500).jsonp({error:"PUI PUI"})}/** ↑ サーバサイドエラーをモックしたい場合はここを追加 ↑ */これも同様に起動すれば
$ node server.js
叩いた際に ステータスコード500と
エラーメッセージ「"error": "PUI PUI"」が返却されるようになります。
$ curl -X GET 'http://localhost:3000/molcars'{"error": "PUI PUI"}