OOP Class – Cart

JavaScript Classを使用してロジックを実装した、シンプルなeコマースWebサイトをショッピングカートと共に構築します。

実装要件

使用技術

• HTML/CSS/JavaScript（フレームワーク不使用、バックエンド不使用）
• データ保存用のLocal Storage

必須機能

A. 商品管理

1. 商品グリッドの表示：画像、名前、価格、「カートに追加」ボタン

B. ショッピングカート管理

1. 商品をカートに追加（デフォルトqty=1；既存の場合→qty増加）
2. 各商品の数量増減；商品削除
3. 表示：カートリスト、小計、送料、合計
4. 「ショッピングカート」ボタンにアイテム数を表示

C. 決済（シミュレーション）

1. 情報フォーム：氏名、電話番号、住所、備考
2. 支払い方法：代金引換、その他の方法
3. 注文確認：カートリフレッシュ → 注文作成 → localStorage保存 → 注文番号通知

ビジネスフロー

カート追加 → カート更新 → 決済 → 情報入力 → 確認 → 注文作成 → カート削除 → 通知

データモデル（参考）

// Cart structure
cart: [{ id, qty }]

// Orders structure
orders: [{ id, email, items, total, date, shipTo, payment }]

Class実装ガイド

Class	プロパティ	メソッド
Product	id, name, price	—
CartItem	product, quantity	getSubtotal()
Cart	items （CartItemのリスト）	addItem(), removeItem(), getTotalPrice()...

class Product {
  constructor(id, name, price) {
    // TODO: プロパティの初期化
  }
}

class CartItem {
  constructor(product, quantity) {
    // TODO: プロパティの初期化
  }

  getSubtotal() {
    // TODO: アイテム合計金額を計算（価格 × 数量）
  }
}

class Cart {
  constructor() {
    this.items = [];
  }

  addItem(product, quantity = 1) {
    // TODO: ショッピングカートに商品を追加
  }

  removeItem(productId) {
    // TODO: ショッピングカートから商品を削除
  }

  increaseItem(productId, amount = 1) {
    // TODO: 商品を1個追加
  }

  decreaseItem(productId, amount = 1) {
    // TODO: 商品を1個削除。数量が0になった場合は削除処理を実行
  }

  getTotalPrice() {
    // TODO: ショッピングカートの合計金額を計算
  }

  resetCart() {
    // TODO: ショッピングカートを空にする
  }
}

完成基準

• すべての機能が正常に動作
• JSコンソールエラーなし；基本的な入力チェック
• localStorageでのデータ保存/読み込みの一貫性
• 明確なUI、フィードバック（toast/alert）

最小テスト

• 購入フロー：商品追加 → 増減 → 代金引換決済 → 注文確認
• 注文履歴：「最近の注文」が正しく表示されるかチェック

参考資料

MDN Classes Documentation