業務システムで良くあるのが、データを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で表示できました。
この他にも、セルの編集を可能にしたり、データ形式に応じて表示形式を変更したりと、細かな設定が可能です。詳しくは、Handsontableのドキュメントを参照してください。
JavaScript Data Grid - Documentation | Handsontable
まとめ
Handsontableはデータを表計算風に表示するのに便利なライブラリです。データも配列を渡すだけなので、とても簡単に利用できます。ぜひ、業務システムなどで利用してみてください。