登録を受ける
送られてきたものを受け取る
設計図の 3 行目です。
プレーンテキスト
POST /items 商品を登録するここまでは返すだけでした。登録では逆に、相手から送られてきたデータを受け取ります。出品フォームに入力された商品名や価格が、リクエストの本文に入って届きます。
受け取る準備が要る
本文は、そのままでは読めません。1 行の準備が必要です。
JavaScript
const app = express();
app.use(express.json());これは「JSON で届いた本文を、オブジェクトに直しておいてください」という指示です。これを書き忘れると req.body が undefined になります。
登録がうまくいかないときに最初に疑うところなので、覚えておいてください。
req.body から読む
準備ができたら、本文はこう読めます。
JavaScript
app.post("/items", (req, res) => {
const newItem = {
id: nextId,
name: req.body.name,
price: req.body.price,
sold: false,
};
items.push(newItem);
res.status(201).json(newItem);
});読むのが req、書くのが res という役割は、第3章から変わりません。
作ったときは201
成功なら 200 でよさそうですが、登録のときは 201 を返します。「新しく作った」を表す専用の番号です。
受け取る側は、この番号だけで「一覧が更新された」と判断できます。数字で結果が伝わるのが、ステータスコードの利点です。
id はサーバーが決める
新しい商品の id を、送られてきた本文から取ってはいけません。
JavaScript
const newItem = { id: req.body.id, ... }; // 危ない他人の商品と同じ id を指定されたら、データが壊れます。id はサーバーが決めるものです。この演習では、いまある最大の id に 1 を足す形にします。
手を動かす
演習では、出品の API を作ります。受け取る準備、id の採番、201 の 3 つを揃えてください。
要件
express.json()を使って本文を読めるようにするPOST /itemsは{id, name, price, sold}の形で作った商品を 201 で返す- id は「いまある最大の id + 1」にし、
soldはfalseにする
入出力例
request("POST", "/items", {"name":"古着のデニムジャケット","price":6200}) → "201 {"id":2,"name":"古着のデニムジャケット","price":6200,"sold":false}"
request("POST", "/items", {"name":"木製のスツール","price":3500}) → "201 {"id":2,"name":"木製のスツール","price":3500,"sold":false}"
request("GET", "/items") → "200 [{"id":1,"name":"レザースニーカー","price":4800,"sold":false}]"ヒント
編集 ゆめさく編集部