1. はじめに
ぼくはフロントエンドは本業ではありません。
jsはあまり好きではありません。
そしてAjax通信後にhtmlをアウトプットする際にjsの変数の中にhtmlを書いていくソースコードがもっと好きではありません。(後述)
それをJSテンプレートエンジンを使ってシンプルにしてみたって話です。
（JsRenderの使い方を書いたものではありません。）
2. Ajaxが嫌いだった理由
Ajaxはユーザ体感的にはいいのだけれど、
Ajaxの結果受け取ったjsonなどのデータを使ってhtmlを出力とかやるとソースコードが煩雑になるので嫌いだった。
例としてAjaxで/xxxxxにリクエストを投げて、その結果(jsonデータ)を使ってhtmlを出力するものを考えると。
/* jsonデータは下記が返ってくるとする
[
{
id: '1',
name: 'らーめん',
text: 'らーめんはやっぱり濃厚鶏そばです。'
},
{
id: '2',
name: 'うどん',
text: 'うどんはやっぱり釜揚げうどんです。'
}
]
*/
$.ajax({
type: "GET",
url: "/xxxxx",
dataType: "json",
success: function(data){
var html = '';
data.forEach(function (e) {
html += '<div id="' + e.id + '">';
html += '<h1>' + e.name + '</h1>';
html += '<p>' + e.text + '</p>';
html += '</div>';
});
$("#result").append(html);
},
})
jsの変数の中にhtmlが含まれる。
そう、jsの変数の中にhtmlが！！
この規模ならまだいいが、もう少しhtmlが肥大化してくると最悪である。
これがどうしても許せない。
3.jsのテンプレートエンジンを使ってみた
上の問題をなんとかできないかと思っていたところ、jsのテンプレートエンジンにいきついた。
jsのテンプレートエンジンは多数あるのだが今回はJsRenderを採用し、ajaxを心地よく使うことができるようになった。
3-1. jsテンプレートエンジンの選定について
以下のまとめなど参考にするといいが、多数ある。 qiita.com
用途としては下記のような感じで選んだ。
- クライアントサイドで利用できる
- 特にサーバサイドで使える必要はなかった
- 簡単に利用できること。学習コストが低そうなこと
- for文やif文はつかえること
- プレコンパイルとかは必要なかった
3-2. JsRenderを使えばここまでajaxがシンプルになった
JsRenderを利用して先ほどのajax部分を書き直すと以下のようになる。
js側
$.ajax({
type: "GET",
url: "/xxxxx",
dataType: "json",
success: function(data){
var template = $.templates("#result-template"); // テンプレートを指定
var htmlOutput = template.render(data); //テンプレート内に変数展開
$("#result").html(htmlOutput); //出力
},
})
html側
<div id="result"></div>
<script id="result-template" type="text/x-jsrender">
<div id="{{:id}}">
<h1>{{:name}}</h1>
<p>{{:text}}</p>
</div>
</script>
何が素晴らしいって、ロジックの部分と、ビュー部分を綺麗に分離できたこと。
いや、サーバサイドなら当たり前のようにやっていたことなんだけど、
JsRenderを使えばクライアントサイドでも簡単に実装できて最高でした。
以上。
