【JavaScript】JSON配列の類似アイテムをグループ化して数量を合計する方法

例えば、次のようなチケット情報を含んだJSON配列があるとします。各オブジェクトは「quantity（数量）」と「description（説明）」という2つのプロパティを持っています。

const arr = [
  {
    "quantity": "1",
    "description": "VIP Ticket to Event"
  },
  {
    "quantity": "1",
    "description": "VIP Ticket to Event"
  },
  {
    "quantity": "1",
    "description": "VIP Ticket to Event"
  },
  {
    "quantity": "1",
    "description": "Regular Ticket to Event"
  },
  {
    "quantity": "1",
    "description": "Regular Ticket to Event"
  },
];

この配列には、まったく同じ内容のオブジェクトが複数含まれています。そこで今回は、「description」プロパティの値が完全に一致するオブジェクト同士を同じグループとしてまとめ、それぞれの「quantity」の合計値を算出するJavaScript関数を作成していきます。

期待される処理の流れ

• 配列の各要素を順番に走査する
• まだ登録されていないdescriptionであれば、新しいエントリとして結果配列に追加する
• すでに存在するdescriptionであれば、該当エントリのquantityに現在の数量を加算する
• 最終的に、重複のないグループ化済みの配列を返す

実装コード

以下が実際のコードです。

const groupAndAdd = arr => {
  const map = {};   // descriptionをキーとした辞書（ハッシュマップ）
  const res = [];   // 最終的な結果を格納する配列

  arr.forEach(el => {
    // 同じdescriptionがまだ存在しない場合は新規エントリを作成
    if (!map[el.description]) {
      map[el.description] = {
        description: el.description,
        quantity: 0
      };
      res.push(map[el.description]);
    }
    // 数量を数値に変換して加算
    map[el.description].quantity += +el.quantity;
  });

  return res;
};

console.log(groupAndAdd(arr));

コードのポイント解説

1. ハッシュマップによる高速な判定

変数mapをプレーンなオブジェクトとして使い、descriptionをキーにすることで、「同じ説明文のエントリが既に存在するか」を定数時間で判定できます。これにより、配列全体の処理は要素数nに対してO(n)で完了し、大量のデータでも効率的に動作します。

2. 参照を共有することで一括更新

新規エントリ作成時にres.push()で格納しているのはオブジェクトそのもの（参照）です。そのため、後からmap[el.description].quantityを更新すると、res内に格納された同じオブジェクトの値も自動的に最新の状態に保たれます。

3. 単項プラス演算子で文字列を数値化

+el.quantityのように先頭に+を付けることで、文字列の"1"を数値の1へ変換しています。この変換を忘れると、+=が文字列の連結として動作してしまうため注意が必要です。

出力結果

コンソールには次のように表示されます。

[
  { description: 'VIP Ticket to Event', quantity: 3 },
  { description: 'Regular Ticket to Event', quantity: 2 }
]

VIPチケットが3件、通常チケットが2件として正しく集計されていることがわかります。この手法は、注文データやアクセスログなど、同じキーを持つレコードを集約・集計したいさまざまな場面で応用できる汎用的なパターンです。