JavaScript | 配列メソッドの使い分け（map / forEach / filter / reduce の違い）

JavaScript

2020.07.282025.10.26

では実践的な例として「ショッピングカートの合計金額を計算する」処理を、filter / map / reduce を組み合わせて書いてみましょう。

ショッピングカートの例
ポイント

ショッピングカートの例

データ（カートの中身）

const cart = [
  { name: 'Tシャツ', price: 1500, quantity: 2 },
  { name: 'ジーンズ', price: 5000, quantity: 1 },
  { name: '靴', price: 8000, quantity: 0 }, // 在庫切れで数量0
  { name: '帽子', price: 2000, quantity: 1 }
];

const cart = [
  { name: 'Tシャツ', price: 1500, quantity: 2 },
  { name: 'ジーンズ', price: 5000, quantity: 1 },
  { name: '靴', price: 8000, quantity: 0 }, // 在庫切れで数量0
  { name: '帽子', price: 2000, quantity: 1 }
];

JavaScript

ステップごとの処理

filter → 数量が 1 以上の商品だけ残す
map → 各商品の「小計（price × quantity）」を計算
reduce → 小計を全部足して合計金額を出す

コード例

const total = cart
  .filter(item => item.quantity > 0)          // 数量がある商品だけ
  .map(item => item.price * item.quantity)    // 小計を計算
  .reduce((acc, subtotal) => acc + subtotal, 0); // 合計を計算

console.log(total); // 10000 (Tシャツ 3000 + ジーンズ 5000 + 帽子 2000)

const total = cart
  .filter(item => item.quantity > 0)          // 数量がある商品だけ
  .map(item => item.price * item.quantity)    // 小計を計算
  .reduce((acc, subtotal) => acc + subtotal, 0); // 合計を計算

console.log(total); // 10000 (Tシャツ 3000 + ジーンズ 5000 + 帽子 2000)