GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の、製品のTIPSや発売などに関する最新情報をお届けします。

GrapeCity

セル値と数式、文字列を連結!SpreadJSの「書式文字列」機能を使う

WebアプリケーションのクライアントサイドでExcelライクなUIを実現できる高性能JavaScriptライブラリ「SpreadJS(スプレッドJS)」。今回は最新版の「V13.1J」で追加された新しい機能「書式文字列」の使い方を詳しくご紹介します。

書式文字列

プログラミングのご経験がある方は様々な言語に実装されているprintf関数をお使いになったことがあるかと思います。C言語の例を挙げると

int num = 20;
printf("降水確率は%dパーセントです", num);

とすることで、以下のような出力を得られる関数です。

降水確率は20パーセントです。

この関数の第1引数に設定された文字列は「書式文字列」と呼ばれる特殊な文字列です。変換指定子('%d'の部分)を含んだ記述が可能になっており、printf関数はこの指定子を第2引数以降に設定された変数の内容に変換して、最終的な出力にします。

「V13.1J」で追加されたSpreadJSの書式文字列機能は、このprintf関数のような出力をセル上で実現する機能です。以下では同機能の基本的な使い方と実用例をご紹介します。

基本的な使い方

2つの変換指定子

SpreadJSの書式文字列で使える変換指定子は下記の2種類です。

@アットマーク。書式文字列内でのセルの値を示します。
{{}} 二重波括弧。書式文字列内で数式を使う際に使用します。

以降の項目では各指定子を利用した書式文字列機能の基本的な用法をご紹介します。

変換指定子「@」

「@」は書式文字列内でセルの値を示します。以下はこの変換指定子を使ったコード例です。

// セルB2に担当者名を設定します
var cell = sheet.getCell(1,1);
cell.value("グレープ太郎");

// 書式文字列機能を使い「担当:」の文字とセル値を組み合わせて表示します
var style = sheet.getStyle(1, 1);
style.formatter = "担当:@";

このコードでは「グレープ太郎」という値をもったセルに書式文字列「担当者:@」を設定しています。実行結果はこちらのサンプルで確認可能です。


書式文字列にある「@」がセル値となって表示されました。また、B2セルをダブルクリックして編集状態にすることで、セル値が「グレープ太郎」のみであることも確認できます。

変換指定子「{{}}」

「{{}}」を使って書式文字列内に数式を記述できます。またこの際、SpreadJS組み込みの表計算関数も利用可能です。以下はこの変換指定子を使ったコード例です。

// セルにデータを設定します
sheet.setValue(1,1,"午前");
sheet.setValue(1,2,"午後");
sheet.setValue(1,3,"集計データ");
sheet.setValue(2,1, 123);
sheet.setValue(2,2, 732);
sheet.setValue(2,3, "1日の合計は");

// 書式文字列機能を使い数式とセル値を組み合わせて表示します
var style = sheet.getStyle(2, 3);
style.formatter = "午前{{=B3}}、午後{{=C3}}、{{=@}}{{=SUM(B3:C3)}}です。";
sheet.setStyle(2,3,style);

このコードでは、B3とC3セルの内容およびその合計を文字列に代入してセルに表示しています。実行結果はこちらのサンプルで確認可能です。


実用例

基本的な用法を押さえたところで、次は実際の活用例を考えてみたいと思います。今回は以下のような明細表示画面を想定し、2つのポイントで書式文字列機能を使います。

ご注文明細

1. 敬称の自動付与

Excelで入力フォームや名前入りの明細を作る際、以下のようなレイアウトを組んだことのある方は多いのではないでしょうか。

テンプレート中の敬称表記例

名前を入れるセルと「様」などの敬称を表示するセルを分けてつくるやり方です。実際のデータになる部分と、テンプレート上のラベルに相当する部分を分離するため、スプレッドシート上でこのようなレイアウトになるのはほぼ必然なのですが敬称の表記用に1マス分を確保しながらレイアウト調整するのは大変です。

SpreadJSの書式文字列機能を使うと、この問題を回避しつつ画面のレイアウトもより簡潔にすることができます。以下にコード例を示します。

// 「お名前」のデータを設定します
sheet.setValue(3, 2, "グレープ太郎");

// 書式文字列で敬称「様」が表示されるように設定します
var styleName = sheet.getStyle(3, 2);
styleName.formatter = "@ 様";
sheet.setStyle(3, 2, styleName);

このコードでは、変換指定子「@」と文字列「様」を組み合わせて名前の末尾に敬称を付与しています。実行結果はこちらのサンプルで確認可能です。


このようにすることで、前述のようなレイアウトで敬称表示の為だけにセルを用意する必要がなくなります。

2. シートデータと連動するメッセージ

アプリケーションの利用者に対して、動的なデータを含むメッセージを表示したい場合、プログラミングでは独自の実装、ExcelではCONCATENATE関数やTEXTJOIN関数を用いたデータと文字列の連結などが必要になってきます。このような処理もSpreadJSの書式文字列機能を使えばたった数行のコードで実現することが可能です。

今回は同機能を使って、以下のようなメッセージを表示してみたいと思います。赤字で示した部分の表示を変換指定子「{{}}」を利用した数式の記述で実現します。


ご注文ありがとうございました。
ご購入数(シート上にある「個数」データの合計)点、
合計で(シート上にある「価格」データの合計)円です。

本日(TODAY関数を使った日付の表示)から7日以内に
ご登録住所へ請求書をお送りいたします。

以下にコード例を示します。

// 書式文字列を設定して、シート上の情報とその計算結果を含む文字列を表示します
sheet.setValue(12, 1, "ご注文ありがとうございました。");
var styleStoreMessage = sheet.getStyle(12, 1);
styleStoreMessage.formatter = '{{=@}}\nご購入数 {{=sum(C7:C9)}} 点、合計で {{=sum(D7:D9)}} 円です。\n\n本日 {{=TEXT(TODAY(),"yyyy年m月d日")}} から 7 日以内に\nご登録住所へ請求書をお送りいたします。';
sheet.setStyle(12, 1, styleStoreMessage);

1.のサンプルにこのコードを加えた動作サンプルを以下に示します。


赤い点線で強調されている部分が、今回ご紹介の書式文字列機能を用いた部分です。それぞれのセルをダブルクリックして編集状態にすると、セルに設定されている生のデータを確認できます。このとき表示される文字列以外はすべて書式文字列機能によって生成・表示されています。

シート下部にある「ストアからのメッセージ」では、変換指定子「{{}}」を使用してシート上のデータを参照しながらメッセージを表示していることが確認できます。なお、これらのデータを変更した場合はメッセージも追従して更新されます。

Excelより使いやすく

今回はSpreadJS V13.1Jで登場した書式文字列機能をご紹介しました。「Excelライク」をコンセプトに開発されたSpreadJSですが今回のように「Excelよりも使いやすく」なる機能も実はたくさん搭載されています。弊社のウェブサイトでは、そのような部分も含めて網羅的に機能をお試しいただける製品デモを公開していますので、是非こちらもご確認ください。

  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品・技術資料をご覧ください。
  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品のデモアプリケーションをお試しください。