JavaScript | APIから取ってきたデータを reduce で集計してチャート向けに整形

JavaScript

2025.10.282025.10.31

ではここでは「実際の開発で reduce をどう使うか」を、初心者でも理解できるように段階的に説明します。

1. 想定シナリオ
2. 目的：reduce で集計する
3. コード例
4. チャート用に整形（配列形式に変換）
5. 実際のAPI風（async/awaitつき例）
6. Recharts（React）の例（視覚化）
✅ ポイントまとめ
💡 応用アイデア

1. 想定シナリオ

たとえば、次のような「売上データ」を API から取得したとします👇

[
  {"month": "Jan", "category": "Food", "sales": 1200},
  {"month": "Jan", "category": "Drink", "sales": 800},
  {"month": "Feb", "category": "Food", "sales": 900},
  {"month": "Feb", "category": "Drink", "sales": 600},
  {"month": "Feb", "category": "Goods", "sales": 400}
]

これをそのままチャートライブラリ（例：Chart.js, Rechartsなど）に渡すのではなく、
「月ごとの合計売上」 にまとめたい！
（つまり Jan と Feb の合計を出したい）

2. 目的：reduce で集計する

reduce を使えば、API からのデータを「月ごとの合計」に変換（整形）できます。

3. コード例

// 仮の API データ（実際は fetch() で取得する）
const salesData = [
  { month: "Jan", category: "Food",  sales: 1200 },
  { month: "Jan", category: "Drink", sales: 800 },
  { month: "Feb", category: "Food",  sales: 900 },
  { month: "Feb", category: "Drink", sales: 600 },
  { month: "Feb", category: "Goods", sales: 400 },
];

// 月ごとに合計売上をまとめる
const monthlyTotal = salesData.reduce((acc, item) => {
  // acc = 累積オブジェクト（例：{ Jan: 2000, Feb: 1900 }）
  // item = 現在の要素（例：{month: "Jan", category: "Food", sales:1200}）
  
  const { month, sales } = item;

  // acc にこの月がまだなければ初期化
  if (!acc[month]) {
    acc[month] = 0;
  }

  // 売上を加算
  acc[month] += sales;

  return acc; // 次のループへ
}, {}); // ← 初期値は空オブジェクト

console.log(monthlyTotal);
// 結果: { Jan: 2000, Feb: 1900 }

// 仮の API データ（実際は fetch() で取得する）
const salesData = [
  { month: "Jan", category: "Food",  sales: 1200 },
  { month: "Jan", category: "Drink", sales: 800 },
  { month: "Feb", category: "Food",  sales: 900 },
  { month: "Feb", category: "Drink", sales: 600 },
  { month: "Feb", category: "Goods", sales: 400 },
];

// 月ごとに合計売上をまとめる
const monthlyTotal = salesData.reduce((acc, item) => {
  // acc = 累積オブジェクト（例：{ Jan: 2000, Feb: 1900 }）
  // item = 現在の要素（例：{month: "Jan", category: "Food", sales:1200}）
  
  const { month, sales } = item;

  // acc にこの月がまだなければ初期化
  if (!acc[month]) {
    acc[month] = 0;
  }

  // 売上を加算
  acc[month] += sales;

  return acc; // 次のループへ
}, {}); // ← 初期値は空オブジェクト

console.log(monthlyTotal);
// 結果: { Jan: 2000, Feb: 1900 }

JavaScript

4. チャート用に整形（配列形式に変換）

多くのチャートライブラリは「オブジェクト配列」を好む形式👇

const chartData = Object.entries(monthlyTotal).map(([month, total]) => ({
  month,
  total
}));

console.log(chartData);
/*
[
  { month: "Jan", total: 2000 },
  { month: "Feb", total: 1900 }
]
*/

const chartData = Object.entries(monthlyTotal).map(([month, total]) => ({
  month,
  total
}));

console.log(chartData);
/*
[
  { month: "Jan", total: 2000 },
  { month: "Feb", total: 1900 }
]
*/

JavaScript

5. 実際のAPI風（async/awaitつき例）

async function getMonthlySales() {
  const response = await fetch("https://example.com/api/sales");
  const data = await response.json();

  // reduce で集計
  const monthly = data.reduce((acc, item) => {
    acc[item.month] = (acc[item.month] || 0) + item.sales;
    return acc;
  }, {});

  // チャート用配列に変換
  return Object.entries(monthly).map(([month, total]) => ({ month, total }));
}

// 使う側
getMonthlySales().then(chartData => {
  console.log(chartData);
  // チャートライブラリへ渡す
});

async function getMonthlySales() {
  const response = await fetch("https://example.com/api/sales");
  const data = await response.json();

  // reduce で集計
  const monthly = data.reduce((acc, item) => {
    acc[item.month] = (acc[item.month] || 0) + item.sales;
    return acc;
  }, {});

  // チャート用配列に変換
  return Object.entries(monthly).map(([month, total]) => ({ month, total }));
}

// 使う側
getMonthlySales().then(chartData => {
  console.log(chartData);
  // チャートライブラリへ渡す
});

JavaScript

6. Recharts（React）の例（視覚化）

import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend } from 'recharts';

const chartData = [
  { month: "Jan", total: 2000 },
  { month: "Feb", total: 1900 },
];

export default function SalesChart() {
  return (
    <BarChart width={400} height={300} data={chartData}>
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="total" fill="#82ca9d" />
    </BarChart>
  );
}

import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend } from 'recharts';

const chartData = [
  { month: "Jan", total: 2000 },
  { month: "Feb", total: 1900 },
];

export default function SalesChart() {
  return (
    <BarChart width={400} height={300} data={chartData}>
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="total" fill="#82ca9d" />
    </BarChart>
  );
}

JavaScript

これで、reduce が 「集計 → 整形 → 可視化」 までの流れの中で大活躍することがわかります。

✅ ポイントまとめ

項目	内容
reduceの役割	配列を「1つのまとめた値」にする（ここでは月別合計）
初期値	`{}`（空オブジェクト）を指定しておく
出力形式	チャート用に「配列形式」へ変換することが多い
メリット	for文よりも短く、意図が明確（「集計する」）