341
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

フロントエンド実装中に使えるモックサーバを爆速で準備する

結論

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

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
341
Help us understand the problem. What are the problem?