Purpose
この記事は、Json Serverを使って、Web APIのMockサーバーを立てることを目的としています。
きっかけ
Angularでサンプルアプリケーションを作ろう
→ Http経由で情報を取得したい
→ よさげなHttpサービスがないから、モックを作ろう
となったとき、モックを、より効率的に作る方法を探していた時に、Json Serviceを知った(今更…)。
Json Serverとは
Json Serverは、コーディングなしで、Rest APIのモック構築をしてくれるツール？フレームワーク？である。すぐに使えるLive Demo環境も提供されているため、そちらですぐに動作確認が可能である。例１．JSONPlaceholder、 例２．My JSON Server。
Live Demo について
特に、My Json Serverは、GitHubのアカウントを持っているなら、短時間で作成でき、非常に便利である。My Json Sereverの作成には、以下の手順で行う（上記リンクにも記載されている。） - GitHubのリポジトリ作成。 (<your-username>/<your-repo>) - db.jsonファイルを作成し、Commitする。ここでは、以下のJsonを登録した。作成をした時点で、サービスが使えるようになる。これは便利。
{ "teams": [ { "id": 1, "name": "FC Barcelona", "coach": "Ernesto Valverde", "description": "The best football team in the world!" }, { "id": 2, "name": "Real Madrid", "coach": "Zinedine Zidane", "description": "The worst football team in the world!" } ] }
- 次のUrlにアクセスする。https://my-json-server.typicode.com/
Local settingについて
Live Demoで提供されるサービスをLocalで作成する方法も提供されている。Localで作った場合、ドメインがLocalhostになるので、注意が必要である。
この方法については、次のBlogで手順が公開されていた。新しいAngularのアプリケーションの作成から、LocalでのJson Serverの作成、それらの起動までの手順がまとめられている。また、CORSでエラーになるため、その回避方法についての手順についてもまとめられている。
Fake Your Angular Backend Until You Make It
Json Severで公開されるREST APIの仕様について
Json Serverでは、ただ設定したJsonファイルを戻してくるだけのものではなく、いろいろなケースのリクエストに対応できるようになっている。詳細は、GitHubのRead meに記載されているので、そちらを参照。 例えば、先ほどのLive demoで、teamsというAPIと、2つの項目を返すためのAPIを定義した。それだけで、以下のようなAPIが利用可能となっている。
GET /teams GET /teams/1 -> id が１のものだけGetできる GET /teams?name=FC Barcelona -> query Stringにも対応している POST /teams PUT /teams/1 -> 定義済みJsonには追加されない PATCH /teams/1 DELETE /teams/1 -> 消されないが、定義していないIdに対する操作はErrorのStatusCodeが返却される。
このほかにも、Sortのためのオプションや、ページングのためのオプションなど、いろいろ提供されている。非常に便利。
気になったこと
仕様の違い
実際のバックエンドとの仕様と、Json Severで用意されたバックエンドの仕様で差異があった生じないか不安。例えば、ステータスコードが期待していたのと違ったとか、送信したクエリに対して期待したレスポンスが返ってこないなど。
インターフェイスの違い
バックエンドと、フロントエンドでインターフェースとか、認証の設定とかは決めるはずなので、フロントエンドが想定したインターフェースがバックエンドで提供されていないといったことはおこならい。はず。。。
