業務システムで使える！CSVを手軽に表計算に表示する「Handsontable」

業務システムで良くあるのが、データをExcelなどの表計算風に表示するという要件です。テーブルで表示するだけでなく、ソートしたり、簡易的な編集をしたりと多彩な機能が望まれます。

今回はそんな要望を手軽に叶えられるライブラリHandsontableを紹介します。

Handsontableを使えば、ExcelやGoogleスプレッドシートのような表計算ソフトの操作性を、オリジナルのアプリケーションで実現できます。

Handsontableとは？

Handsontableは、JavaScriptのライブラリの1つで、データをJSON形式の配列で渡すだけで、表計算風の表示が可能になります。

また、以下のような豊富な機能も備えています。

データのソートやフィルタリング
セルの編集（データの追加、削除、変更）
行や列の挿入、削除
セルの結合
条件付き書式の設定

Handsontableは、非商用の場合は無償で利用できます。商用利用の場合は有償となりますが、詳細な価格は問い合わせが必要です。
Pricing plans - Handsontable data grid for JavaScript, React, Angular, and Vue.

Handsontableの使い方

では、実際にHandsontableを使ってみましょう。

今回は東京都のオープンデータより、東京ビッグサイトのイベント情報東京ビッグサイト6月～8月のイベント情報 - 東京都オープンデータAPIカタログサイトからデータを取得して表示してみます。

必要なファイルを読み込む

まず、HTMLファイルに、HandsontableのJavaScriptとCSSを読み込む記述を追加します。CDNを利用する場合は、以下のように記述します。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>

表示領域を用意する

次に、Handsontableを表示する領域を、HTMLファイル内に用意します。今回は、id="example"というdiv要素を追加します。

<div id="example"></div>

JavaScriptでデータを取得する

JavaScriptファイルを作成し、以下のように記述します。
まず、オープンデータのURLと、Handsontableの表示領域を定数で定義します。

// オープンデータのURL
const url = "https://service.api.metro.tokyo.lg.jp/api/t001001d0000000001-1db9fd22025886d3d5c9607d5c24fdf0-0/json?limit=10";
// Handsontableの表示領域
const container = document.querySelector("#example");

次に、アプリの準備ができたタイミング、またはHTML DOMができあがったタイミングで、データ取得の処理を実行します。

const event = window.cordova ? "deviceready" : "DOMContentLoaded";
document.addEventListener(event, async () => {
    // この中に実装します
});

以下は // この中に実装します の中で実装します。

データ取得

データ取得は、fetch関数を使って行います。取得したデータは、json定数に格納されます。

const res = await fetch(url, {
    method: "POST",
    headers: {
        accept: "application/json",
        "Content-Type": "application/json",
    },
    body: JSON.stringify({}),
});
const json = await res.json();

取得したデータをHandsontableで表示する

この json は以下のような内容になっています。今回対象とするのは hits 以下のデータです。

{
  "total": 111,
  "subtotal": 5,
  "limit": 5,
  "offset": null,
  "metadata": {
        // 省略
  },
  "hits": [
    {
      "row": 1,
      "展示会名": "Japan Energy Summit & Exhibition 2024",
      "会期(開始)": "2024/06/03",
      "開始曜日": "(月)",
      "会期(終了)": "2024/06/05",
      "終了曜日": "(水)",
      "利用施設": "西1",
      "開催時間": "9:00-18:00 ",
      "最終日の終了時刻(●:30分前に終了　▲:1時間前に終了　■:2時間前に終了）": "■",
      "来場対象者": "商談",
      "入場料について": " ウェブをご参照ください ",
      "内容": "Embracing collaboration to drive change?",
      "連絡先": "Japan Office",
      "TEL": "",
      "URL": "https://www.japanenergyevent.com/ja/"
    },
        : // 繰り返し
    ]
}

Handsontableによる表示

まずヘッダーを作成します。これは hits の最初の要素のキーを取得します。

const headers = Object.keys(json.hits[0]);
const data = [headers]; // 1行目

次にデータを作成します。データはキーは不要なので、値だけを配列で取得します。

for (const row of json.hits) {
    data.push(Object.values(row));
}

最後に、new Handsontable()を使って、Handsontableを表示します。

const hot = new Handsontable(container, {
    data, // データ
    rowHeaders: true, // 行ヘッダー
    colHeaders: true, // 列ヘッダー
    height: "auto", // 高さ
    autoWrapRow: true, // 自動折り返し（行）
    autoWrapCol: true, // 自動折り返し（列）
    licenseKey: "non-commercial-and-evaluation" // 非商用の場合の設定
});

以上で、オープンデータをHandsontableで表示できました。