結論
json-serverがめっちゃ便利
手順
インストール
npm 環境がすでにあれば
npm install -g json-server
で完了
なければ nodeのバージョンをnで管理する などを読みつつnodeとnpmをインストールしてください
準備するもの
- コンソール
- db.json
- ブラウザ(動作確認用)
やること
db.json ファイルを作成する
bashの touch
コマンドやWindowsなら右クリックからなどでお好きなようにファイルを作ってください
db.json にリソースを登録する
ここでモックサーバから返して欲しいデータリストを列挙します
最上位の階層の key
がエンドポイントになります
{
"users": [
{"id": 1, "name": "hoge"},
{"id": 2, "name": "fuga"}
],
"tweets": [
{"id": 1, "contents": "あー眠い", "user-id": 1},
{"id": 2, "contents": "ファビュラス!", "user-id": 1}
]
}
db.json ファイルがあるところでjson-serverを実行
db.jsonファイルがあるディレクトリで
json-server db.json
を実行!
動作確認
デフォルトだと localhost:3000
で実行されるので、ブラウザを使ってアクセス
完了!
root エンドポイント(http://localhost:3000)
/users エンドポイント (http://localhost:3000/users)
/tweets エンドポイント (http://localhost:3000/tweets)
※ 筆者が JSON View というChrome拡張を入れているため、見た目が異なる場合がございます。
その他便利機能
モックサーバから送られるデータをサーバ再起動無しで書き換える
--watch
オプションというめっちゃ便利なオプションを使えば
db.json
ファイルに対して行った変更を検知してサーバのレスポンスに反映させてくれます!
便利!(*´∀`)
現状のDBの状態をスナップショットとして保存する
たくさんPOSTのリクエストを行った後や一通りテストを走らせた後などに、現状のリソースの状態(db.jsonの中身)を保存したいときには
コンソールにフォーカスを当てた状態で s → Enter
とタイプすれば自動的に別名でJSONファイルを書き出してくれます!
便利!(*´∀`)
追記(2017/08/23)
はてなブックマークのコメントにとても良いコメントがあったので(勝手に)追記させていただきました!
Chinosoko さん、読んでくださり有り難うございます!
もし、問題がありましたら Twitter かこちらのコメントでご連絡ください…!
ソートやページネーションもできる、この記事で想像したよりずっと高機能な代物だった。/ 部品として使って自分で処理を書けば、レスポンスを改変して任意のステータスにすることもできる。一から書くより大分楽そう