クエリパラメータ
絞り込みはパスに入れない
フリマで「靴」を探したいとき、こういうパスを作りたくなります。
プレーンテキスト
/items/search/靴ですが条件が増えると破綻します。カテゴリでも絞りたい、価格の上限も付けたい、となったときにパスの形が決められません。
絞り込みの条件は、パスではなくクエリパラメータで渡します。
プレーンテキスト
/items?keyword=靴&category=shoes? から後ろがクエリです。& で区切っていくつでも並べられ、順番も問いません。
パスとクエリの使い分け
| 表すもの | 例 | |
|---|---|---|
| パス | どのリソースか | /items/1 |
| クエリ | どう絞り込むか | /items?keyword=靴 |
そのものを指すのがパス、条件を添えるのがクエリです。/items は条件が付いても /items のままなので、リソースの構造が崩れません。
req.query から読む
読み方は req.params とよく似ています。
JavaScript
app.get("/items", (req, res) => {
const keyword = req.query.keyword;
const category = req.query.category;
});?keyword=靴 なら req.query.keyword は "靴" です。
無いときは undefined になる
クエリは付いていないこともあります。/items とだけ呼ばれたら req.query.keyword は undefined です。
ですから、無いときにどうするかを必ず決めます。
JavaScript
const keyword = req.query.keyword || "";|| は「左が空っぽなら右を使う」という書き方です。これで、条件が無いときは絞り込まない、という自然な形になります。
こちらも文字列で届く
第4章の req.params と同じで、クエリの値もすべて文字列です。
JavaScript
const limit = req.query.limit; // "5"
const limit2 = Number(req.query.limit); // 5数として使うなら直します。この取り違えは、次のレッスンの並び替えとページングでも効いてきます。
手を動かす
演習では、キーワードとカテゴリで商品を絞り込む API を作ります。条件が無いときの振る舞いにも気を配ってください。
要件
keywordがあればnameにその文字が含まれるものだけに絞るcategoryがあればcategoryが一致するものだけに絞る- どちらも無ければ全件を返す(返す項目は
idnamecategoryの 3 つ)
入出力例
request("GET", "/items") → "200 [{"id":1,"name":"レザースニーカー","category":"shoes"},{"id":2,"name":"古着のデニムジャケット","category":"tops"},{"id":3,"name":"ランニングスニーカー","category":"shoes"}]"
request("GET", "/items?keyword=スニーカー") → "200 [{"id":1,"name":"レザースニーカー","category":"shoes"},{"id":3,"name":"ランニングスニーカー","category":"shoes"}]"
request("GET", "/items?category=tops") → "200 [{"id":2,"name":"古着のデニムジャケット","category":"tops"}]"
request("GET", "/items?keyword=ランニング&category=shoes") → "200 [{"id":3,"name":"ランニングスニーカー","category":"shoes"}]"
request("GET", "/items?keyword=帽子") → "200 []"ヒント
編集 ゆめさく編集部