最近、プロジェクトで使っているテンプレートエンジンの使い方について整理してみた。テンプレートエンジンと言っても色々なものがあるけど、今回はEJS（Embedded JavaScript）とPug（旧Jade）を中心に触れてみた。
EJSはシンプルで軽量なテンプレートエンジンだ。特に、HTMLとJavaScriptを簡単に埋め込んで動的なコンテンツを生成できる点が大きな特徴。特に、Node.jsと組み合わせて使うケースが多い。EJSは他のテンプレートエンジンと比べて比較的直感的に書ける点が気に入っている。<% %>でJavaScriptのコードを、<%= %>でその結果をHTMLに埋め込むだけで、動的なコンテンツが生成できる。
例えば、簡単にループや条件分岐が使えるので、forEachやif文を駆使する場面で便利だ。データがJSON形式で渡されているとき、<%= entry.title %>のように変数をそのまま表示するだけでHTMLが生成される。
“`
入会申込
ログイン<% entries.forEach(entry => { %>
<div class="entry">
<h3><%= entry.title %></h3>
<p><%= entry.description %></p>
</div>
<% }); %>
“`
EJSは、比較的シンプルなWebアプリケーションや、動的にHTMLを生成する用途に適している。特に、フロントエンドとバックエンドの間でデータをやり取りする場面で役立つ。
Pugは、EJSに比べてシンプルさを追求したテンプレートエンジンで、HTMLをほとんど書かずに済むという点が魅力だ。インデントベースで記述されるので、HTMLのタグを意識せずに書ける。その分、可読性が向上し、コードがすっきりしている。
“`
each entry in entries .entry h3= entry.title p= entry.description```
Pugのいいところは、HTMLが不要で、ほとんどの部分がインデントによって定義されるため、視覚的にとてもクリーンに見える点だ。特に、デザインがシンプルで、無駄なコードを減らしたいときに便利。
ただ、HTMLタグの構造が少し抽象化されているため、最初は少し慣れが必要かもしれない。特に、mixinを使ったコードの再利用は強力だけど、慣れないうちは少し迷うこともある。
EJSとPug、どちらを使うかはプロジェクトのニーズによって決まる。EJSは直感的でHTML構造がそのまま見えるため、慣れている人には扱いやすい。対して、Pugは構造的で読みやすく、コード量を減らせる反面、HTMLが一見するとわかりづらく感じるかもしれない。
EJSは、HTMLの構造をそのまま反映させたい場合や、JavaScriptのコードを多く使いたい場合に向いている。
Pugは、シンプルで効率的にHTMLを生成したい場合や、再利用可能なコードを書くことに注力したい場合に向いている。
結局、どのテンプレートエンジンを選ぶかはプロジェクトやチームのニーズに応じてだが、どちらも強力なツールだ。自分はプロジェクトの規模やデザインに合わせて、EJSとPugを使い分けることが多い。今後、さらなる最適化を目指して、これらのツールをもっと使い込んでいこうと思う。
