初心者でも分かる！JavaScriptピボットテーブル作成の10選

はじめに
●JavaScriptでピボットテーブルを作る理由
●基本的なピボットテーブルの作り方
- ○HTMLとCSSの準備
- ○JavaScriptの基本コード
●10のサンプルコード
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでピボットテーブルを作成する方法が身に付きます。

ピボットテーブルは、データを集計して見やすく表示するための表形式のツールです。

JavaScriptを使用することで、動的な操作が可能になり、データ分析がより効率的になります。

●JavaScriptでピボットテーブルを作る理由

JavaScriptを使ってピボットテーブルを作成する理由は、下記の通りです。

データの動的な操作が可能
クライアントサイドでの処理により、サーバーへの負担を減らす
見た目や機能をカスタマイズしやすい

●基本的なピボットテーブルの作り方

まずは、基本的なピボットテーブルを作成する方法を説明します。

○HTMLとCSSの準備

ピボットテーブルを表示するためのHTMLとCSSを用意します。シンプルなテーブルの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript ピボットテーブル</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table id="pivotTable">
    <thead>
      <tr>
        <th>行ヘッダー1</th>
        <th>行ヘッダー2</th>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
        ...
      </tr>
      ...
    </tbody>
  </table>
</body>
</html>

○JavaScriptの基本コード

このセクションでは、データを読み込み、ピボットテーブルを生成する基本的なJavaScriptコードを紹介します。

この例では、データ配列を受け取り、それをもとにピボットテーブルをHTML要素として作成しています。

// データの例
const data = [
  { category: "A", value: 10 },
  { category: "B", value: 20 },
  // ...
];

