Help us understand the problem. What is going on with this article?

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

More than 1 year has 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 かこちらのコメントでご連絡ください…!

ソートやページネーションもできる、この記事で想像したよりずっと高機能な代物だった。/ 部品として使って自分で処理を書けば、レスポンスを改変して任意のステータスにすることもできる。一から書くより大分楽そう

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした