Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
49
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@otsukayuhi

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

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

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
49
Help us understand the problem. What are the problem?