ビジネスダッシュボードでは、売上合計や平均顧客単価、最高売上など、さまざまな KPI（重要業績評価指標）を素早く計算して表示する必要があります。JavaScript のネイティブメソッドだけでも実装できますが、Lodash の集計関数を使えば、より簡潔で読みやすいコードで実装できるのです。

本記事では、Lodash の sumBy、meanBy、maxBy を使った実践的なダッシュボード KPI 実装パターンをご紹介します。実際のビジネスシーンで使える売上分析、顧客分析、在庫管理などの具体例を通じて、これらの関数の使い方を学んでいきましょう。

背景

ダッシュボードと KPI の役割

現代のビジネスアプリケーションでは、データを視覚化して意思決定を支援するダッシュボードが欠かせません。ダッシュボードには、事業の健全性を測る指標である KPI が表示され、経営者や担当者が一目で状況を把握できるようになっています。

代表的な KPI には以下のようなものがあります。

#	KPI 名	説明	計算方法
1	総売上	期間内の売上合計	すべての売上の合計
2	平均顧客単価	1 件あたりの平均取引額	総売上 ÷ 取引件数
3	最高売上	期間内の最大取引額	すべての売上の最大値
4	在庫総額	現在の在庫価値	単価 × 在庫数の合計

Lodash が選ばれる理由

Lodash は、JavaScript でデータ操作を行うための強力なユーティリティライブラリです。特に配列やオブジェクトの集計処理において、以下のメリットがあります。

第一に、コードの可読性が向上します。sumBy や meanBy といった名前から、何を計算しているのかが一目瞭然です。

第二に、null や undefined への安全な処理が組み込まれており、エラーハンドリングが容易になります。

第三に、関数型プログラミングのスタイルで記述できるため、メンテナンス性の高いコードが書けるのです。

以下の図は、ダッシュボードでのデータフローを示しています。

mermaidCopy codeflowchart TB
  rawData["生データ<br/>(売上・顧客・在庫)"] --> lodash["Lodash 集計関数"]
  lodash --> sumBy["sumBy<br/>(合計)"]
  lodash --> meanBy["meanBy<br/>(平均)"]
  lodash --> maxBy["maxBy<br/>(最大)"]
  sumBy --> kpi["KPI指標"]
  meanBy --> kpi
  maxBy --> kpi
  kpi --> dashboard["ダッシュボード表示"]

このように、生データを Lodash の集計関数で処理し、KPI 指標としてダッシュボードに表示する流れが一般的です。

課題

JavaScript ネイティブメソッドの限界

JavaScript には reduce、map、Math.max などのネイティブメソッドがありますが、実務での KPI 計算では以下のような課題に直面します。

冗長なコード記述

オブジェクトの配列から特定プロパティの合計を求める場合、reduce を使うとコードが長くなりがちです。

typescriptCopy code// ネイティブメソッドでの合計計算
const sales = [
  { product: 'ノートPC', amount: 120000 },
  { product: 'マウス', amount: 3000 },
  { product: 'キーボード', amount: 8000 },
];

const total = sales.reduce(
  (sum, sale) => sum + sale.amount,
  0
);

この例では、reduce の引数に累積値と callback 関数を渡す必要があり、初心者には理解しづらいコードになっています。

null・undefined の扱い

データに欠損値が含まれる場合、ネイティブメソッドでは明示的なチェックが必要です。

typescriptCopy code// null チェックが必要
const salesWithNull = [
  { product: 'ノートPC', amount: 120000 },
  { product: 'マウス', amount: null },
  { product: 'キーボード', amount: 8000 },
];

// エラーを避けるために filter が必要
const total = salesWithNull
  .filter((sale) => sale.amount != null)
  .reduce((sum, sale) => sum + sale.amount, 0);

このように、事前に null を除外する処理を追加しなければなりません。

平均値計算の煩雑さ

平均値を求める場合、合計を求めてから件数で割る必要があり、2 段階の処理が必要です。

