Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

otsukayuhi
ゆめみ所属のフロントエンドウェブデベロッパーです。藤子・F・不二雄先生を尊敬する、キーボードマニアでもあります。
https://otsukayuhi.app/
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした