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

gucchi

2013/10/03

JavaScriptでヒアドキュメント

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

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

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を扱うことが多いので、便利さをきっと実感できると思います。

それではまた。

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

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

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