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

Uncategorized

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)について紹介していきます。

 

  • APIを叩くプログラム作成
  • 最後に
  •  

    環境

    以下の通りです。モック(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

    コメント

    タイトルとURLをコピーしました