CodeZine(コードジン)

特集ページ一覧

JavaScriptテンプレートエンジンJsRenderの便利な機能

徹底解説JsRender/JsViews 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/09/20 14:00
目次

条件分岐

 テンプレートの中に条件分岐を書くことも可能です。条件分岐を使うと、パスに指定したオブジェクトが存在するか否かで出力するテキストを変更することや、特定の条件を満たしたときにのみテキストを出力することができます。

ifを使った条件分岐

 ifを使った条件分岐は次のように書きます。

リスト11 ifを使った条件分岐(JsRender2_sample8.html)
<script id="itemTemplate" type="text/x-jsrender">
  {{if price}}
    <b>{{>name}}</b>の値段は<b>{{>price}}円</b>です。<br/>
  {{/if}}

  {{if weight < 50 }}
    重さは50グラム未満です。<br/>
  {{/if}}
</script>
図6:ifを使った条件分岐
図6:ifを使った条件分岐

 条件分岐は{{if 条件式}}と記述し、条件式にはパスか式を指定します。パスに指定されたオブジェクトが存在するか、式が真の値を返す場合、{{if 条件式}}と{{/if}}で囲まれた範囲を出力します。

ifとelseを使った条件分岐

 {{else}}を使って、複数の条件分岐を指定することもできます。

リスト12 ifとelseを使った条件分岐(JsRender2_sample9.html)
<script id="itemTemplate" type="text/x-jsrender">
  {{if price}}
    <b>{{>name}}</b>の値段は<b>{{>price}}円</b>です。<br/>
  {{else}}
    <b>{{>name}}</b>の値段は未定です。<br/>
  {{/if}}

  {{if weight < 50 }}
    重さは50グラム未満です。<br/>
  {{else}}
    重さは50グラム以上です。<br/>
  {{/if}}
</script>

 条件式に指定したパスが存在しないか、式が偽の値を返す場合、{{else}}と{{/if}}で囲まれた範囲を出力します。

3つ以上の条件分岐

 3つ以上の条件分岐を書くには、elseの後に条件式を書いてください。

リスト13 3つ以上の条件分岐(JsRender2_sample10.html)
<script id="itemTemplate" type="text/x-jsrender">
  {{if weight < 50 }}
    重さは50グラム未満です。<br/>
  {{else weight < 100 }}
    重さは100グラム未満です。<br/>
  {{else}}
    重さは100グラム以上です。<br/>
  {{/if}}
</script>

列挙

 データモデルに配列や連想配列が含まれている場合は、その要素を列挙することができます。

forを使った列挙

 {{for 配列へのパス}}と記述すると、{{for}}と{{/for}}で囲まれた範囲を配列要素の数分、繰り返し出力します。

リスト14 配列を含んだデータモデル(JsRender2_sample11.html)
// データモデルの定義
var item = {
    name: "関東地方の面積",
    prefectures: [
        { name: "茨城県", area: 6095.69 },
        { name: "栃木県", area: 6408.28 },
        { name: "群馬県", area: 6363.16 },
        { name: "埼玉県", area: 6363.16 },
        { name: "千葉県", area: 6095.69 },
        { name: "東京都", area: 2187.42 },
        { name: "神奈川県", area: 2415.84 }
    ]
};
リスト15 配列要素を列挙するテンプレート(JsRender2_sample12.html)
<script id="itemTemplate" type="text/x-jsrender">
  {{>name}}:<br/>
  {{for prefectures }}
    {{>name}}の面積は{{>area}}km<sup>2</sup>です。<br/>
  {{/for}}
</script>
図7:forを使った列挙
図7:forを使った列挙

配列が空の場合

 {{for}}と{{/for}}の間に{{else}}を記述することで、配列が空の場合に出力するものを指定できます。

リスト16 配列要素を列挙するテンプレート(JsRender2_sample13.html)
<script id="itemTemplate" type="text/x-jsrender">
  {{>name}}:<br/>
  {{for prefectures }}
    {{>name}}の面積は{{>area}}km<sup>2</sup>です。<br/>
  {{else}}
    データがありません<br/>
  {{/for}}
</script>
図8:配列が空の場合
図8:配列が空の場合

まとめ

 今回はJsRenderの機能の中から特に重要なものを選んで紹介しました。

 テンプレートの中でコンバーターを指定する方法を見てきました。コンバーターを使うとHTMLを安全に出力できます。

 また、テンプレートの中でパスや式を指定する方法や、条件分岐や列挙を指定する方法を見てきました。これらの構文を使うと、複雑なデータモデルからHTMLを出力できます。

 次回はJsRenderの高度な機能を紹介します。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:徹底解説JsRender/JsViews

著者プロフィール

  • WINGSプロジェクト やましぎ (ヤマシギ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5