Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

徹底解説JsRender/JsViews 第2回

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

 前回はJsRenderの概要と、基本的な使い方として、データモデルとテンプレートを組み合わせてテキストを生成する例を紹介しました。今回はJsRenderの機能の中から特に重要なものを紹介します。JsRenderを使ってHTMLを出力する例を紹介するとともに、ifを使った条件分岐やforを使った列挙などを紹介します。

目次

対象読者

  • JavaScriptテンプレートエンジンに興味のある方
  • JavaScript、jQueryの基本を理解している方

必要な環境と準備

 JsRenderとjQueryを以下のサイトからダウンロードしてください。詳しくは、前回を参照してください。

JsRenderでHTMLを出力する際の注意点

 前回は、JsRenderが出力したテキストをメッセージボックス内に表示しました。実際にJsRenderを使う際は、HTMLを出力し、それをHTMLページに表示することが多いでしょう。

 JsRenderでHTMLを出力するには、テンプレート内にHTMLタグを直接記述します。出力したHTMLを表示するには、jQueryのhtmlメソッドを用いてHTML要素と置き換えます。

 その際、JsRenderは{{:プロパティ名}}をプロパティの値にそのまま置き換えます。そのため、データモデルの値中にscriptタグが書かれていると、scriptタグがHTML中に書き込まれ実行されてしまいます。

リスト1 HTMLタグを含むテンプレート(JsRender2_sample1.html)
<!-- 1. テンプレートの定義 -->
<script id="itemTemplate" type="text/x-jsrender">
  <b>{{:name}}</b>の値段は<b>{{:price}}円</b>です。<br/>
  重さは<b>{{:weight}}グラム</b>です。<br/>
</script>

<!-- 2. HTMLを表示するdiv要素 -->
<div id="placeholder"></div>

<script type="text/javascript"><!--
  // 3. データモデルの定義
  var item = {
      name: "みかん<script>alert();</script>",
      price: 100,
      weight: 60
  };

  // 4. テンプレートを使ったテキストの生成
  var result = $("#itemTemplate").render(item);

  // 5. div要素の中身を入れ替える
  $("#placeholder").html(result);
//--></script>
  1. HTMLを出力するテンプレートを定義します。テンプレート内にHTMLタグを直接記述します。
  2. HTMLを表示するdiv要素を定義します。
  3. データモデルを定義します。nameプロパティの中にscriptタグが書かれていることに注意してください。
  4. JsRenderのrenderメソッドを呼び出し、HTMLを出力します。
  5. jQueryのhtmlメソッドを呼び出し、3で定義したdiv要素の中身を置き換えます。
リスト2 scriptタグを含んだデータモデルの出力結果
<b>みかん<script>alert();</script></b>の値段は<b>100円</b>です。<br/>
重さは<b>60グラム</b>です。<br/>
図1:scriptタグを含んだデータモデルの表示
図1:scriptタグを含んだデータモデルの表示

 このように、意図しないスクリプトを実行させることは、クロスサイトスクリプティングと呼ばれ、ページを書き換えられたり情報漏洩の原因になるなど、多くの問題を引き起こします。

 この問題を解決するためには、コンバーターを使ってプロパティの値を安全な形に変換してから出力します。

HTMLコンバーター

 {{:プロパティ名}}の代わりに{{html:プロパティ名}}と記述すると、JsRenderは値をHTMLエンコードしてから出力します。HTMLエンコードすると、<や>等のようにHTMLを記述するうえで特別な意味を持つ文字は、そうでない文字に変換されます。

 {{html:プロパティ名}}の代わりに{{>プロパティ名}}という表記も可能です。{{html:プロパティ名}}と{{>プロパティ名}}は同義です。

リスト3 HTMLコンバーターを使ったHTMLの出力(JsRender2_sample2.html)
<script id="itemTemplate" type="text/x-jsrender">
  <b>{{>name}}</b>の値段は<b>{{>price}}円</b>です。<br/>
  重さは<b>{{>weight}}グラム</b>です。<br/>
</script>
リスト4 HTMLコンバーターを使った出力結果
<b>みかん&lt;script&gt;alert();&lt;/script&gt;</b>の値段は<b>100円</b>です。<br/>
重さは<b>60グラム</b>です。<br/>
図2:HTMLコンバーターを使ったHTMLの表示
図2:HTMLコンバーターを使ったHTMLの表示

 この値を変換する機能をコンバーターと呼び、{{html:プロパティ名}}や{{>プロパティ名}}と記述することで、HTMLコンバーターを指定できます。

HTMLコンバーターが変換する文字
変換前 変換後
& &amp;
< &lt;
> &gt;
\x00 &#0;
' &#39;
" &#34;
` &#96;

 JsRenderには標準で3種類のコンバーターが備わっており、HTMLコンバーターの他に、属性コンバーターとURLコンバーターがあります。


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

著者プロフィール

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

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

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

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

バックナンバー

連載:徹底解説JsRender/JsViews
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5