Goldstine研究所

mosuke5's tech blog

ブログ移転しました。5秒後にリダイレクトします。

Ajaxの嫌いだった部分をJsRenderで心地良くした

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を心地よく使うことができるようになった。

JsRender/JsViews

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を使えばクライアントサイドでも簡単に実装できて最高でした。

以上。