SpreadJS（スプレッドJS）」は、WebシステムのフロントエンドでExcelやGoogleスプレッドシートのような機能を簡単に実現できるJavaScriptライブラリです。今回の記事ではSpreadJSに搭載された書式設定機能の特徴や用法をご紹介します。
データ表現の幅を広げ可読性を高める「書式設定」
世の中で扱われる様々なデータには、その用途に応じた「書式」があります。特に、正確な情報伝達が求められるビジネスの世界において書式は重要な存在です。例えば請求書などで商品価格を示す際、「1万円」を単に「10000」とするのではなく、通貨や会計用の書式を使い「￥10,000」と表記すれば意味が明確になり誤読の可能性がグンと低下します。
大きなメリットがある一方で、手動ではなかなか面倒くさいこの作業を代わりに行ってくれるのがExcelの「書式設定」機能です。豊富な一覧から書式を選択しセルや列に設定すれば、あとは自動で入力データに書式が適用されるようになります。
Excelと高い互換性をもつSpreadJSは、この書式設定機能をばっちりサポートしています。豊富な書式のプリセットやデータに対する書式の自動適用など、ソフトウェア開発の観点では実装のハードルが高い同機能ですが、SpreadJSならわずかな設定で、システム利用者に向け強力な書式設定機能を提供することが可能です。
SpreadJSで実現する書式機能
SpreadJSの書式設定ではsetFormatterメソッドを使います。以下はB2セルに対し日付用の書式“yyyy年m月d日”を設定する例です。
// セルに書式を設定します
sheet.setFormatter(1, 1, 'yyyy年m月d日');上記のコードを実行すると以下のような動作を確認することができます。たった1行のコード設定で、Excelと同様の書式機能が実現できてしまいました（コードの詳細と実動作はこちらでご確認いただけます）。
なお、この際、setFormatterメソッドの引数に設定する文字列にはExcelの書式記号を利用できます。そのため、普段Excelをご利用になっている方なら設定に迷うこともありません。例えば以下は、和暦を示すExcelの書式記号“[$-411]”を使い日付データに元号を表示しています。
// セルに書式を設定して、日付を和暦で表示します
sheet.setFormatter(1, 1, '[$-411]ggge年m月d日');SpreadJSデザイナでさらに簡単設定
APIによる設定でもたった1行の書式設定ですが、製品に付属するSpreadJSデザイナを活用することでその設定がさらに簡単になります。同デザイナはExcelライクなGUIを備えるスプレッドシート設計のためのスタンドアロンアプリケーションです。以下の動画に示すように、このデザイナではExcelと同様の操作感でコーディングをせずに書式設定を行うことができます。
こうして作成した設定はJSON形式データ（.ssjsonファイル）として保存可能になっており、プログラム上ではSpreadJSのfromJSONメソッドを使って読み込むことが可能になっています。
// 読込データ
var data = /* デザイナから出力した.ssjsonファイルの内容を設定します */;
// デザイナで作成したデータをSpreadJSに読み込みます
spread.fromJSON(data);ビジネスロジックにあわせた独自実装も可能
さらにSpreadJSでは、書式設定機能をカスタムして「Excelと同様」にとどまらない、より高度な動作を実現できるようになっています。以下に示すデモはその一例です。複数の条件に応じてフォント色が変わる、独自の書式設定を実装したものになります。
Excelでもセル値の変化などに応じて書式を変えることができる「条件付き書式」という機能がありますが、こちらの機能を活用すれば、スプレッドシートに含まれていない要素、例えばSpreadJS以外のUIやビジネスロジックの動作に応じて書式を変更することが可能です。
書式機能の詳細をデモでチェック
今回はSpreadJSを使い、Excelの書式機能をWebアプリケーション上で実現する方法についてご紹介しました。このように、一般には再現が難しい同機能もSpreadJSを使えば簡単に実現可能です。Excelを使った業務のシステム化案件にはぜひ、SpreadJSをご検討いただければ幸いです。
なお、今回ご紹介した機能はほんの一例です。弊社ウェブサイトでは、他にも数ある書式設定機能を網羅的に確認できる「チュートリアルデモ」をご用意していますので、こちらもご確認ください。
さいごに
弊社Webサイトでは、製品の機能を手軽に体験できるトライアル版を公開しております。SpreadJSをご検討の方はこちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問などがございましたら下記にて、お気軽にお問合せください。