並び替えとページング
全部返すと重くなる
商品が 10 件なら全部返して構いません。10 万件になったらそうはいきません。返すのに時間がかかり、受け取る側も全部は表示しません。
そこで一覧の API には、たいてい 2 つの機能が付きます。
| 機能 | 何をするか |
|---|---|
| 並び替え | どの順に返すか |
| ページング | 何件目から何件返すか |
どちらもクエリで指定します。前のレッスンの絞り込みと同じ考え方です。
並び替え
プレーンテキスト
/items?sort=price受け取った側は、その項目で並べ替えて返します。
JavaScript
if (sort === "price") {
found = found.sort((a, b) => a.price - b.price);
}sort に渡す関数は、2 つを比べて「前に出すなら負の数」を返す約束です。a.price - b.price なら安い順、b.price - a.price なら高い順になります。
sort は元の配列を書き換える
注意すべき点があります。sort は新しい配列を作らず、元の配列そのものを並べ替えます。
JavaScript
items.sort((a, b) => a.price - b.price); // items 自体が変わるこれをすると、次のリクエストでは並びが変わったままの items が使われます。元を残したいときは、先に写しを作ります。
JavaScript
const sorted = [...items].sort((a, b) => a.price - b.price);filter や map は新しい配列を返すので、この心配はありません。sort だけが例外だと覚えてください。
ページング
プレーンテキスト
/items?limit=2&offset=2offset が「何件飛ばすか」、limit が「何件返すか」です。3 件目から 2 件、という指定になります。
JavaScript
const limit = Number(req.query.limit) || 10;
const offset = Number(req.query.offset) || 0;
found = found.slice(offset, offset + limit);slice は開始位置と終了位置を取るので、終わりは offset + limit になります。
既定値を決めておくのが大切です。指定が無いときに全件返してしまっては、ページングを付けた意味がありません。
手を動かす
演習では、並び替えとページングを備えた一覧 API を作ります。元の配列を壊さないように書いてください。
要件
sort=priceは価格の安い順、sort=nameは名前の昇順に並べ替えるlimit(既定 2)とoffset(既定 0)で切り出す- 並べ替えで元の
itemsを書き換えない
入出力例
request("GET", "/items") → "200 [{"id":1,"name":"レザースニーカー","price":4800},{"id":2,"name":"古着のデニムジャケット","price":6200}]"
request("GET", "/items?sort=price") → "200 [{"id":3,"name":"木製のスツール","price":3500},{"id":1,"name":"レザースニーカー","price":4800}]"
request("GET", "/items?limit=1&offset=2") → "200 [{"id":3,"name":"木製のスツール","price":3500}]"
request("GET", "/items?limit=10") → "200 [{"id":1,"name":"レザースニーカー","price":4800},{"id":2,"name":"古着のデニムジャケット","price":6200},{"id":3,"name":"木製のスツール","price":3500}]"
request("GET", "/items?limit=3") → "200 [{"id":1,"name":"レザースニーカー","price":4800},{"id":2,"name":"古着のデニムジャケット","price":6200},{"id":3,"name":"木製のスツール","price":3500}]"ヒント
編集 ゆめさく編集部