フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

モック(mock)を30秒で構築、json-serve

スポンサーリンク

スポンサーリンク

github.com

フロントエンド開発に欠かせないモック(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 環境

json-server 環境

 

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を開くとこの通り。

 

最後に

今回のソースコードは下記です。

github.com