つくる - 受け口の完成
受け口を2本そろえる
この章で作ってきたものを、fleama の形にまとめます。問い合わせの受け口は前のレッスンで通しました。残っているのは出品です。
出品は問い合わせより一段むずかしくなります。受け取って終わりではなく、受け取ったものを一覧に足して、その一覧をもう一度画面に出すところまでが1往復だからです。
受け取ってから返すまで
出品の POST がやることは4つです。
- 送られてきた中身を読む
- 足りないものが無いか確かめる
- 問題なければ一覧に足す
- 出来上がったものを返す
確かめるところは、問い合わせより細かくなります。商品名は空でないこと、価格は1円以上であること、の2つを別々に見て、それぞれ違う文で断ります。まとめて「入力が不正です」と返すと、送った人はどこを直せばよいのか分かりません。
TypeScript
if (!body.title) {
return NextResponse.json({ error: "商品名は必須です" }, { status: 400 });
}
if (!body.price || body.price <= 0) {
return NextResponse.json({ error: "価格は1円以上にしてください" }, { status: 400 });
}作れたときは、作ったものそのものを返します。id はサーバー側で決めるので、送った側は返事を見て初めて id を知ります。作成が成功したことを表す状態コードは 201 です。
送ったあとに一覧を取り直す
ページ側は、出品が成功したら一覧をもう一度取りにいきます。自分の手元の配列に足すやり方もありますが、取り直すほうが確実です。サーバーが id や並び順をどう決めたかを、そのまま画面に映せます。
TypeScript (JSX)
setMessage(data.title + " を出品しました");
await loadItems();これで、フォームから送ったものが一覧に増えます。ブラウザとサーバーの間を1往復して戻ってくる、いちばん基本の形が通りました。
演習
出品の受け口と、出品フォームの送信処理を書きます。