JavaScript/Wijmo

IEでNG!テンプレート文字列をWijmoで解決

by MESCIUS-dev

こんにちは。今回はWijmoに搭載の便利機能をご紹介したいと思います。

みなさんは、JavaScriptの標準規格であるEcmaScriptの6thエディション、ES2015において「テンプレート文字列（template strings）」と呼ばれる機能が追加されたことをご存知でしょうか。

この機能を使うと、処理で使用する文字列内にプレースホルダーを設けて、変数値などを埋め込めるようになります。

たとえばJavaScriptでinnerHTMLを取り扱う場合、ES2015以前のやり方では文字列と変数の連結にあたって次のような処理をしなければなりませんでした。

HTML標準APIによるinnerHTML処理

var area = document.getElementById('area');
var name = "グレープ太郎";
area.innerHTML = '<b>' + name + '</b>さん、こんにちは。';
実行結果

ES2015のテンプレート文字列を使った実装では、上記の処理を次のように記述することが可能です。

ES2015のテンプレート文字列によるinnerHTML処理

var area = document.getElementById('area');
var name = "グレープ太郎";
area.innerHTML = `<b>${name}</b>さん、こんにちは。`;
実行結果

See the Pen ES2015テンプレート文字列 by GrapeCity JS Samples (@spreadjssample) on CodePen.

“+” 演算子による連結の必要がなくなり、非常にスッキリとした分かりやすい記述になりました。なお、テンプレート文字列を使用する場合、文字列を囲む記号はバッククォート「`」です。シングルクォーテーション「’」ではないことに注意しましょう。

このように便利なES2015のテンプレート文字列ですが、業務アプリケーション開発者には大変辛い、ある特徴があります。日本企業で広く利用されている Internet Explorer において、この機能はサポートされていません。

しかし、こんなときWijmoがあれば、IEでもテンプレート文字列を取り扱うことが可能です。

wijmo.format メソッド

Wijmoの wijmo.format メソッドを使うと、ES2015のテンプレート文字列と同じような感覚で、文字列の連結処理を行うことができます。

以下はこれまでに示した2つのサンプルコードと同じ処理を、wijmo.formatメソッドを使って実現した例です。

var area = document.getElementById('area');
var customer = {name:"グレープ太郎"};
// wijmo.format メソッドによるテンプレート文字列設定
area.innerHTML = wijmo.format('<b>{name}</b>さん、こんにちは。', customer);

See the Pen Wijmo format メソッド by GrapeCity JS Samples (@spreadjssample) on CodePen.

プレースホルダーに「$」マークを使用しない点や、連結に使用する変数をオブジェクトとしてメソッドに渡す点が異なりますが、ES2015の方法とほぼ同じ記述方法でテンプレート文字列を取り扱うことができます。

また、プレースホルダーに設定するオブジェクトのプロパティ名に続けて:書式と記述することで、数値（例：c→通貨型）や日付（例：d→短い日付）などの書式を指定することも可能となっています。

以下はテンプレート文字列で通貨型の書式設定を行う例です。”13400″という数値に対し、書式設定によって3桁ごとのカンマと”￥”マークが表示されるようになります。

var area = document.getElementById('area');
var customer = {payment:134000};
area.innerHTML = wijmo.format('ご請求額は<b>{payment:c}</b>です', customer);

この機能を使用すると、以下のようなテーブル出力処理も少ないコード量で簡単に実現でき、もちろんIEを含む多様なブラウザで動作します。

IEにも対応しながら、JS処理にさらなる利便性をお求めの方は是非、Wijmoのご利用をご検討ください！

＼  この記事をシェアする  ／