PugとEJSは、JavaScriptのテンプレートエンジンです。
Pugは、もともとJadeという名前でしたが、商標の問題でPugになりました。
EJSのマークアップ記法
HTMLと同じです。
Pugのマークアップ記法
Pugには、閉じタグがありません。
階層はインデントで表現します。
Pug
section#foo_01
h2.title タイトル
p.txet テキストテキスト
img(src="./foo.jpg", alt="foo")
HTML
<section id="foo_01">
<h2 class="title">タイトル</h2>
<p class="text">テキストテキスト</p>
<img src="./foo.jpg" alt="foo">
</section>
Pug vs EJS
PugとEJSとで、変数の扱い等若干違うところがありますが、基本的にできることはそんなに違いません。
いくつか例を見てみましょう。
変数・定数
Pug
- const text = "テキスト";
.foo
p.foo_txt #{text}
EJS
<%_ const text = "テキスト" _%>
<div class="foo">
<p class="foo_txt"><%= text %></p>
</div>
HTML
<div class="foo">
<p class="foo_txt">テキスト</p>
</div>
反復
Pug
- const array = ['aaa', 'bbb', 'ccc'];
ul
each value in array
li.value
EJS
<%_ const array = ['aaa', 'bbb', 'ccc'] _%>
<ul>
<% array.forEach(function(value) { %>
<li><%= value %></li>
<% }); %>
</ul>
HTML
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
条件分岐
Pug
- const page = "top";
section
if(page === top)
h1 トップページ
else
h1 下層ページ
EJS
<%_ const page = "top" _%>
<section>
<%_ if (page === "top") { _%>
<h1>トップページ</h1>
<%_ } else { _%>
<h1>下層ページ</h1>
<%_ } _%>
</section>
HTML
<section>
<h1>トップページ</h1>
</section>
複雑な処理をしようとすると、Pugの方が見やすい（と、ぼくは思う）
より詳しい記法は、それぞれの公式ページをご確認ください。
Pug: https://pugjs.org/
EJS: http://ejs.co/
Pugのみの記法
extendsでPugファイルを継承し、blockで部分的な上書きをすることができます。
layout.pug
doctype html
html
head
block title
body
block content
top.pug
extends layout.pug
block title
title トップページ
block content
h1 トップページ
p トップのテキスト
about.pug
extends layout.pug
block title
title アバウトページ
block content
h1 アバウトページ
p アバウトのテキスト
トランスパイルされるHTMLは、以下のようになります。
top.html
<!DOCTYPE html>
<html>
<head>
<title>トップページ</title>
</head>
<body>
<h1>トップページ</h1>
<p>トップのテキスト</p>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<title>アバウトページ</title>
</head>
<body>
<h1>アバウトページ</h1>
<p>アバウトのテキスト</p>
</body>
</html>
より詳しくは、公式ページをご確認ください。
Pug: テンプレートの継承
EJSでも同じようなことができるみたいですが、Pugより複雑な処理になります。
おすすめの使い分け
PugとEJSは、どちらが優れているというわけではなく、プロジェクトによって使い分けることが賢い選択可だと思います。
個人的な意見になってしまいますが、以下のような使い分けがおすすめです。
Pug
- （小〜）中大規模
- 記述量が少ない
- 効率よく書きたい
EJS
- 小中規模
- 複雑な処理は書かない
- HTMLで書かなければならない
おまけ
CSS Nite Coder’s High 2017 で、Pugのセッションがありました。
http://cssnite.jp/archives/post_2962.html
運用方法や課題等、参考になるかと思います。