typescriptCopy code// 平均値計算には複数ステップが必要
const total = sales.reduce(
  (sum, sale) => sum + sale.amount,
  0
);
const average = total / sales.length;

ビジネスロジックが複雑になるほど、このような処理が増えてコードの見通しが悪くなります。

最大値・最小値の取得の複雑さ

オブジェクトの配列から特定プロパティの最大値を持つオブジェクトを取得するには、reduce や sort を組み合わせる必要があります。

typescriptCopy code// 最大値を持つオブジェクトの取得
const maxSale = sales.reduce(
  (max, sale) => (sale.amount > max.amount ? sale : max),
  sales[0]
);

このコードは動作しますが、意図が伝わりにくく、レビュー時に理解に時間がかかってしまいます。

以下の図は、ネイティブメソッドでの処理フローの複雑さを示しています。

mermaidCopy codeflowchart TD
  data["データ配列"] --> check1["null チェック"]
  check1 --> filter["filter で除外"]
  filter --> reduce["reduce で集計"]
  reduce --> calc["追加計算<br/>(平均なら÷)"]
  calc --> result["結果"]

  style check1 fill:#ffcccc
  style filter fill:#ffcccc
  style reduce fill:#ffcccc
  style calc fill:#ffcccc

赤色で示した部分が、開発者が毎回実装しなければならない定型処理です。Lodash を使えば、これらを簡潔に記述できます。

解決策

Lodash の集計関数で簡潔に実装

Lodash は、配列やオブジェクトの集計に特化した関数を提供しており、コードの可読性と保守性を大幅に向上させます。ここでは、ダッシュボードの KPI 実装で特に有用な 3 つの関数をご紹介しましょう。

sumBy：オブジェクト配列の合計計算

sumBy は、配列の各要素から特定のプロパティ値を取り出して合計する関数です。

基本構文

typescriptCopy codeimport _ from 'lodash';

// 基本的な使い方
_.sumBy(配列, プロパティ名または関数);

使用例

typescriptCopy codeimport _ from 'lodash';

const sales = [
  { product: 'ノートPC', amount: 120000 },
  { product: 'マウス', amount: 3000 },
  { product: 'キーボード', amount: 8000 },
];

// プロパティ名を指定
const totalAmount = _.sumBy(sales, 'amount');
console.log(totalAmount); // 131000

たった 1 行で合計が求められ、コードの意図が明確に伝わります。

関数を使った柔軟な集計

プロパティ名だけでなく、関数を渡すことで計算ロジックを柔軟に指定できます。

typescriptCopy code// 消費税込みの合計を計算
const totalWithTax = _.sumBy(
  sales,
  (sale) => sale.amount * 1.1
);
console.log(totalWithTax); // 144100

この例では、各売上に 10%の消費税を加算した合計を計算しています。

meanBy：平均値の算出

meanBy は、配列の各要素から特定のプロパティ値を取り出して平均値を計算する関数です。

基本構文

typescriptCopy codeimport _ from 'lodash';

// 基本的な使い方
_.meanBy(配列, プロパティ名または関数);

使用例

typescriptCopy code// 平均売上額を計算
const averageAmount = _.meanBy(sales, 'amount');
console.log(averageAmount); // 43666.666...

ネイティブメソッドでは合計と件数を別々に求める必要がありましたが、meanBy なら 1 行で完結します。

ビジネスロジックでの活用

typescriptCopy codeconst orders = [
  { customerId: 'C001', orderValue: 50000, itemCount: 5 },
  { customerId: 'C002', orderValue: 30000, itemCount: 3 },
  { customerId: 'C003', orderValue: 80000, itemCount: 8 },
];

// 1商品あたりの平均単価を計算
const avgPricePerItem = _.meanBy(
  orders,
  (order) => order.orderValue / order.itemCount
);
console.log(avgPricePerItem); // 10000

この例では、各注文の商品単価を計算してから平均を取っており、複雑な業務ロジックも簡潔に表現できています。

maxBy：最大値オブジェクトの取得

