株式会社ジェニシス　技術開発事業部ブログ: 【JsRender】if文

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

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

if文(文字列一致)

「if」「else if」「else」は言語の基本中の基本かと思いますが、実は意外に不便することがあります。

例えばjspタグ。

「ifがあってもelseが無い」

elseを実現したい場合はif文ではなくて「when」とかを使わなければならないのですが、
それを知らないプログラマーが「ありゃ。elseは無いんだ。ならifだけで頑張ろう」とかってifだけで強引に書こうとしてグダグダのソースになる悲劇が多発しています。(泣)

今回は基本中の基本であるif文をチェックしていきましょう。

まずは基本から。
メンバーの一覧の性別をチェックして、男性か女性かチェックする機能を作ってみます。

それがこちら。

<div id="result"></div>

<script id="jsRenderTmpl" type="text/x-jsrender">
<div>
{{:name}}は
{{if sex == "male"}}
  男性
{{else sex == "female"}}
  女性
{{else}}
  性別不明
{{/if}}
です。
</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>

この結果として、以下のように表示されます。

つまり、代表的なif-elseの構えで分岐が実現出来るわけですね。
whenとか使わなくて済みます。
分かり易くて助かりますね。

{{if sex == "male"}}
{{else sex == "female"}}
{{else}}
{{/if}}

if文(数値一致)

上は「{{if sex == "male"}}」と文字列一致で行いましたが、数字ならどうでしょう？

それもＯＫです。

普通に「{{if sex == 0}}」とでも書いて下さい。

<script id="jsRenderTmpl" type="text/x-jsrender">
<div>
{{:name}}は
{{if sex == 0}}
  男性
{{else sex == 1}}
  女性
{{else}}
  性別不明
{{/if}}
です。
</div>
</script>

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

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

var htmlOutput = template.render(data);

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

ちなみに、JavaScriptは型の検証がいい加減ですから、

{{if sex == 0}}
{{if sex == "0"}}

このようにダブルクォート(")で括ろうと括るまいと同じように処理されます。

if文(数値大小比較)

では、数値の大小比較はどうでしょう？

これも普通に「<」「>」が通用します。

<script id="jsRenderTmpl" type="text/x-jsrender">
<div>
{{:name}}は
{{if 10 <= age && age <20 }}
  10台
{{else 20 <= age && age <30}}
  20台
{{else}}
  それ以外
{{/if}}
です。
</div>
</script>

<script>
var data = [
{"name": "碇シンジ",age: 14},
{"name": "綾波レイ",age: 29},
{"name": "ゼルエル",age: -1}
];

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

var htmlOutput = template.render(data);

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

合わせて「AND条件は &&」、「OR条件は || 」で実現可能であることが分かりました。

boolean

ここまで来ると、どうやら直感で使うような普通の機能は全部備わっているということが分かってきました。
一応、「true」「false」といったboolean型の動作も確認してみましたが、こちらも何ら問題は起きないようです。

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

<script>
var data = [
{"name": "碇シンジ",flg: true},
{"name": "綾波レイ",flg: false},
{"name": "ゼルエル",flg: true}
];

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

var htmlOutput = template.render(data);

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

ロジック入り

極め付けはコレ。

if文の中にJavaScriptのロジックを入れてしまうという。

<script id="jsRenderTmpl" type="text/x-jsrender">
<div>
{{:name}}は
{{if age.substr(0,1) == 1 }}
  10台
{{else age.substr(0,1) == 2}}
  20台
{{else}}
  それ以外
{{/if}}
です。
</div>
</script>

<script>
var data = [
{"name": "碇シンジ",age: "14"},
{"name": "葛城ミサト",age: "29"},
{"name": "ゼルエル",age: "-1"}
];

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

var htmlOutput = template.render(data);

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

「{{if age.substr(0,1) == 1 }}」みたいな記述も可能。
要するに、JavaScriptの機能がそのまま動くように作られているわけです。

ただし、JsRenderのif文にこういうロジックが入ってしまうとソースが複雑化してしまいます。

分岐が必要な場合はシンプルに記述出来るようJSON定義の設計を見直すことをオススメしますが、
諸々の事情で出来ない場合等は、こういう小技で乗り切るのもエンジニアの現場判断と言えるでしょう。

終わりに

次回は同じく基本中の基本、「for文」の書き方をご紹介します。

ページ

2014年10月8日水曜日

【JsRender】if文