JavaScript
Jade
ejs
pug

JavaScriptテンプレートエンジンのPug(Jade)とEJSの比較

PugEJSは、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

運用方法や課題等、参考になるかと思います。