【JsRender】JSON定義

株式会社ジェニシス　技術開発事業部の遠藤　太志郎(Tacy)です。

現在はJavaScriptによる画面レンダリングツール「JsRender」について連載しています。
今回のテーマはJSONです。

JSONデータ定義

さて、前回は単純な「ただ文字列を表示するだけ」という基本についてご紹介しました。

ここからif文やfor文など様々な機能に行きたいわけですが、その前にJSONの定義方法について検証したいと思います。

シンプル

一番シンプルなのが前回のこれ。

Scrpit

<script id="jsRenderTmpl" type="text/x-jsrender">
私の名前は{{:name}}です。
</script>

JSON

var data = {"name": "遠藤　太志郎"};

これで「私の名前は遠藤　太志郎です。」になります。

配列

次に配列に行ってみます。

Scrpit

<script id="jsRenderTmpl" type="text/x-jsrender">
<div>
私の名前は{{:name}}です。
<div>
</script>

JSON

var data = [
{"name": "遠藤　太志郎"},
{"name": "えんどう　たしろう"},
{"name": "エンドウ　タシロウ"}
];

結果がこちら。

ふ～む……。
どうやら導入データが配列になっていると、自動的にループでやってくれるようですね。

でもこれ、本当に単純なデータをベロベロ出すだけなら良いけど、
例えばゼロ件の時はメッセージを出すとか、僅かでも工夫が必要になると途端にデータ定義が不便になっちまうんですよ。

単純配列の出番は本当にシンプルな場合のみです。
まあ、配列にはこういう機能があるとだけ覚えておけば良いでしょう。

入れ子

JSON定義ってオブジェクト指向的な性質を持っていますから、JavaのクラスをJSONに置き換えるようなイメージで
定義することもできます。

こんなようなクラスがあるとしますと、

public class Person {

    /** 名前 */
    private String name;

    /** 年齢 */
    private int age;

}

JSONで書けばこうなります。

var data = [
var data = {person:{"name": "遠藤　太志郎",age:28}};
];

この場合、テンプレートはこうやって書く。

<script id="jsRenderTmpl" type="text/x-jsrender">
私の名前は{{:person.name}}です。年齢は{{:person.age}}です。
</script>

「.(ドット)」で連結すれば、JSONの階層構造を掘り進んで読んでくれるわけです。
これがJsRenderの良い所で、JavaでBEAN定義したクラスを丸ごとJSON化して叩き込むことが出来ますので、ロジックが非常に楽になるのです。
JavaScriptの機能がそのまま踏襲されています。

配列番号指定

次は「入れ子と配列の合体で番号指定」です。

以下みたいに入れ子構造の先が配列になっている場合です。

var data = {person:{"name": ["遠藤","太志郎"],age:28}};

nameの属性に「苗字」と「名前」が別々に入っていますね。
こんなデータ構造になってしまうのは余り良いサンプルとは言えませんが、
仮に「firstname」「familyname」と別々のフィールドに定義しますと、それだけでJSONもデータ量が増えてしまいます。

「転送データ量削減の為に定義を省略する」など、諸々の事情で配列でやらなきゃならないタイミングもあります。

こういう状況で、「配列のゼロ番目に入っている苗字部分だけを取り出したい」という需要があるとします。
その場合はこうやって記述すればＯＫです。

<script id="jsRenderTmpl" type="text/x-jsrender">
私の苗字は{{:person.name[0]}}です。年齢は{{:person.age}}です。
</script>

[0]で順番指定出来るわけですね。
痒い所まで手が届く便利設計になっています。

ちなみに「苗字＋名前」としたい場合は「{{:person.name[0]}}{{:person.name[1]}}」と
単に続けて書けばＯＫです。

文字番号指定
最後に小ネタを。

JsRenderって、「文字列の何番目だけを出したい」という文字番号指定機能があるのです。

JSONデータをこれとします。

var data = [
var data = {person:{"name": "遠藤　太志郎",age:28}};
];

そしてこう書くと。

<script id="jsRenderTmpl" type="text/x-jsrender">
私の苗字は{{:person.name[0]}}{{:person.name[1]}}です。年齢は{{:person.age}}です。
</script>

これでもちゃんと「遠藤」ってなります。

• {{:person.name[0]}}=遠
• {{:person.name[1]}}=藤

この辺りもJsRenderの機能と言うより、JavaScriptの仕様なんですけどね。

JavaScriptには偶に変わった仕様が入っていることがあるのです。
配列と見間違えてバグの温床を化すのがオチなような仕様ですけれども、
テクニシャンな人は使ってみると良いでしょう。

終わりに

以上でデータ定義編は終わりです。
JavaScriptの標準に乗っ取った、直感的に理解出来る定義方法になっていると思います。

次回もJsRenderは続きます。