はじめにぼくはフロントエンドは本業ではありません。jsはあまり好きではありません。Ajax通信後にhtmlをアウトプットする際にjsの変数の中にhtmlを書いていくソースコードがもっと好きではありません。(後述)それをJSテンプレートエンジンを使ってシンプルにしてみたって話です。(JsRenderの使い方を書いたものではありません。Ajaxが嫌いだった理由Ajaxはユーザ体感的にはいいのだけれど、Ajaxの結果受け取ったjsonなどのデータを使ってhtmlを出力とかやるとソースコードが煩雑になるので嫌いだった。例としてAjaxで/xxxxxにリクエストを投げて、その結果(jsonデータ)を使ってhtmlを出力するものを考えると。'らーめんはやっぱり濃厚鶏そばです。'うどんはやっぱり釜揚げうどんです。},})jsの変数の中にhtmlが含まれる。jsの変数の中にhtmlが!!この規模ならまだいいが、もう少しhtmlが肥大化してくると最悪である。これがどうしても許せない。3.jsのテンプレートエンジンを使ってみた上の問題をなんとかできないかと思っていたところ、jsのテンプレートエンジンにいきついた。jsのテンプレートエンジンは多数あるのだが今回はJsRenderを採用し、ajaxを心地よく使うことができるようになった。jsテンプレートエンジンの選定について以下のまとめなど参考にするといいが、多数ある。qiita.com用途としては下記のような感じで選んだ。クライアントサイドで利用できる特にサーバサイドで使える必要はなかった簡単に利用できること。JsRenderを使えばここまでajaxがシンプルになったJsRenderを利用して先ほどのajax部分を書き直すと以下のようになる。<p>{{:text}}</p></div></script>何が素晴らしいって、ロジックの部分と、ビュー部分を綺麗に分離できたこと。いや、サーバサイドなら当たり前のようにやっていたことなんだけど、JsRenderを使えばクライアントサイドでも簡単に実装できて最高でした。Shopを使ったマイクロサービス体験のハンズオン「捉」2019年振り返り「LeanとDevOpsの科学」を読んで。