Abstract Archives

Vanilla JS と Lodash で GROUP BY + SUM する

1. はじめに

 本記事では,以下のデータ処理を JavaScript で行う方法について考えます。様々な実装方法が考えられますが,本記事では Vanilla JS を用いた方法とユーティリティライブラリである Lodash を用いた方法について記述します。

# 処理前

[
    { date: '2020-01-01', sales: 100 },
    { date: '2020-01-01', sales: 200 },
    { date: '2020-01-01', sales: 300 },
    { date: '2020-01-02', sales: 100 },
    { date: '2020-01-02', sales: 200 },
    { date: '2020-01-03', sales: 100 },
]

# 処理後

[
    { date: '2020-01-01', sales: 600 },
    { date: '2020-01-02', sales: 300 },
    { date: '2020-01-03', sales: 100 },
]

 本記事内で行っている作業は以下の環境下で実行したものです。また,Node.js や Lodash はインストール済みの前提で記述しており,インストール手順は割愛していることをご了承ください。

2. Vanilla JS

 インターネットで公開されている記事を参考に,Vanilla JS で実装したソースコードと,その実行結果を以下に示します。reducefind を用いることで関数型プログラミングによる実装を実現しています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const before = [
    { date: '2020-01-01', sales: 100 },
    { date: '2020-01-01', sales: 200 },
    { date: '2020-01-01', sales: 300 },
    { date: '2020-01-02', sales: 100 },
    { date: '2020-01-02', sales: 200 },
    { date: '2020-01-03', sales: 100 },
];

const after = before.reduce((acc, crt) => {
    const result = acc.find(elem => {
        return elem.date === crt.date
    });
    if (result) {
        result.sales += crt.sales;
    } else {
        acc.push({
            date: crt.date,
            sales: crt.sales
        });
    }
    return acc;
}, []);

console.log(after);
$ node app.js
[
  { date: '2020-01-01', sales: 600 },
  { date: '2020-01-02', sales: 300 },
  { date: '2020-01-03', sales: 100 }
]

3. Lodash

 Lodash が提供している groupBymapsumBy を組み合わせて実装したソースコードと,その実行結果を以下に示します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const _ = require('lodash');

const before = [
    { date: '2020-01-01', sales: 100 },
    { date: '2020-01-01', sales: 200 },
    { date: '2020-01-01', sales: 300 },
    { date: '2020-01-02', sales: 100 },
    { date: '2020-01-02', sales: 200 },
    { date: '2020-01-03', sales: 100 },
];

const after = _(before)
    .groupBy(
        'date'
    )
    .map((value, key) => {
        return {
            'date': key,
            'sales': _.sumBy(value, 'sales'),
        };
    })
    .value();

console.log(after);
$ node app.js
[
  { date: '2020-01-01', sales: 600 },
  { date: '2020-01-02', sales: 300 },
  { date: '2020-01-03', sales: 100 }
]

4. おわりに

 ここまで,Vanilla JS と Lodash を用いて GROUP BY + SUM する方法について記述してきました。Lodash を用いて実装したソースコードの方が直感的で理解しやすい印象を受けました。今回は実行速度を計測していないため,パフォーマンスの観点から比較することが出来ていません。

JavaScript コードレシピ集

JavaScriptによるWeb開発のための、究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで余すところなく集めました。基本文法/文字や数値の取り扱い/データの取り扱い/ブラウザーの操作/ユーザーアクション/HTML要素の操作/アニメーション/画像、音声、動画/スマートフォンのセンサーなど、目的別にレシピを整理。「あのプログラムはどう書くんだろう?」が、スグにわかります。JavaScri...

管理者

Dutch
コンピュータサイエンスを専攻している大学院生です。研究の合間に,アニメを観たりブログサイトを運営しながら生きています。

目次