JavaScriptでオブジェクト配列のプロパティ値を科目ごとに合計する方法

はじめに

JavaScriptでは、オブジェクトの配列から特定のプロパティをキーとしてデータをグループ化し、数値プロパティの合計を求めたい場面がよくあります。例えば、学生の科目ごとの点数と人数をまとめたデータから、科目ごとの合計を算出するケースを考えてみましょう。

以下のような、学生の点数データを含むオブジェクトの配列があるとします。

const arr = [
  { subject: 'Maths', marks: '40', noOfStudents: '5' },
  { subject: 'Science', marks: '50', noOfStudents: '16' },
  { subject: 'History', marks: '35', noOfStudents: '23' },
  { subject: 'Science', marks: '65', noOfStudents: '2' },
  { subject: 'Maths', marks: '30', noOfStudents: '12' },
  { subject: 'History', marks: '55', noOfStudents: '20' },
];

この配列には、同じ科目（subject）が複数回出現しています。ここで、次のような要件を満たすJavaScriptの関数を作成します。

• 「subject」プロパティを基準に、重複するエントリを1つにまとめる
• 同一科目の「marks」（点数）と「noOfStudents」（人数）を合計し、1つのオブジェクトに集約する

したがって、上記の配列の場合、期待される出力は次のようになります。

const output = [
  { subject: 'Maths', marks: 70, noOfStudents: 17 },
  { subject: 'Science', marks: 115, noOfStudents: 18 },
  { subject: 'History', marks: 95, noOfStudents: 43 },
];

実装例

この処理は、reduce()メソッドと、科目名を結果配列のインデックスにマッピングするオブジェクト（マップ）を組み合わせることで、効率的に実装できます。

const arr = [
  { subject: 'Maths', marks: '40', noOfStudents: '5' },
  { subject: 'Science', marks: '50', noOfStudents: '16' },
  { subject: 'History', marks: '35', noOfStudents: '23' },
  { subject: 'Science', marks: '65', noOfStudents: '2' },
  { subject: 'Maths', marks: '30', noOfStudents: '12' },
  { subject: 'History', marks: '55', noOfStudents: '20' },
];

const groupBySubject = (arr = []) => {
  const map = {};
  const res = arr.reduce((acc, val) => {
    const { subject, marks, noOfStudents } = val;
    const { length: l } = acc;
    if (map.hasOwnProperty(subject)) {
      // 既存のエントリに値を加算
      acc[map[subject]]['marks'] += +marks;
      acc[map[subject]]['noOfStudents'] += +noOfStudents;
    } else {
      // 新しい科目の場合はマップに登録してエントリを追加
      map[subject] = l;
      acc.push({
        subject: subject,
        marks: +marks,
        noOfStudents: +noOfStudents
      });
    }
    return acc;
  }, []);
  return res;
};

console.log(groupBySubject(arr));

コードの解説

このコードのポイントは以下の通りです。

• mapオブジェクト：科目名を結果配列内のインデックスに対応付けることで、各科目のオブジェクトの位置を高速に検索できます。
• reduce()メソッド：配列を走査しながら、単一の結果配列を構築します。
• 単項プラス演算子（+）：文字列として格納されている「marks」と「noOfStudents」を数値に変換します。
• +=演算子：既存のエントリが見つかった場合、値を上書きするのではなく加算することで、合計値を正しく計算します。ここを「=」にしてしまうと、合計ではなく最後の値で上書きされてしまうので注意が必要です。

出力結果

コンソールに出力される結果は次の通りです。

[
  { subject: 'Maths', marks: 70, noOfStudents: 17 },
  { subject: 'Science', marks: 115, noOfStudents: 18 },
  { subject: 'History', marks: 95, noOfStudents: 43 }
]

このように、重複していた科目ごとに点数と人数が正しく合計され、重複のない配列が得られました。

まとめ

オブジェクト配列のグループ化と合計処理は、集計処理やデータ分析の前処理など、実務でも頻繁に登場するパターンです。reduce()とマップを組み合わせるこの手法を覚えておくと、さまざまな場面で応用できます。