【JavaScript】配列の各要素の出現回数をカウントする方法

はじめに

今回は、JavaScriptで配列内の値の出現回数をカウントして、集計結果をオブジェクト配列に変換する方法を解説します。

基本の出現回数カウント

JavaScriptの標準配列には、直接的に出現回数をカウントする関数はありません。
そのため、reduce() を使ってオブジェクトに集計し、必要に応じて整形します。

ここでは、dataという配列に対してカウントする処理を行っていきます。

const data = ["apple", "banana", "apple", "orange", "banana", "apple"];

この配列には”apple” が3回、”banana” が2回、”orange”が1回登場しています。

各要素の出現回数をカウントする

const countResult = Object.entries(
    data.reduce((acc, item) => {
        acc[item] = (acc[item] || 0) + 1;
        return acc;
    }, {})
).map(([name, count]) => ({ name, count }));


console.log(countResult);

結果

[
{ name: "apple", count: 3 },
{ name: "banana", count: 2 },
{ name: "orange", count: 1 }
]

これで各要素の出現回数をカウントしてオブジェクト配列にすることができました！

応用

出現回数でソートする（降順）

多く出現したものから順に並べたい場合はsort() を使います。

countResult.sort((a, b) => b.count - a.count);

オブジェクト配列から特定キーでカウントする

以下のような「チーム名」をもつオブジェクト配列を対象に、チームごとの人数をカウントしてみます。

const users = [
        { team: "A" }, { team: "B" }, { team: "A" }, { team: "C" }, { team: "A" }
    ];

    const teamCount = Object.entries(
        users.reduce((acc, user) => {
            acc[user.team] = (acc[user.team] || 0) + 1;
            return acc;
        }, {})
    ).map(([team, count]) => ({ team, count }));

    console.log(teamCount);

結果

[
{ team: "A", count: 3 },
{ team: "B", count: 1 },
{ team: "C", count: 1 }
]

まとめ

今回は JavaScript で配列の中の値の出現回数をカウントして、件数付きのオブジェクト配列に整形する方法を紹介しました。
reduce() やObject.entries() を使えば、シンプルかつ柔軟に集計ができますね。
データ集計やグラフ表示の前処理などにも応用できるので、ぜひ参考にしていただけたら嬉しいです。