maxBy は、配列の中から指定したプロパティが最大となる要素を取得する関数です。

基本構文

typescriptCopy codeimport _ from 'lodash';

// 基本的な使い方
_.maxBy(配列, プロパティ名または関数);

使用例

typescriptCopy code// 最も売上が高い商品を取得
const topSale = _.maxBy(sales, 'amount');
console.log(topSale);
// { product: 'ノートPC', amount: 120000 }

reduce を使った複雑なロジックが不要になり、コードの意図が一目で理解できます。

minBy：最小値オブジェクトの取得

同様に、最小値を取得する minBy も用意されています。

typescriptCopy code// 最も売上が低い商品を取得
const minSale = _.minBy(sales, 'amount');
console.log(minSale);
// { product: 'マウス', amount: 3000 }

在庫管理や価格比較など、最小値を求める場面でも活用できます。

以下の図は、Lodash を使った簡潔な処理フローを示しています。

mermaidCopy codeflowchart LR
  data["データ配列"] --> lodashFunc["Lodash関数<br/>(sumBy/meanBy/maxBy)"]
  lodashFunc --> result["結果"]

  style lodashFunc fill:#ccffcc

Lodash を使えば、null チェックや中間処理が不要になり、データから結果まで一直線に処理できるのです。

関数比較表

それぞれの関数の特徴を表にまとめました。

#	関数名	用途	戻り値	ネイティブ代替
1	sumBy	合計値を計算	数値	reduce((sum, x) => sum + x.prop, 0)
2	meanBy	平均値を計算	数値	sum / length
3	maxBy	最大値の要素を取得	オブジェクト	reduce で比較
4	minBy	最小値の要素を取得	オブジェクト	reduce で比較

具体例

実践的なダッシュボード KPI 実装

ここでは、実際のビジネスシーンを想定した 3 つのダッシュボード実装例をご紹介します。売上分析、顧客分析、在庫管理の各シナリオで、Lodash の集計関数がどのように活躍するか見ていきましょう。

シナリオ 1：売上ダッシュボード

EC サイトの売上データから、総売上、平均注文額、最高売上を表示するダッシュボードを実装します。

データ型定義

まず、TypeScript で売上データの型を定義します。

typescriptCopy code// 売上データの型定義
interface SaleRecord {
  orderId: string;
  customerName: string;
  amount: number;
  orderDate: string;
  category: string;
}

この型定義により、コードの安全性と可読性が向上します。

サンプルデータの準備

実際の売上データを想定したサンプルを用意しましょう。

typescriptCopy codeconst salesData: SaleRecord[] = [
  {
    orderId: 'ORD001',
    customerName: '田中商事',
    amount: 125000,
    orderDate: '2025-01-15',
    category: '電子機器',
  },
  {
    orderId: 'ORD002',
    customerName: '佐藤物産',
    amount: 78000,
    orderDate: '2025-01-16',
    category: '事務用品',
  },
  {
    orderId: 'ORD003',
    customerName: '鈴木商店',
    amount: 210000,
    orderDate: '2025-01-17',
    category: '電子機器',
  },
  {
    orderId: 'ORD004',
    customerName: '高橋工業',
    amount: 45000,
    orderDate: '2025-01-18',
    category: '消耗品',
  },
  {
    orderId: 'ORD005',
    customerName: '伊藤商会',
    amount: 156000,
    orderDate: '2025-01-19',
    category: '電子機器',
  },
];

これらのデータから、経営に役立つ KPI を算出していきます。

KPI 計算の実装

Lodash の集計関数を使って、各 KPI を計算します。

typescriptCopy codeimport _ from 'lodash';

// 総売上の計算
const totalSales = _.sumBy(salesData, 'amount');
console.log(`総売上: ¥${totalSales.toLocaleString()}`);
// 総売上: ¥614,000

// 平均注文額の計算
const averageOrderValue = _.meanBy(salesData, 'amount');
console.log(
  `平均注文額: ¥${Math.round(
    averageOrderValue
  ).toLocaleString()}`
);
// 平均注文額: ¥122,800

