富山のホームページ製作会社・グリーク スタッフブログ - ブログ -
  1. グリークトップ
  2. HTML
  3. ブログ

意外と知られていないJavascriptのテンプレートエンジン10選

jquery-logo

いつの間にやら前の記事から早2ヶ月。

最近ブログをサボり気味のプログラマーのみなとです。

突然ですが、WEBサイトでもシステム制作でもいわゆるロジックの分割というのは、作業の効率化を進める上で重要になります。

 

WEBシステム制作でいえば、デザイン面(HTML)とシステム部分(PHPやJava)の作業分割にはテンプレートエンジンが使われますが、

今回は意外と知られていないJavascriptの便利なテンプレートエンジンをご紹介いたします。

 

jQueryベースの高機能テンプレートエンジン「jQuery Templates」

Javascriptのプラグインとして有名なjQueryの公式テンプレートエンジンです。

いつもjQueryにお世話になっている僕としてはとても馴染み深いプラグイン。

 

ダウンロードはGitHubから行えます。画面右側の「Download ZIP」をクリックするとダウンロードすることができます。

※それにしてもGitHubのダウンロードボタンはわかりずらい・・・

使い方

ダウンロードしたファイルから「jquery.js」と「jquery.tmpl.js」を読み込みます。

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.tmpl.js"></script>

JS側にて下記のように埋め込むデータを用意してあげます。JSONやXML、Javascriptオブジェクトもいけるみたいです。

var data = [
	{ name: "山田", kana: "Yamada" },
	{ name: "田中", kana: "Tanaka" }
];

出力するテンプレートを準備させます。

var markup = "</pre>
<div>${name} (${kana})</div>
<pre>
";

${キー値}で指定した位置に「data」配列の変数が入る仕組みです。
あとは、テンプレートをjQuery Templateにセットしてあげ、(第一引数に任意のテンプレート名)

$.template( "Template", markup );

テンプレートを反映したHTMLを取得し、任意の位置にappendしてあげるだけです。

$.tmpl( "Template", data ).appendTo( "#List");

また、元となるテンプレートをHTMLに直接埋め込む方法としては、
下記のようなやり方もありますので、使い方は様様。

<div id="List"></div>
<script id="Template" type="text/x-jquery-tmpl">// <![CDATA[
<div>${name} (${kana})</div>
// ]]></script>
 $( "#Template").tmpl(data).appendTo("#List");

その他のオススメテンプレートエンジン

handlebars.js

使い方はほぼjQuery Templateと同じですが、簡単なif文やforeach文なんかもかけちゃう優れもの。
ダウンロードはこちらから
マニュアルもわかりやすく、多機能な為コチラのほうが実はオススメです。

JsRender.js

これまた有名なテンプレートエンジンですが、正直つかったことはありません。
jQueryなどのほかプラグインがいらない単体で動くテンプレートエンジン。

使い方はほぼ一緒のようですが、for文も使えるようで機会があれば触ってみたいと思います。

あまり馴染みのないJavascriptでのテンプレートエンジンをご紹介いたしましたが、

かなり便利なので、興味がある方はぜひ使ってみて下さいね。

この記事を書いたスタッフ