JSONを返す
文字列では受け取る側が困る
ここまで res.send("商品一覧です") のように文字列を返してきました。人が読む分にはよいのですが、React アプリが受け取っても使えません。
受け取る側がほしいのは、そのまま扱えるデータです。
JavaScript
res.json({ id: 1, name: "レザースニーカー", price: 4800 });こう返すと、受け取った側は data.price のように読めます。API が JSON を返すのは、相手がプログラムだからです。
res.json がやってくれること
res.json は 2 つのことを同時にやります。
- 渡したオブジェクトを JSON の文字列に変える
- 「これは JSON です」と応答に書き添える
2 つ目が大切です。受け取った側は、この印を見て中身を解釈します。res.send で JSON.stringify した文字列を渡しても、印が付かないので相手が扱いを間違えることがあります。JSON を返すときは res.json を使ってください。
配列も返せる
一覧を返すときは配列を渡します。
JavaScript
app.get("/items", (req, res) => {
res.json([
{ id: 1, name: "レザースニーカー", price: 4800 },
{ id: 2, name: "古着のデニムジャケット", price: 6200 },
]);
});これで GET /items が、フリマの商品一覧を返す API になりました。第2章で作ったデータ層とつなげば、ファイルの中身がそのまま API の応答になります。
何を返し、何を返さないか
持っているデータを全部返す必要はありません。
JavaScript
const item = { id: 1, name: "レザースニーカー", price: 4800, ownerEmail: "..." };
res.json({ id: item.id, name: item.name, price: item.price });出品者のメールアドレスは、一覧を見る人には要らない情報です。返すものは選ぶ、と覚えてください。うっかり全部返すと、見せるつもりのなかったものが外に出ます。第7章の認証で、この判断がもう一度出てきます。
手を動かす
演習では、商品の一覧と 1 件を JSON で返します。返す項目を自分で選んでください。
要件
GET /itemsは 2 件の商品を配列で返すGET /itemは先頭の 1 件だけをオブジェクトで返す- 返す項目は
idnamepriceの 3 つだけにして、ownerEmailは含めない
入出力例
request("GET", "/items") → "200 [{"id":1,"name":"レザースニーカー","price":4800},{"id":2,"name":"古着のデニムジャケット","price":6200}]"
request("GET", "/item") → "200 {"id":1,"name":"レザースニーカー","price":4800}"ヒント
編集 ゆめさく編集部