たった 2 行で、重要な KPI が計算できました。

最高売上の取得

最も大きな取引を特定することで、優良顧客の分析につながります。

typescriptCopy code// 最高売上の注文を取得
const topOrder = _.maxBy(salesData, 'amount');
console.log(
  `最高売上: ¥${topOrder?.amount.toLocaleString()} (${
    topOrder?.customerName
  })`
);
// 最高売上: ¥210,000 (鈴木商店)

// 最低売上の注文も取得
const minOrder = _.minBy(salesData, 'amount');
console.log(
  `最低売上: ¥${minOrder?.amount.toLocaleString()} (${
    minOrder?.customerName
  })`
);
// 最低売上: ¥45,000 (高橋工業)

Optional chaining (?.) を使うことで、データが空の場合にもエラーを防げます。

カテゴリ別集計

特定カテゴリに絞った集計も、filter と組み合わせることで簡単に実装できます。

typescriptCopy code// 電子機器カテゴリの売上合計
const electronicsSales = _.sumBy(
  salesData.filter((sale) => sale.category === '電子機器'),
  'amount'
);
console.log(
  `電子機器売上: ¥${electronicsSales.toLocaleString()}`
);
// 電子機器売上: ¥491,000

このように、条件を組み合わせることで、より詳細な分析が可能になります。

React コンポーネントでの実装例

実際のダッシュボード UI を想定した React コンポーネントを作成しましょう。

typescriptCopy codeimport React from 'react';
import _ from 'lodash';

interface SalesDashboardProps {
  salesData: SaleRecord[];
}

まず、コンポーネントの Props の型を定義します。

typescriptCopy codeconst SalesDashboard: React.FC<SalesDashboardProps> = ({
  salesData,
}) => {
  // KPIの計算
  const totalSales = _.sumBy(salesData, 'amount');
  const averageOrderValue = _.meanBy(salesData, 'amount');
  const topOrder = _.maxBy(salesData, 'amount');

  return (
    <div className='dashboard'>
      <h2>売上ダッシュボード</h2>

      <div className='kpi-cards'>
        <div className='kpi-card'>
          <h3>総売上</h3>
          <p className='value'>
            ¥{totalSales.toLocaleString()}
          </p>
        </div>

        <div className='kpi-card'>
          <h3>平均注文額</h3>
          <p className='value'>
            ¥
            {Math.round(averageOrderValue).toLocaleString()}
          </p>
        </div>

        <div className='kpi-card'>
          <h3>最高売上</h3>
          <p className='value'>
            ¥{topOrder?.amount.toLocaleString()}
          </p>
          <p className='detail'>{topOrder?.customerName}</p>
        </div>
      </div>
    </div>
  );
};

このコンポーネントでは、計算ロジックがシンプルで、UI の実装に集中できています。

シナリオ 2：顧客分析ダッシュボード

顧客ごとの購入履歴から、LTV（Life Time Value：顧客生涯価値）を分析します。

データ型定義

顧客の購入履歴を管理する型を定義します。

typescriptCopy code// 顧客購入履歴の型定義
interface CustomerPurchase {
  customerId: string;
  customerName: string;
  purchaseAmount: number;
  purchaseDate: string;
  productCategory: string;
}

サンプルデータ

複数の顧客による購入履歴をサンプルとして用意します。

