JSONを返す

文字列では受け取る側が困る

ここまで res.send("商品一覧です") のように文字列を返してきました。人が読む分にはよいのですが、React アプリが受け取っても使えません。

受け取る側がほしいのは、そのまま扱えるデータです。

res.json({ id: 1, name: "レザースニーカー", price: 4800 });

こう返すと、受け取った側は data.price のように読めます。API が JSON を返すのは、相手がプログラムだからです。

res.json がやってくれること

res.json は 2 つのことを同時にやります。

1. 渡したオブジェクトを JSON の文字列に変える
2. 「これは JSON です」と応答に書き添える

2 つ目が大切です。受け取った側は、この印を見て中身を解釈します。res.send で JSON.stringify した文字列を渡しても、印が付かないので相手が扱いを間違えることがあります。JSON を返すときは res.json を使ってください。

配列も返せる

一覧を返すときは配列を渡します。

app.get("/items", (req, res) => {
  res.json([
    { id: 1, name: "レザースニーカー", price: 4800 },
    { id: 2, name: "古着のデニムジャケット", price: 6200 },
  ]);
});

これで GET /items が、フリマの商品一覧を返す API になりました。第2章で作ったデータ層とつなげば、ファイルの中身がそのまま API の応答になります。

何を返し、何を返さないか

持っているデータを全部返す必要はありません。

const item = { id: 1, name: "レザースニーカー", price: 4800, ownerEmail: "..." };

res.json({ id: item.id, name: item.name, price: item.price });

出品者のメールアドレスは、一覧を見る人には要らない情報です。返すものは選ぶ、と覚えてください。うっかり全部返すと、見せるつもりのなかったものが外に出ます。第7章の認証で、この判断がもう一度出てきます。

手を動かす

演習では、商品の一覧と 1 件を JSON で返します。返す項目を自分で選んでください。

1. GET /items は 2 件の商品を配列で返す
2. GET /item は先頭の 1 件だけをオブジェクトで返す
3. 返す項目は id name price の 3 つだけにして、ownerEmail は含めない