Reactカート画面：数量変更で合計金額を自動更新する方法と「選択項目の削除」ボタン実装メモ

# Reactカート画面：数量変更で合計金額を自動更新する方法と「選択項目の削除」ボタン実装メモ

## 今日やったこと
- カート内商品の数量を変更した際に合計金額（totalPrice）や小計(sumPrice)を自動で反映
- 各商品に選択オプション・数量の変更UIを実装
- 「全て選択する」「カート空ける」など、カート全体操作ボタンの動作確認
- 「選択項目の削除」ボタン設置準備

---

## 1. 商品数量更新時の金額再計算

### sumPriceとtotalPriceをリアルタイムで反映

```tsx
// 数量変更ハンドラ
const handleQuantityChange = (productId: number, newQuantity: number) => {
  setCartItems(prev =>
    prev.map(item =>
      item.productId === productId
        ? { ...item, quantity: newQuantity, sumPrice: item.price * newQuantity }
        : item,
    ),
  )
}

• 各商品のsumPriceを計算し直すことで、親コンポーネントでtotalPriceも自動的に更新される
• これによりUIの一貫性が保たれる

---

2. 「選択項目の削除」ボタン表示のロジック

• cartItemsの中でchooseがtrueの商品が一つでもあれば、「選択項目の削除」ボタンを表示
• このボタンを押した時、選択された商品だけ削除APIを実行するようにする

const handleDeleteSelected = async () => {
  const selectedIds = cartItems.filter(item => item.choose).map(item => item.productId)
  await Promise.all(
    selectedIds.map(id => axios.put(getDeleteUrl(id), {}, { headers: { ... } }))
  )
  setCartItems(prev => prev.filter(item => !item.choose))
}

{cartItems.some(item => item.choose) && (
  <Button
    name="選択項目の削除"
    variant="transparent"
    size="small"
    shape="rounded"
    handleClick={handleDeleteSelected}
  />
)}

---

3. 決済画面へは「選択中（choose=true）」のみ渡す

• チェックされた商品のみで決済画面に遷移させるには
• cartItems.filter(item => item.choose) で抽出し、決済処理APIやページ遷移時に使う

---

4. そのほか実装Tips

• sumPriceは「商品単価×数量」で都度再計算
• 商品のオプションや数量変更時は、setCartItemsで常に全てのプロパティを最新化する
• サーバー側APIも、同一ユーザー・同一商品・同一オプションのカートが重複しないよう制御が必要

---

まとめ

• フロントエンド側で、数量・オプション・選択状態などのUI・状態管理を適切に行うことで、UX向上
• カート操作系UIは状態遷移・副作用の管理が複雑なので、map/filter/reduceをうまく使いこなすことがコツ

---