答え合わせ
カートテストのバグ一覧と解説
バグ1: 数量にマイナス値が入力できる
再現手順
- 商品をカートに追加
- 数量欄に直接「-1」と入力、または「-」ボタンを連打
- → 数量がマイナスになり、合計金額もマイナスになる
なぜバグなのか？
商品の数量が0以下になることはあり得ません。 マイナス値が許可されると、合計金額がマイナスになり、 実際のECサイトでは「お金がもらえる」という状態になってしまいます。 これはセキュリティ上の重大な問題です。
<!-- HTML: min属性なし -->
<input type="number" v-model.number="item.quantity">
// JS: 下限チェックなし
const decrementQuantity = (index) => {
cart.value[index].quantity--;
// 1未満のチェックがない！
};
<!-- HTML: min属性で制限 -->
<input type="number" min="1" v-model.number="item.quantity"
@change="validateQuantity(index)">
// JS: 下限チェックあり
const decrementQuantity = (index) => {
if (cart.value[index].quantity > 1) {
cart.value[index].quantity--;
}
};
const validateQuantity = (index) => {
if (cart.value[index].quantity < 1) {
cart.value[index].quantity = 1;
}
};
バグ2: 合計金額が税込みになっていない
再現手順
- りんご（¥150）を1個カートに追加
- 小計: ¥150、消費税: ¥15 と表示される
- 合計（税込）: ¥150 と表示される
- → 税込みと書いてあるのに、税が加算されていない（正解は¥165）
なぜバグなのか？
「税込」と表示しながら税抜き金額を表示するのは、景品表示法違反の可能性があります。 また、ユーザーは表示された金額を信じて購入を決定するため、 決済時に金額が変わると信頼を失い、トラブルの原因になります。
const total = computed(() => {
// 税が加算されていない！
return subtotal.value;
});
const total = computed(() => {
// 小計 + 消費税 = 税込合計
return subtotal.value + tax.value;
});
バグ3: 同じ商品が重複して追加される
再現手順
- りんごの「カートに追加」を2回クリック
- → カートに「りんご 数量:1」が2行追加される
- 期待される動作: 「りんご 数量:2」が1行のみ
なぜバグなのか？
同じ商品が複数行に分かれて表示されると、ユーザーは混乱します。 また、それぞれの行で個別に数量を変更でき、管理が複雑になります。 一般的なECサイトでは、同じ商品は1行にまとめ、数量だけを増やすのが標準的な動作です。
const addToCart = (product) => {
// 常に新しいアイテムとして追加
// 既存チェックをしていない！
cart.value.push({
...product,
quantity: 1
});
};
const addToCart = (product) => {
// 既存アイテムを検索
const existingItem = cart.value
.find(item => item.id === product.id);
if (existingItem) {
// 既存なら数量を増やす
existingItem.quantity++;
} else {
// 新規なら追加
cart.value.push({
...product,
quantity: 1
});
}
};
学びのポイント
- 入力値の検証: ユーザー入力は必ず検証する。特に数値の範囲チェックは重要
- 表示と計算の一致: 表示している内容と実際の計算ロジックが一致しているか確認する
- ビジネスロジックの理解: 「同じ商品はまとめる」などの業務要件を正しく実装する
- 金銭に関わる処理: ECサイトなど金銭が絡む機能は特に慎重にテストする