typescriptCopy codeconst customerPurchases: CustomerPurchase[] = [
  {
    customerId: 'C001',
    customerName: '山田太郎',
    purchaseAmount: 25000,
    purchaseDate: '2025-01-10',
    productCategory: '家電',
  },
  {
    customerId: 'C002',
    customerName: '佐藤花子',
    purchaseAmount: 12000,
    purchaseDate: '2025-01-12',
    productCategory: '書籍',
  },
  {
    customerId: 'C001',
    customerName: '山田太郎',
    purchaseAmount: 38000,
    purchaseDate: '2025-01-15',
    productCategory: '家電',
  },
  {
    customerId: 'C003',
    customerName: '鈴木一郎',
    purchaseAmount: 56000,
    purchaseDate: '2025-01-18',
    productCategory: 'スポーツ',
  },
  {
    customerId: 'C002',
    customerName: '佐藤花子',
    purchaseAmount: 18000,
    purchaseDate: '2025-01-20',
    productCategory: '書籍',
  },
  {
    customerId: 'C001',
    customerName: '山田太郎',
    purchaseAmount: 42000,
    purchaseDate: '2025-01-22',
    productCategory: '家電',
  },
];

同じ顧客が複数回購入しているデータです。

顧客別の集計

Lodash の groupBy と集計関数を組み合わせて、顧客ごとの KPI を算出します。

typescriptCopy codeimport _ from 'lodash';

// 顧客ごとにグループ化
const groupedByCustomer = _.groupBy(
  customerPurchases,
  'customerId'
);

// 各顧客のLTV（総購入額）を計算
const customerLTVs = Object.entries(groupedByCustomer).map(
  ([customerId, purchases]) => ({
    customerId,
    customerName: purchases[0].customerName,
    totalPurchase: _.sumBy(purchases, 'purchaseAmount'),
    avgPurchase: _.meanBy(purchases, 'purchaseAmount'),
    purchaseCount: purchases.length,
    maxPurchase:
      _.maxBy(purchases, 'purchaseAmount')
        ?.purchaseAmount || 0,
  })
);

このコードで、各顧客の購入総額、平均購入額、購入回数、最高購入額が一度に取得できます。

結果の表示

計算結果をコンソールに出力して確認しましょう。

typescriptCopy code// 結果を表示
customerLTVs.forEach((customer) => {
  console.log(
    `${customer.customerName} (${customer.customerId})`
  );
  console.log(
    `  総購入額: ¥${customer.totalPurchase.toLocaleString()}`
  );
  console.log(
    `  平均購入額: ¥${Math.round(
      customer.avgPurchase
    ).toLocaleString()}`
  );
  console.log(`  購入回数: ${customer.purchaseCount}回`);
  console.log(
    `  最高購入額: ¥${customer.maxPurchase.toLocaleString()}`
  );
  console.log('---');
});

実行結果は以下のようになります。

yamlCopy code山田太郎 (C001)
  総購入額: ¥105,000
  平均購入額: ¥35,000
  購入回数: 3回
  最高購入額: ¥42,000
---
佐藤花子 (C002)
  総購入額: ¥30,000
  平均購入額: ¥15,000
  購入回数: 2回
  最高購入額: ¥18,000
---
鈴木一郎 (C003)
  総購入額: ¥56,000
  平均購入額: ¥56,000
  購入回数: 1回
  最高購入額: ¥56,000
---

優良顧客の特定

LTV が最も高い顧客を特定します。

typescriptCopy code// 最もLTVが高い顧客を取得
const topCustomer = _.maxBy(customerLTVs, 'totalPurchase');
console.log(
  `優良顧客: ${
    topCustomer?.customerName
  } (総購入額: ¥${topCustomer?.totalPurchase.toLocaleString()})`
);
// 優良顧客: 山田太郎 (総購入額: ¥105,000)

このように、マーケティング施策の優先順位付けに役立つ情報が簡単に得られます。

シナリオ 3：在庫管理ダッシュボード

商品在庫から、在庫総額、平均在庫単価、最高価格商品を算出します。

データ型定義

在庫情報を管理する型を定義します。

typescriptCopy code// 在庫データの型定義
interface InventoryItem {
  productId: string;
  productName: string;
  unitPrice: number;
  stockQuantity: number;
  category: string;
}

サンプルデータ

実際の在庫データを想定したサンプルです。

