サーバーサイドの実装がまだないときとか環境設定が面倒なとき、クライアントサイドでWebリクエストを投げるコードをそれっぽく書いて試したいみたいなケースで、json-serverというJSのツールが便利でした。
僕の場合はwebページ上でXHRを投げる部分を試したくてjson-serverを使いました。
そのときはあまり気づかなかったですが、Star数えぐいですね。3万超えです。
コマンドベースのツールで、npmで入れます。
% npm install -g json-server
jsonファイルを指定して起動します。
% json-server --watch db.json
中身はリクエスト時に返すための情報が書かれてします。
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
こんへんはドキュメントをみればすぐにわかります。
で、いいなーと思ったのは、サーバーを起動したときです。標準出力に↓のような情報がでています。
ResourcesというところにURLがリストされていますね。ここで有効なURLをパッと確認できるので例えばブラウザで叩くなり、curlコマンドで試すなり、クライアントサイドのアプリから試すなりと色々な使い方ができます。
% json-server --watch db.json
\{^_^}/ hi!
Loading db2.json
Done
Resources
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile
Home
http://localhost:3000
Type s + enter at any time to create a snapshot of the database
Watching...
GET /posts/ 200 8.440 ms - 77
GET /posts/1 200 4.913 ms - 63
GET /posts/2 404 3.118 ms - 2
GET /profile 200 2.962 ms - 24
また、GET以外のリクエストにも対応しています。まずはPOSTを試してみます。（リクエストを組み立てるのにPostmanを使いました）
http://localhost:3000/postsに次のようなjsonをPOSTしました。
{
"id": 2,
"title": "added by post request",
"author": "hiro"
}
するとコンソールにはこのようなログが流れ→POST /posts 201 53.069 ms - 69、元ファイルにはid=2のpostが登録されています。
{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
},
{
"id": 2,
"title": "added by post request",
"author": "hiro"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}
http://localhost:3000/posts/2にDELETEを投げたところ先程追加されたid=2のpostが削除されます。
というような感じでサーバーサイドがなくても、リクエストを投げて返ってくるような簡易なサーバーを一瞬で立てられます。ダミーでいいから誰かにリクエストを投げて動きを確認したいみたいなときに重宝するのではないかと思います。