WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： gucchi
カテゴリー： プログラム >JavaScript

今回はjQueryのライブラリを１つご紹介したいと思います。

PHPやPerlでプログラムを書いているとよく使うのがヒアドキュメント。
これってニーズが多い割には意外にもJavaScriptには正式な機能として含まれていないんですよね。。
なので面倒だけど

var str = “”;
str += “<li>”;
str += ” <h3>xxx</h3>”;
str += ” <p>xxxxx</p>”;
str += “</li>”;

みたいな書き方をすることはよくあると思います。

ちょっと裏技的には

var str = “<li>n
<h3>xxx</h3>n
<p>xxxxx</p>n
</li>”;

なんて書き方も出来るようですが、ちょっとスマートじゃないし、数行程度ならまだしも数十行以上となるとコードが見づらいし、記述ミスも多くなりがちです。

そこで何か良いものがないかと調べていたら良いものがありました。

jQuery Templates
https://github.com/BorisMoore/jquery-tmpl/

これだと以下のように書けます。

<script id="list_tmpl" type="text/x-jquery-tmpl">
  <li>
    <h3>${Name}</h3>
    <p>${Age}</p>
  </li>
</script>

 

すっきりしてますね。

 

 

 

実際にこれを使う際には以下のように記述します。

 

var tpl = [
  { Name: "taro", Age: "11" },
  { Name: "jiro", Age: "9" },
  { Name: "saburo", Age: "4" }
];
<script>$("#list_tmpl").tmpl(tpl).appendTo("#list")</script>
<ul id="list"></ul>

実行した結果は以下のような感じになります。

<ul id="list">
  <li>
    <h3>taro</h3>
    <p>11</p>
  </li>
  <li>
    <h3>jiro</h3>
    <p>9</p>
  </li>
  <li>
    <h3>saburo</h3>
    <p>4</p>
  </li>
</ul>

今回は割りとシンプルなHTMLをサンプルにしたのでメリットが分かりにくかったかもしれませんが、実際にWEBサイト構築をする際にはもっと複雑かつ大量のHTMLを扱うことが多いので、便利さをきっと実感できると思います。

それではまた。