More than 5 years have passed since last update.
フロントエンド実装中に使えるモックサーバを爆速で準備する
結論
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)
👁 Screenshot from 2017-08-12 16:03:03.png
/users エンドポイント (http://localhost:3000/users)
👁 Screenshot from 2017-08-12 16:03:14.png
/tweets エンドポイント (http://localhost:3000/tweets)
👁 Screenshot from 2017-08-12 16:03:23.png
※ 筆者が JSON View というChrome拡張を入れているため、見た目が異なる場合がございます。
その他便利機能
モックサーバから送られるデータをサーバ再起動無しで書き換える
--watch オプションというめっちゃ便利なオプションを使えば
db.json ファイルに対して行った変更を検知してサーバのレスポンスに反映させてくれます!
便利!(*´∀`)
現状のDBの状態をスナップショットとして保存する
たくさんPOSTのリクエストを行った後や一通りテストを走らせた後などに、現状のリソースの状態(db.jsonの中身)を保存したいときには
コンソールにフォーカスを当てた状態で s → Enter とタイプすれば自動的に別名でJSONファイルを書き出してくれます!
便利!(*´∀`)
追記(2017/08/23)
はてなブックマークのコメントにとても良いコメントがあったので(勝手に)追記させていただきました!
Chinosoko さん、読んでくださり有り難うございます!
もし、問題がありましたら Twitter かこちらのコメントでご連絡ください…!
ソートやページネーションもできる、この記事で想像したよりずっと高機能な代物だった。/ 部品として使って自分で処理を書けば、レスポンスを改変して任意のステータスにすることもできる。一から書くより大分楽そう
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme
