【JsRender】for文

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

現在はJavaScriptによる画面レンダリングツール「JsRender」について連載しています。
今回はif文に続きロジックの基本、for文です。

for文ではないもの

まず前置きですが、今までの例で使用してきましたように、
以下のようにJsRenderに配列を流し込みますと、それはループで処理されます。

<script id="jsRenderTmpl" type="text/x-jsrender">
<div>
{{:name}}
</div>
</script>

<script>
var data = [
{"name": "碇シンジ",sex:"male"},
{"name": "綾波レイ",sex:"female"},
{"name": "ゼルエル",sex:"unknown"}
];

var template = $.templates("#jsRenderTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);
</script>

ただ、これだと本当に何の芸も無いループに過ぎませんからね。
例えばループの中に更にループを持たせたいとか、ループとは別に通信の成功コードを持たせたいとか、ループ単品ではなくてヘッダー情報とセットでJSONを扱うとか、現実的なコード設計を考えますと、配列ではとても対応出来ません。

配列ダイレクトの使用は、まあ単なる動作確認程度の話。
実際の実装時は、仮に配列で十分なシチュエーションであったとしても、全実装をキッチリfor文型に統一して粒度を合わせた方が綺麗な実装になると思います。

for文

では、さっそく本題のfor文に入りましょう。

上のソースに近い状態でfor文構成にしますと、以下のようなサンプルになります。

<script id="jsRenderTmpl" type="text/x-jsrender">
★{{:title}}
{{for members}}
<div>
・{{:name}}
</div>
{{/for}}
</script>

<script>
var data = {
  "title": "for文サンプル一覧",
  "members": [
      {"name": "碇シンジ",sex:"male"},
      {"name": "綾波レイ",sex:"female"},
      {"name": "ゼルエル",sex:"unknown"}
 ]
};

var template = $.templates("#jsRenderTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);
</script>

「{{for members}}」「{{/for}}」でfor文になるわけです。

ちなみに、for文と言っても「for(var i=0;i<10;i++)」みたいな終了条件は設定出来ません。
流し込んだ配列を全件出力します。

「for(Map m : List<Map> list)」みたいな意味合いだと言えるでしょう。

if文との組み合わせ～偶数と奇数～

ここが一つの残念なお知らせなのですが、「偶数の行」「奇数の行」でテーブルの行を色分けする時に使うみたいな
for文の中でのその時の行数の読み分けする機能は存在しないのです。

この為、偶数/奇数を判断したい場合などは最初からJSONデータの中分岐に必要な情報を持たせておく必要があるわけです。

この場合、私だったら行数のカウントをJSONに持たせます。
そして、偶数/奇数の判断はJavaScriptの計算で実現します。

<script id="jsRenderTmpl" type="text/x-jsrender">
★{{:title}}
{{for members}}
<div>
・No.{{:no}}：{{:name}}：
{{if no % 2 == 0}}
  偶数行
{{else}}
  奇数行
{{/if}}
</div>
{{/for}}
</script>

<script>
var data = {
  "title": "for文サンプル一覧・if文と組みわせ",
  "members": [
      {no:"0","name": "あああああ"},
      {no:"1","name": "いいいいい"},
      {no:"2","name": "ううううう"},
      {no:"3","name": "えええええ"},
      {no:"4","name": "おおおおお"}
 ]
};

var template = $.templates("#jsRenderTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);
</script>

これで偶数行/奇数行の判断が出来ました。
後はスタイルシートの記述等を入れてしまえば色分けも完了です。

if文の説明になってしまいますが、このように「{{if no % 2 == 0}}」みたいな計算判定も出来ます。

こうやって簡易的なロジックも織り交ぜて実現していくのが現実的な実装と言えるでしょう。

終わりに

今回で「if文」と「for文」の使い方が分かりました。
ハッキリ言って、これだけ分かっていれば十分！！

基本的にテンプレートはシンプルに定義して、複雑な設定が必要な場合はAjax通信先のサーバ側など
別の所で頑張るべきですから……。

しかし、JsRenderには他にも便利機能がありますので、
次回以降はそれらについてご紹介していきたいと思います。