フロントエンド開発に欠かせないモック(mock)をすぐに用意できるjson-server。
json-serverのREAD.meには下記のように記載されてます。
Get a full fake REST API with zero coding in less than 30 seconds (seriously)
コーディング不要で、30秒以内に完全なフェイクのREST APIを手に入れることができます。
(引用)https://github.com/typicode/json-server
嬉しいですね。
この記事では、json-serverのインストール、モックデータ作成、変更、開発時だけモックを使う設定(angular.json)について紹介していきます。
環境
以下の通りです。モック(mock)構築後には、Anuglarで動作確認もします。
json-serverインストール(15秒くらい)
下記コマンドでインストール
gist5712fc345506e0cf365b0ae22ef831bb
モックデータ作成(10秒くらい)
APIの結果を返すモックデータを作成します。
※mockディレクトリを作成してその下にdb.jsonを作成しました。
gist8917a2b21d19a07ca7d8c41a3bc0413a
package.jsonにモック起動コマンド追加(5秒くらい)
コマンド追加します。（4行目を追加しました）
giste5606be0cd7eadedd8ea97497cbb1b70
一度、モックデータ表示の確認
“yarn mock”でjson-serverを起動した後に、ブラウザのURLに”http://localhost:3000/soccer“と入れて表示してみてください。
モックデータが表示されるはずです。(ここまでで30秒くらい)
(応用篇)レスポンスのカスタマイズ
18行目でレスポンスデータのcreatedAtを加工してます。
※mockディレクトリを作成してその下にserver.jsを作成しました。
※飛ばしても大丈夫
giste0464fc1c7835995cbd1216bf1aef096
開発時だけモック使う設定（興味ある人だけ）
proxy.conf.jsonの作成
proxy.conf.jsonを作成してください。
gist6b1371de5a20f868bc672083d118cdd5
※mockディレクトリを作成してその下に作成しました。
angular.jsonに追加
angular.jsonに設定を追加します。（3,4,5行目を追加しました。）
gist33d742344404657ae7bd7640f63d6f46
APIを叩くプログラム作成
開発時だけモック使う設定を追加したので、APIを叩くプログラムを作成します。(一部抜粋)
gistf41e1a4e467a2f44d20208d4b8e8c13b
angularプロジェクトを起動して、localhost:4200を開くとこの通り。
最後に
今回のソースコードは下記です。
コメント