programming

Javascript/Typescript Tech 夫

【Javascript】配列内の同一要素を集計（カウント）する

2021年11月1日

「ロナえる」の夫です。

配列内の同一要素をカウントしたいことありますよね。

例えば、アンケートで取ったデータの集計するとき。

次のような表から、

年齢性別インドア派/アウトドア派
30代男インドア派
20代男アウトドア派
30代女インドア派
40代女アウトドア派
40代女アウトドア派

年齢　20代：１人、30代：２人、40代：２人

性別　男：１人、女：３人

インドア派：２人、アウトドア派：３人

みたいな集計を簡単に計算できます。

今回は、reduceを使って選択肢のカウントを行います。

reduceとは？

reduceは、配列の要素を使ったfor文で値を引き回した処理をしたい時に便利なメソッドです。

詳しくはこちらで、reduceをもう少し詳しく記載してます。

programming
【Javascript】Array（配列）の使い方をまとめました

続きを見る

配列内の同一要素を集計（カウント）する

冒頭で出てきた表で、年齢を集計してみましょう。

まずはfor文で記述してみます。

let array = [
 {年齢: "30代", 性別 : "男", 思考: "インドア派"},
 {年齢: "20代", 性別 : "男", 思考: "アウトドア派"},
 {年齢: "30代", 性別 : "女", 思考: "インドア派"},
 {年齢: "40代", 性別 : "女", 思考: "アウトドア派"},
 {年齢: "40代", 性別 : "女", 思考: "アウトドア派"},
];

const func = (sum, val) => {
 if( val["年齢"] in sum ) {
  sum[val["年齢"]]++;
 }else {
  sum[val["年齢"]] = 1;
 }
 return sum;
}

let sum = {};
for( let i = 0; i < array.length; i++ ) {
 sum = func( sum, val );
}
// sum  = { 30代: 2, 20代: 1, 40代: 2 }

sum[array[i]["年齢"]]++;

こういうところが若干読みにくく感じます。

これをreduceを使って書くと、

let array = [
 {年齢: "30代", 性別 : "男", 思考: "インドア派"},
 {年齢: "20代", 性別 : "男", 思考: "アウトドア派"},
 {年齢: "30代", 性別 : "女", 思考: "インドア派"},
 {年齢: "40代", 性別 : "女", 思考: "アウトドア派"},
 {年齢: "40代", 性別 : "女", 思考: "アウトドア派"},
];

const func = (sum, val) => {
 if( val["年齢"] in sum ) {
  sum["年齢"]++;
 }else {
  sum["年齢"] = 1;
 }
 return sum;
}

const output = array.reduce( func, {});
// output = { 30代: 2, 20代: 1, 40代: 2 }

こうすると、少しスッキリした気がします！

また、今回は年齢をハードコードで記載していますが、もうひと工夫をすると集計ターゲットを可変にすることができます。

let array = [
 {年齢: "30代", 性別 : "男", 思考: "インドア派"},
 {年齢: "20代", 性別 : "男", 思考: "アウトドア派"},
 {年齢: "30代", 性別 : "女", 思考: "インドア派"},
 {年齢: "40代", 性別 : "女", 思考: "アウトドア派"},
 {年齢: "40代", 性別 : "女", 思考: "アウトドア派"},
];

const func = target => {
 return (sum, val) => {
  if( val[target] in sum ) {
   sum[target]++;
  }else {
   sum[target] = 1;
  }
  return sum;
 }
}

const output = array.reduce( func( "年齢" ), {});
// output = { 30代: 2, 20代: 1, 40代: 2 }
const output = array.reduce( func( "性別" ), {});
// output = { 男: 2, 女: 3 }
const output = array.reduce( func( "思考" ), {});
// output = { インドア派: 2, アウトドア派: 3 }

上記コードのように、reduceに入力する関数を少し拡張してあげることによって、全ての項目を簡単かつ簡潔に集計することができました。

まとめ：reduceを利用してちゃちゃっと集計してみましょう

今回は、reduceを利用して簡単に集計をしてみました。

実際には、reduceの処理は初めて利用する人にはとっつきづらいと思います。

ただ、集計だけでなく、合算や配列の結合など、reduceの利用用途は多岐に渡り、強力なメソッドです。

ぜひマスターしていきましょう！

-Javascript/Typescript, Tech, 夫
-, , , ,

S