SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

徹底解説JsRender/JsViews

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

徹底解説JsRender/JsViews 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

条件分岐

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

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の高度な機能を紹介します。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
徹底解説JsRender/JsViews連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7384 2013/09/20 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング