Pug vs EJS

2018.10.4 @otsukayuhi

  • Pugとは？
  • EJS vs Pug
  • 使い分け
  • まとめ

Index

Pugとは？

Pugとは？

Pugは、JavaScriptのテンプレートエンジンです。

もともとJadeという名前でしたが、商標の問題でPugになりました。

拡張子は.pugです。

 

EJSも、JavaScriptのテンプレートエンジンです。

Pugの記法

Pugには閉じタグがありません。階層はインデントで表現します。

section#foo_01
    h2.title タイトル
    p.txet テキストテキスト
    img(src="./foo.jpg", alt="foo")
<section id="foo_01">
    <h2 class="title">タイトル</h2>
    <p class="text">テキストテキスト</p>
    <img src="./foo.jpg" alt="foo">
</section>

Pug

HTML

Pugの最大のメリットは、タグの閉じ忘れが絶対に無いこと！

（記述に間違いがあると、エラーでコンパイルが通らない）

Pug vs EJS

Pug vs EJS

Github star 17,302 2,830
npm weekly downloads 54,926 487,851

Github starはPugの方が多いですが、

npm weekly downloadsを見ると、EJSのほうが多いです。

人気度

Pug vs EJS

PugとEJSとで、変数のスコープが違う等はありますが、基本的にできることはそんなに違いません。

できること

In JavaScript ○ ○
includes ○ ○
block and extends ○ ×

block and extends

extendsでPugファイルを継承し、blockで部分的な上書きをすることができます。

layout.pug

top.pug

about.pug

header

footer

block

block

block

トップページ

アバウトページ

extends

extends

top.html

header

footer

トップページ

about.html

header

footer

アバウトページ

includes

includesは、こう。

header

footer

includes

top.html

header

footer

トップページ

about.html

header

footer

アバウトページ

top.pug

トップページ

header.pug

footer.pug

header

footer

about.pug

アバウトページ

header

footer

Pug vs EJS

In JavaScriptに焦点を当て、以下の内容をPugとEJSで比較してみましょう。

記法の比較

  • 変数・定数
  • 反復（ループ）
  • 条件分岐

変数・定数

変数・定数

- const text = "テキスト";

.foo
    p.foo_txt #{text}
<%_ const text = "テキスト" _%>

<div class="foo">
    <p class="foo_txt"><%= text %></p>
</div>

Pug

EJS

<div class="foo">
    <p class="foo_txt">テキスト</p>
</div>

HTML

反復（ループ）

反復（ループ）

- const array = ['aaa', 'bbb', 'ccc'];

ul
    each value in array
        li #{value}
<%_ const array = ['aaa', 'bbb', 'ccc'] _%>

<ul>
    <% array.forEach(function(value) { %>
    <li><%= value %></li>
    <% }); %>
</ul>

Pug

EJS

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

HTML

条件分岐

条件分岐

- const page = "top";

section
    if (page === "top")
        h1 トップページ
    else
        h1 下層ページ
<%_ const page = "top" _%>

<section>
    <%_ if (page === "top") { _%>
    <h1>トップページ</h1>
    <%_ } else { _%>
    <h1>下層ページ</h1>
    <%_ } _%>
</section>

Pug

EJS

<section>
    <h1>トップページ</h1>
</section>

HTML

複雑な処理になると、
Pugのほうが見やすくない？（と、ぼくは思う）

使い分け

Pug

  • （小〜）中大規模
    • 記述量が少ない
    • 効率よく書ける

EJS

  • 小中規模
    • 複雑な処理は書かない
    • HTMLで書かなければならない

使い分け

Pugは強力なツールだが、HTMLではないという一点が、唯一の弱点。

  • 学習コスト
    • Pug内でHTMLを書くことはできる
    • 他社では、ディレクターやデザイナーにPugで更新してもらっている実績もある。（昨年のCSS Nite情報）
      • 近々、レクチャーの機会を設けようと思います。
         
  • クライアントがHTMLを触る
    • 開発フェーズはPug、更新フェーズはHTMLとか
      • 開発効率と運用コストを天秤にかけて選択する必要がある

HTMLではない懸念

どちらかのみしか使わないのではなく、
プロジェクトに合った適切なものを選択しましょう！

まとめ

  • Pugは、EJSと同じJavaScriptのテンプレートエンジン
  • 閉じタグがなく、階層はインデントで表現
    • タグの閉じ忘れは絶対にない！
  • ESJとできることはそんなに変わらない
    • Pugのみの記法として、block and extendsがある
    • 複雑な処理が増えると、Pugの方が見やすい（大塚の意見）
  • 案件によって使い分けると良い

まとめ

おまけ

某HTMLメルマガのテーブルコーディングなHTMLファイルを、Pug化。

大塚の実例

内容

テキストやリンク、解析パラメータを、すべて定数や配列で管理し、大きな改修が無い限りは、HTMLを触らないようにした。

 

その結果。。。

大塚の実例

  • 約600行のテーブルコーディングHTMLファイルが、約200行まで減少
  • 作業時間が1時間から30分まで減少
  • テーブル要素のタグの閉じ忘れがなくなった
  • テキスト、リンク、解析パラメーターのズレや入れ忘れがなくなった
  • 定数や配列に、構成の内容をコピペするだけなので、チョー楽
  • 配列を増やすと項目が増えるので、チョーー楽
  • ファイルの複製がチョーーー楽

おまけ２

HTML to JADE/PUG
https://html2jade.org/

 

こちらのWebページで、HTMLをPugにリアルタイム変換できます。

普段書いているHTMLが、Pugだとどうなるのか？調べるのに便利です。


あと、mixinとか作るときも、

いちいちトランスパイルしなくていいので、便利です。

HTMLをPugに変換

Let's enjoy Pug life !!

Pug vs EJS

By Otsuka Yuhi

Made with Slides.com

Pug vs EJS

  • 1,403

More from Otsuka Yuhi