// ピボットテーブルを生成する関数
function createPivotTable(data) {
  const pivotTable = document.getElementById("pivotTable");
  const tbody = pivotTable.querySelector("tbody");

  data.forEach(row => {
    const tr = document.createElement("tr");
    for (const key in row) {
      const td = document.createElement("td");
      td.textContent = row[key];
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  });
}

// ピボットテーブルを生成
createPivotTable(data);

●10のサンプルコード

ここからは、実際にJavaScriptでピボットテーブルを作成・カスタマイズするための10のサンプルコードを紹介します。

○サンプルコード1：基本的なピボットテーブル

このコードでは、前述の基本コードを用いて、シンプルなピボットテーブルを作成しています。

この例では、配列データを元にHTML要素を作成し、ピボットテーブルとして表示しています。

（基本的なピボットテーブルのコードは、前述の「JavaScriptの基本コード」の部分を参照してください。）

○サンプルコード2：列ヘッダーの並び替え

このコードでは、列ヘッダーをクリックすることでデータを昇順・降順に並び替える機能を実装しています。

この例では、イベントリスナーを使ってクリックイベントを検出し、データをソートした後、ピボットテーブルを再描画しています。

let sortOrderAsc = true;
let sortedColumnIndex = null;

function sortColumn(columnIndex) {
  // 昇順・降順の切り替え
  sortOrderAsc = (columnIndex === sortedColumnIndex && sortOrderAsc) ? false : true;
  sortedColumnIndex = columnIndex;

  // データをソート
  data.sort((a, b) => {
    return sortOrderAsc ? a[columnIndex] - b[columnIndex] : b[columnIndex] - a[columnIndex];
  });

  // ピボットテーブルを再描画
  createPivotTable(data);
}

// 列ヘッダーにイベントリスナーを追加
const headerCells = document.querySelectorAll("#pivotTable th");
headerCells.forEach((cell, index) => {
  cell.addEventListener("click", () => sortColumn(index));
});

○サンプルコード3：行ヘッダーの並び替え

このコードでは、行ヘッダーをクリックすることで、行データを並び替える機能を実装しています。

この例では、イベントリスナーを使ってクリックイベントを検出し、行データをソートして表示しています。

function sortRow(rowIndex) {
  const pivotTable = document.getElementById("pivotTable");
  const rows = Array.from(pivotTable.querySelectorAll("tbody tr"));

  // 行データを並び替え
  rows.sort((a, b) => {
    const aValue = parseFloat(a.cells[rowIndex].textContent);
    const bValue = parseFloat(b.cells[rowIndex].textContent);
    return aValue - bValue;
  });

  // 並び替えた行データを再配置
  const tbody = pivotTable.querySelector("tbody");
  tbody.innerHTML = "";
  rows.forEach(row => tbody.appendChild(row));
}

○サンプルコード4：データのフィルタリング

このコードでは、指定された条件に基づいてデータをフィルタリングする機能を実装しています。

この例では、フィルタリング条件を満たすデータのみを表示するようにピボットテーブルを更新しています。

function filterData(condition) {
  const filteredData = data.filter(row => condition(row));
  createPivotTable(filteredData);
}

// 例: valueが10以上のデータを表示
filterData(row => row.value >= 10);

○サンプルコード5：集計方法の変更

このコードでは、ピボットテーブルの集計方法を変更する方法を紹介しています。

この例では、集計方法を「合計」から「平均」に変更し、ピボットテーブルを更新しています。

function changeAggregationMethod(aggregationMethod) {
  // 集計方法を変更
  pivotTableOptions.aggregationMethod = aggregationMethod;

  // ピボットテーブルを再描画
  createPivotTable(data);
}

// 集計方法を平均に変更
changeAggregationMethod("average");

○サンプルコード6：セルのカスタマイズ

このコードでは、ピボットテーブルのセルをカスタマイズする方法を紹介しています。

この例では、セルの背景色やフォントスタイルを動的に変更する方法を示しています。

function customizeCell(row, col, value) {
  const cell = document.querySelector(`#pivotTable tbody tr:nth-child(${row + 1}) td:nth-child(${col + 1})`);

  // セルの背景色を変更
  cell.style.backgroundColor = value > 10 ? "red" : "white";

  // セルのフォントスタイルを変更
  cell.style.fontWeight = value > 5 ? "bold" : "normal";
}

// セルのカスタマイズを適用
data.forEach((row, rowIndex) => {
  row.forEach((value, colIndex) => {
    customizeCell(rowIndex, colIndex, value);
  });
});

○サンプルコード7：縦横の入れ替え

このコードでは、ピボットテーブルの縦横を入れ替える方法を紹介しています。

この例では、行と列を入れ替えて、ピボットテーブルを再描画しています。

function transposePivotTable() {
  const transposedData = data[0].map((_, colIndex) => data.map(row => row[colIndex]));
  createPivotTable(transposedData);
}

// ピボットテーブルの縦横を入れ替える
transposePivotTable();

○サンプルコード8：グループ化されたデータの表示

このコードでは、グループ化されたデータをピボットテーブルで表示する方法を紹介しています。

この例では、データをグループ化し、各グループごとに集計を行い、ピボットテーブルを更新しています。

function groupData(groupBy) {
  const groupedData = {};
  data.forEach(row => {
    const key = groupBy(row);
    if (!groupedData[key]) {
      groupedData[key] = [];
    }
    groupedData[key].push(row);
  });

  const aggregatedData = Object.entries(groupedData).map(([key, group]) => {
    // ここで集計を行う
    const aggregatedRow = aggregate(group);
    return [key, ...aggregatedRow];
  });

  // ピボットテーブルを更新
  createPivotTable(aggregatedData);
}

// グループ化条件を指定
function groupBy(row) {
  return row[0]; // 最初の列をグループ化キーとする
}

// グループ化されたデータを表示
groupData(groupBy);

○サンプルコード9：ページング機能の追加

このコードでは、ピボットテーブルにページング機能を追加する方法を紹介しています。

この例では、1ページあたりの表示件数を指定し、ページング機能を実装しています。

let currentPage = 1;
const itemsPerPage = 10;

function displayPage(page) {
  // ページの範囲を計算
  const startIndex = (page - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;

  // データをフィルタリング
  const filteredData = data.slice(startIndex, endIndex);

  // ピボットテーブルを更新
  createPivotTable(filteredData);
}

// 指定したページを表示
displayPage(currentPage);

○サンプルコード10：グラフ表示の追加

このコードでは、ピボットテーブルのデータをもとにグラフを表示する方法を紹介しています。

この例では、グラフ表示用のライブラリを利用し、ピボットテーブルのデータをグラフに変換して表示しています。

function createChart(data) {
  // グラフ用のデータを準備
  const chartData = data.slice(1).map(row => {
    return {
      label: row[0],
      value: row[1],
    };
  });

  // グラフを描画
  const chart = new Chart('chart', {
    type: 'bar',
    data: chartData,
  });

  chart.render();
}

// ピボットテーブルのデータをもとにグラフを作成
createChart(data);