モックAPIの世界

データはサーバーから来る

第1章の商品一覧は、コードの中に商品を直接書いていました。3件なら書けますが、本物のフリマアプリで扱うのは何万件です。出品されれば増え、売れれば減ります。データはコードの外にあって、必要なときに取りに行くのが普通の作り方です。

取りに行く先が API です。fleama も第2章から、商品を API から取ってきます。

モック API とは

とはいえ、まだサーバーを書いていません。そこで使うのがモック API です。モックは「本物のふりをした偽物」という意味です。

このコースのプレビューには、教材ごとの小さな API が立ちます。仕様は mock-api.json に書いてあり、その中身のとおりに fetch が返ります。外に出ていかないので、通信の調子で教材が止まることがありません。仕様の形は本物の API と同じなので、Node.js で本物を書いたらそのまま差し替えられます。

仕様書の読み方

エディタの mock-api.json を開いてください。大事なのは routes のところです。

読み取れることは次のとおりです。

• method — どの動詞で呼ぶか。取ってくるなら GET、作るなら POST
• path — どの URL を呼ぶか。/api/items に GET すると一覧が返る
• collection — 何が返るか。ここでは collections.items の中身がそのまま配列で返る
• filters — クエリで絞れる項目。/api/items?category=shoes と書くと shoes だけになる

:id の付いた /api/items/:id は、:id のところに実際の値を入れて呼びます。/api/items/2 なら 2 番の商品が1件だけ返ります。

delayMs は応答までの待ち時間です。300 なら 0.3 秒かかります。本物の通信にも時間がかかるので、それをわざと再現しています。第3章のローディング表示は、この待ち時間があるから作れます。

演習

仕様書を読んで、fleama の API にどんな入口があるかを画面に並べます。