「SpreadJS（スプレッドJS）」は、WebシステムのフロントエンドでExcelやGoogleスプレッドシートのような機能を簡単に実現できるJavaScriptライブラリです。今回の記事ではSpreadJSに搭載された数式機能の特徴や用法をご紹介します。
表計算機能の代名詞「数式・関数」
ExcelやGoogleスプレッドシートを使う理由はなんですか？と尋ねられたら、なんといっても数式機能と答える方は多いのではないでしょうか。オーソドックスな四則演算や関数を使った高度な処理まで、目が眩むような数のデータもあっという間に計算・分析してくれるこの機能は、多様な情報を取り扱う現代のビジネスに欠かせない存在となっています。
このような機能を使った業務のシステム化では「Excelの機能をそのまま利用したい」という要望が大変多く挙がります。開発者にとってはExcelの再現という大変難しい要件になりますが、SpreadJSを使えばあっという間に対応可能です。
SpreadJSで実現する数式機能
数式・関数機能の実現にあたり、SpreadJSで難しい設定を行う必要はありません。以下のようにしてSpreadJSの初期化処理を行い、スプレッドシートを表示するだけで、すぐに数式・関数が利用できるようになります。
<html>
<head>
<!--SperadJS関連のCSSとライブラリファイルを参照します-->
<!--CSSファイル-->
<link rel="styleSheet" href="css/gc.spread.sheets.14.0.6.css" />
<!--JavaScriptファイル-->
<script src="scripts/gc.spread.sheets.all.14.0.6.min.js"></script>
</head>
<body>
<!-- SpreadJSをホストするDOM要素を設定します -->
<div id="ss"></div>
</body>
</html>// SpreadJSを表示するDOM要素を取得します
var ssDom = document.getElementById("ss");
// SpreadJSを初期化します
var spread = new GC.Spread.Sheets.Workbook(ssDom);このスプレッドシートでは、「=」、「+」「-」「*」「/」を用いた四則演算のほか、400を超えるExcel互換の関数を使用できます。また、もちろんコードによる数式設定も可能です。この場合はsetFormulaメソッドを使い、下記のようにして数式を設定します。
// SpreadJSを初期化します
var spread = new GC.Spread.Sheets.Workbook(ssDom);
var sheet = spread.getActiveSheet();
// セルに値を設定します
sheet.setValue(1,2,12345); // 値1
sheet.setValue(2,2,67890); // 値2
// 値1と値2を加算する数式をセルに設定します
sheet.setFormula(4,2,"=C2+C3");併せて、allowUserEditFormulaプロパティを使用すれば、数式の設定をシステム側のみで行い、利用者による数式の編集は禁止するといった仕組みを実現することも可能です。
// ユーザーによる数式の編集を禁止します
spread.options.allowUserEditFormula = false;名前ボックス / 数式テキストボックスの利用
このほかSpreadJSでは、Excelでおなじみの名前ボックスや数式テキストボックスを表示することも可能です。以下のデモに示すようにスプレッドシートと合わせてこのようなUIを配置することで、さらにExcelライクな数式機能と操作感を利用者に提供できるようになります。
また、上記にある「名前ボックス」や「数式テキストボックス」をもっと簡単に設置したいという場合は「リボンコンテナ」の利用もおすすめです。
SpreadJSに収録されているこのコンポーネントを利用すれば、初期化処理のみで、数式テキストボックスを含むExcelライクなUIを実現できます。
独自の数式機能でもっと便利に
さらにSpreadJSでは、アプリケーションの機能性を高める独自の数式機能を提供しています。この機能を活用することで、Excelにはないオリジナル関数を作成したり、ビジネスロジックにマッチした数式動作を実現したりすることが可能です。
カスタム関数
例えば下記は「カスタム関数」機能を使用して作成したオリジナル関数の例です。このようにしてお客様からの要望にマッチした関数を作成し、Excelライクな数式機能として提供することができるようになっています。
ヘッダに対する数式設定
また別な一例として、SpreadJSのスプレッドシートではヘッダに数式を設定することも可能です。次のデモで示すように数式スパークライン機能と併用すれば視認性に優れるデータ表示を実現できます。
詳細をデモでチェック
今回はSpreadJSを使い、Excelの数式・関数機能をWebアプリケーション上で実現する方法についてご紹介しました。このように、一般には再現が難しい同機能もSpreadJSを使えばかなりの高精度で実現できます。Excelを使った業務のシステム化案件にはぜひ、SpreadJSをご検討いただければ幸いです。
なお、今回ご紹介した機能はほんの一例です。弊社ウェブサイトでは、他にも数ある数式・関数機能を網羅的に確認できる「チュートリアルデモ」をご用意していますので、こちらもご確認ください。
さいごに
弊社Webサイトでは、製品の機能を手軽に体験できるトライアル版を公開しております。SpreadJSをご検討の方はこちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問などがございましたら下記にて、お気軽にお問合せください。