reduce()の使い方 JavaScript Vue.js

基本の形

配列.reduce((第一引数, 第二引数) => {
  return 次の値
}, 初期値)

第一引数は繰り返し計算した合計値を保持するためのもの
第二引数　現在処理している1件
return ...　次の繰り返しに渡す値

例えばこのようなデータがあった場合

expenses.value = [
  {
    id: 0,
    date: '2026-09-27',
    title: 'スーパー',
    amount: 3000,
    category: 'food'
  },
  {
    id: 1,
    date: '2026-09-27',
    title: '美容院',
    amount: 5000,
    category: 'beauty'
  },
  {
    id: 2,
    date: '2026-09-27',
    title: '子どもの文房具',
    amount: 2000,
    category: 'child'
  }
]

このように使う。

expenses.value.reduce((total, expense) => {
  return thisMonth === expense.date.slice(0, 7)
    ? total + Number(expense.amount)
    : total
}, 0)

reduce()は配列の中にオブジェクトが入っている形だけでなく、配列のみでも使える。