typescriptCopy codeconst inventory: InventoryItem[] = [
  {
    productId: 'P001',
    productName: 'ワイヤレスマウス',
    unitPrice: 2800,
    stockQuantity: 45,
    category: '周辺機器',
  },
  {
    productId: 'P002',
    productName: 'USBメモリ 64GB',
    unitPrice: 1200,
    stockQuantity: 120,
    category: 'ストレージ',
  },
  {
    productId: 'P003',
    productName: 'モニターアーム',
    unitPrice: 8500,
    stockQuantity: 15,
    category: '周辺機器',
  },
  {
    productId: 'P004',
    productName: 'ノートPC',
    unitPrice: 125000,
    stockQuantity: 8,
    category: 'PC本体',
  },
  {
    productId: 'P005',
    productName: 'キーボード',
    unitPrice: 6200,
    stockQuantity: 32,
    category: '周辺機器',
  },
];

在庫総額の計算

各商品の単価と在庫数を掛け合わせた在庫総額を計算します。

typescriptCopy code// 在庫総額を計算（単価 × 在庫数の合計）
const totalInventoryValue = _.sumBy(
  inventory,
  (item) => item.unitPrice * item.stockQuantity
);
console.log(
  `在庫総額: ¥${totalInventoryValue.toLocaleString()}`
);
// 在庫総額: ¥1,470,900

この情報は、資産管理や発注計画に活用できます。

平均在庫単価

全商品の平均単価を算出します。

typescriptCopy code// 平均在庫単価を計算
const averageUnitPrice = _.meanBy(inventory, 'unitPrice');
console.log(
  `平均在庫単価: ¥${Math.round(
    averageUnitPrice
  ).toLocaleString()}`
);
// 平均在庫単価: ¥28,740

高額商品・低額商品の特定

最も高価な商品と最も安価な商品を特定します。

typescriptCopy code// 最も高価な商品を取得
const mostExpensiveProduct = _.maxBy(
  inventory,
  'unitPrice'
);
console.log(
  `最高額商品: ${
    mostExpensiveProduct?.productName
  } (¥${mostExpensiveProduct?.unitPrice.toLocaleString()})`
);
// 最高額商品: ノートPC (¥125,000)

// 最も安価な商品を取得
const cheapestProduct = _.minBy(inventory, 'unitPrice');
console.log(
  `最低額商品: ${
    cheapestProduct?.productName
  } (¥${cheapestProduct?.unitPrice.toLocaleString()})`
);
// 最低額商品: USBメモリ 64GB (¥1,200)

在庫数が最も多い商品

在庫数で並べ替えて、過剰在庫のリスクを把握します。

typescriptCopy code// 在庫数が最も多い商品を取得
const mostStockedProduct = _.maxBy(
  inventory,
  'stockQuantity'
);
console.log(
  `最多在庫商品: ${mostStockedProduct?.productName} (${mostStockedProduct?.stockQuantity}個)`
);
// 最多在庫商品: USBメモリ 64GB (120個)

カテゴリ別在庫分析

カテゴリごとの在庫総額を計算して、在庫構成を把握します。

typescriptCopy code// カテゴリ別にグループ化
const groupedByCategory = _.groupBy(inventory, 'category');

// カテゴリごとの在庫総額を計算
Object.entries(groupedByCategory).forEach(
  ([category, items]) => {
    const categoryValue = _.sumBy(
      items,
      (item) => item.unitPrice * item.stockQuantity
    );
    console.log(
      `${category}: ¥${categoryValue.toLocaleString()}`
    );
  }
);

実行結果は以下のようになります。

makefileCopy code周辺機器: ¥353,400
ストレージ: ¥144,000
PC本体: ¥1,000,000

以下の図は、在庫ダッシュボードのデータ処理フローを示しています。

mermaidCopy codeflowchart TB
  inv["在庫データ"] --> calc1["単価 × 在庫数"]
  calc1 --> sumBy1["sumBy で在庫総額"]

  inv --> meanBy1["meanBy で平均単価"]
  inv --> maxBy1["maxBy で最高額商品"]
  inv --> group["groupBy でカテゴリ分け"]

  group --> catCalc["カテゴリ別集計"]
  catCalc --> sumBy2["sumBy で総額"]

  sumBy1 --> dashboard["ダッシュボード"]
  meanBy1 --> dashboard
  maxBy1 --> dashboard
  sumBy2 --> dashboard

