並び替えとページング

全部返すと重くなる

商品が 10 件なら全部返して構いません。10 万件になったらそうはいきません。返すのに時間がかかり、受け取る側も全部は表示しません。

そこで一覧の API には、たいてい 2 つの機能が付きます。

どちらもクエリで指定します。前のレッスンの絞り込みと同じ考え方です。

並び替え

/items?sort=price

受け取った側は、その項目で並べ替えて返します。

if (sort === "price") {
  found = found.sort((a, b) => a.price - b.price);
}

sort に渡す関数は、2 つを比べて「前に出すなら負の数」を返す約束です。a.price - b.price なら安い順、b.price - a.price なら高い順になります。

sort は元の配列を書き換える

注意すべき点があります。sort は新しい配列を作らず、元の配列そのものを並べ替えます。

items.sort((a, b) => a.price - b.price); // items 自体が変わる

これをすると、次のリクエストでは並びが変わったままの items が使われます。元を残したいときは、先に写しを作ります。

const sorted = [...items].sort((a, b) => a.price - b.price);

filter や map は新しい配列を返すので、この心配はありません。sort だけが例外だと覚えてください。

ページング

/items?limit=2&offset=2

offset が「何件飛ばすか」、limit が「何件返すか」です。3 件目から 2 件、という指定になります。

const limit = Number(req.query.limit) || 10;
const offset = Number(req.query.offset) || 0;

found = found.slice(offset, offset + limit);

slice は開始位置と終了位置を取るので、終わりは offset + limit になります。

既定値を決めておくのが大切です。指定が無いときに全件返してしまっては、ページングを付けた意味がありません。

手を動かす

演習では、並び替えとページングを備えた一覧 API を作ります。元の配列を壊さないように書いてください。

1. sort=price は価格の安い順、sort=name は名前の昇順に並べ替える
2. limit(既定 2)と offset(既定 0)で切り出す
3. 並べ替えで元の items を書き換えない