Javascriptのテンプレートエンジンを使ってみた

Webアプリを開発しているとjavascriptで動的にHTML要素（DOMと呼ぶ）を生成して値を埋め込んで表示させる、といったことがよくあります。

僕自身これを実装しようとしたときに今までjavascriptのコードの中でDOMを複製して利用したり、

1. "<option>" + name +"</option>"

のように直書きして結合するような書き方をすることもありました。

 

しかし、もっといい方法があるのではと思ったので今更なのですがjavascriptのテンプレートエンジンというものを使ってみました。

テンプレートエンジンは調べてみると色々とありますが、一番手軽そうだったので今回は「lodash.js」の使い方を紹介します。

 

セレクトボックスの項目を動的に表示させる例

1. [HTML]
2. <!-- CDNを読み込み -->
3. <script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
4.  
5. <!-- データ埋め込み先 -->
6. <select name="shop" id="shop_select">
7. </select>
8.  
9. <!-- 使用するテンプレート script type="text/template"とすることで表示されない -->
10. <script type="text/template" id="shop">
11.   <!-- 変数を埋め込みたい箇所は<%= %>で記述 -->
12.   <option value="<%= id %>"><%= name %></option>
13. </script>
14.  
15. [javascript]
16. <script>
17. // テンプレートを取り出してコンパイルする
18. var compile= _.template(document.getElementById('shop').innerHTML);
19. var html = "";
20. // 非同期でデータ取得
21. $.ajax({
22.   type: "get",
23.   url: "/getShopData",
24.   dataType: "json",
25.   data: {
26.       company_id:company_id,
27.   },
28. })
29. .then((response) => {
30.   $.each(response, function(index, value) {
31.     // コンパイルした結果の引数に連想配列でデータを渡す
32.     html += compile({
33.         id: index,
34.         name: value,
35.     });
36.   })
37.   // 埋め込み先を指定
38.   var output = document.getElementById('shop_select');
39.   output.innerHTML = html;
40. })
41. .fail((error) => {
42. });
43. </script>

 

上記は一例ですが、javascript側で一切DOMを書かなくて済むのでテンプレートエンジンを使わない場合と比べると格段に見やすくなったと思います。

変数を埋め込むところもPHPで使っているsmartyやbladeなどのテンプレートエンジンの書き方と似ているので個人的に使いやすいと感じました。

例には書いてないですがもちろんforやifも使えます。

ちょっと不便だな～、スマートなやり方がないかな～と思って調べてみると先駆者が便利なツールを作ってくれていたりするので今後も積極的に取り入れていこうと思いました。