このように、在庫データを多角的に分析することで、適切な在庫管理が実現できるのです。

Next.js での実装例

最後に、Next.js のサーバーコンポーネントで在庫ダッシュボードを実装する例をご紹介します。

ページコンポーネントの作成

typescriptCopy code// app/dashboard/inventory/page.tsx
import _ from 'lodash';
import { InventoryItem } from '@/types/inventory';

// サーバー側でデータを取得（仮）
async function getInventoryData(): Promise<
  InventoryItem[]
> {
  // 実際はAPIやDBから取得
  return inventory;
}

サーバーサイドでデータ取得関数を定義します。

typescriptCopy codeexport default async function InventoryDashboard() {
  // サーバーコンポーネントでデータ取得
  const inventoryData = await getInventoryData();

  // KPIを計算
  const totalValue = _.sumBy(
    inventoryData,
    (item) => item.unitPrice * item.stockQuantity
  );
  const avgPrice = _.meanBy(inventoryData, 'unitPrice');
  const topProduct = _.maxBy(inventoryData, 'unitPrice');

  return (
    <div className='p-8'>
      <h1 className='text-3xl font-bold mb-6'>
        在庫ダッシュボード
      </h1>

      <div className='grid grid-cols-3 gap-4 mb-8'>
        <div className='bg-white p-6 rounded-lg shadow'>
          <h3 className='text-gray-600 mb-2'>在庫総額</h3>
          <p className='text-2xl font-bold'>
            ¥{totalValue.toLocaleString()}
          </p>
        </div>

        <div className='bg-white p-6 rounded-lg shadow'>
          <h3 className='text-gray-600 mb-2'>平均単価</h3>
          <p className='text-2xl font-bold'>
            ¥{Math.round(avgPrice).toLocaleString()}
          </p>
        </div>

        <div className='bg-white p-6 rounded-lg shadow'>
          <h3 className='text-gray-600 mb-2'>最高額商品</h3>
          <p className='text-xl font-bold'>
            {topProduct?.productName}
          </p>
          <p className='text-lg text-gray-600'>
            ¥{topProduct?.unitPrice.toLocaleString()}
          </p>
        </div>
      </div>
    </div>
  );
}

このように、サーバーコンポーネントで Lodash を使って KPI を計算し、クライアントに送信する前にレンダリングできます。パフォーマンスと SEO の両面でメリットがあります。

まとめ

本記事では、Lodash の sumBy、meanBy、maxBy を使ったダッシュボード KPI 実装の実践的な手法をご紹介しました。

これらの関数を使うことで得られる主なメリットは以下の通りです。

第一に、コードの可読性が大幅に向上します。関数名から処理内容が明確に伝わるため、チーム開発でのメンテナンス性が高まるでしょう。

第二に、実装時間が短縮されます。ネイティブメソッドでの冗長な記述が不要になり、ビジネスロジックの実装に集中できます。

第三に、バグの混入リスクが低減します。Lodash は十分にテストされたライブラリであり、null や undefined の扱いも安全に処理されるのです。

実際のプロジェクトでは、売上分析、顧客分析、在庫管理など、さまざまなシーンでこれらの関数が活躍します。本記事でご紹介した実装パターンを参考に、ぜひ皆さんのダッシュボード開発に取り入れてみてください。

Lodash を活用することで、より高品質で保守性の高いコードが書けるようになり、開発効率も向上するでしょう。データドリブンな意思決定を支える、強力なダッシュボードを実装していきましょう。

関連リンク

• Lodash 公式ドキュメント
• Lodash sumBy リファレンス
• Lodash meanBy リファレンス
• Lodash maxBy リファレンス
• TypeScript 公式サイト
• Next.js 公式ドキュメント
• React 公式ドキュメント