WebアプリケーションのクライアントサイドでExcelライクなUIを実現できる高性能JavaScriptライブラリ「SpreadJS（スプレッドJS）」。最新版のV13Jではテーブル機能が大幅に強化され、テーブル領域の自動拡張やヘッダの固定表示、専用のコンテキストメニューといった数々の機能が追加されました。
今回はこの中から、強化されて便利になったテーブルバインディング機能についてご紹介します。
はじめに
本編に入る前に「データバインディング」「テーブルバインディング」の基本をおさらいしたいと思います。
SpreadJSにはJavaScriptの連想配列などをデータソースとして表示データを一括設定できる「データバインディング」機能があります。用途にあわせて3種類のデータバイディングが用意されており、シート全体を対象としたデータバインディングのほか、特定のセルを指定してデータ連結する「セルバインディング」、そしてシート上のテーブルを対象とする「テーブルバインディング」が利用可能です。
このテーブルバインディングの基本的な用法はブログ記事「SpreadJSで実現する帳票画面（2）テーブルバインディング編」で詳しく解説していますので、今回の本編とあわせて是非、そちらもご参照ください
それでは早速、V13Jで強化されたポイントをご説明していきたいと思います。
V13Jで強化されたテーブルバインディング機能
これまで、SpreadJSのテーブルバインディング機能においてバインドするデータと一緒に設定できるテーブルの情報は「列の名前」のみでした。V13Jではこの点が強化され「書式」や「セル型」「変換関数」の設定も可能になりました。以降の項目ではこの点を1つずつサンプル付きで解説していきます。
書式設定
テーブルバインディングでデータを一括設定する際に、併せて列の書式設定ができるようになりました。たとえば以下のサンプルは日付書式の設定を行った例です。左側にあるテーブルの1列目に日付書式の設定を行っています。この設定の有無による違いがわかるよう、右側のテーブルにはデータソースをそのままバインディングして表示しました。
これまではデータバインディング後に、別途書式設定を行うという2つの処理を実施しなければなりませんでしたが、テーブル列の定義情報に書式設定を含めることで以下のように簡潔なコード記述できるようになりました。
コード例：書式設定を含む列定義情報とテーブルバインディング
データソース
var data = { sales: [ { orderDate: "2020/1/6", item: "USBメモリ" }, { orderDate: "2020/4/1", item: "SDカード" }, { orderDate: "2020/6/8", item: "OAプリンタ" } ] };
テーブル列の定義とデータバインド設定
// テーブル1列目の定義に書式（年月日で表示）を設定します var tableColumn1 = new GC.Spread.Sheets.Tables.TableColumn( 1, "orderDate", "発注日", "yyyy年m月d日" // データの書式を設定します ); var tableColumn2 = new GC.Spread.Sheets.Tables.TableColumn( 2, "item", "注文品" ); // テーブルを生成します var table = sheet.tables.add("tableSales", 1, 1, 4, 2); table.autoGenerateColumns(false); // テーブルに列定義を設定し、データバインドします table.bind([tableColumn1, tableColumn2], "sales", data);
セル型設定
書式に加えて、V13Jではテーブル列の定義情報に「セル型」も設定できるようになりました。バインディングの完了時、この設定を行った列には対応するデータソースの値をvalue値とするセル型が表示されるようになります。
以下のサンプルはこの機能を使用してテーブル列にチェックボックス型セルを設定した例です。データソースにあるBoolean値に対応する形で、列の各セルにチェックボックスが表示されています。
コード例：セル型設定を含む列定義情報とテーブルバインディング
データソース
var data = { sales: [ { item: "USBメモリ", ordered: true }, { item: "SDカード", ordered: false }, { item: "OAプリンタ", ordered: true } ] };
テーブル列の定義とデータバインド設定
// テーブル2列目の定義にセル型（チェックボックス）を設定します var tableColumn2 = new GC.Spread.Sheets.Tables.TableColumn( 2, "ordered", "発注済", null, new GC.Spread.Sheets.CellTypes.CheckBox() // 列に対するセル型を設定します ); // テーブルを生成します var table = sheet.tables.add("tableSales", 1, 1, 4, 2); table.autoGenerateColumns(false); // テーブルに列定義を設定し、データバインドします table.bind([tableColumn1, tableColumn2], "sales", data);
変換関数
最後はすこし変わり種、テーブル列に対する「変換関数」の設定です。独自の関数をテーブル列の定義情報に設定すると、テーブルバインディング時にデータソースがこの関数に処理されるようになります。この機能により、開発するアプリケーションの仕様に合わせた柔軟なデータ表示や処理が可能となりました。
たとえば次のサンプルでは、以下のような変換関数を用意しデータソースに格納されている価格データ（単位：アメリカドル）を日本円に変換して表示しています。
// 価格変換関数 var priceConvert = function(item) { var yen = item["price"] * 102; // 1ドル102円で変換します return yen; };
コード例：変換関数設定を含む列定義情報とテーブルバインディング
データソース
var data = { sales: [ { item: "USBメモリ", price: 12 }, { item: "SDカード", price: 25 }, { item: "OAプリンタ", price: 83 } ] };
テーブル列の定義とデータバインド設定
// テーブル2列目の定義に変換関数（ドル→円変換）を設定します var tableColumn1 = new GC.Spread.Sheets.Tables.TableColumn(1, "item", "注文品"); var tableColumn2 = new GC.Spread.Sheets.Tables.TableColumn( 2, "price", "価格（円）", null, null, priceConvert // 変換関数を設定します ); // テーブルを生成します var table = sheet.tables.add("tableSales", 1, 1, 4, 2); table.autoGenerateColumns(false); // テーブルに列定義を設定し、データバインドします table.bind([tableColumn1, tableColumn2], "sales", data);
このほか、アイディア次第で様々な処理が実装できそうですね。
ほかにも盛り沢山の新機能
今回はSpreadJS V13Jで登場したテーブルバインディングに関する新機能をご紹介しました。大変便利な機能なので、これまでテーブルバインディングをご活用だった方も、これから同機能を試されるかたも積極的にお試しいただければ幸いです。
また、今回ご紹介したテーブル機能以外にも、SpreadJS V13Jでは数々の新機能が搭載されています。現在、開発者のための実装系Webマガジン「CodeZine」には、それらの新機能を解説したわかりやすい紹介が掲載されていますので、是非こちらもご確認ください。