【初心者向け】HTMLテンプレートのPugを使ったら作業効率が上がった話

はじめに

Web歴1年半の僕がPugを始めたらHTMLを書くのが10倍楽になったので記録として残します。

使った経緯

新卒のHTML&CSS研修中、LPを何個か作っていました。
3個目に差し掛かった辺りから、「あ〜、なんか飽きてきたな」と思い始め、楽な方法を探しました。
そこでPugを見つけました。

Pugってなに？

PugはHTMLを簡単に書くためのテンプレートエンジンで、CSSでいうSassのようなものです。
PugはNode.jsで動いており、一部書き方がJavaScriptっぽいところがあります。

別の言い方をするとHTMLの拡張言語といったところでしょうか。
CSSでいうSassという例えが僕は一番しっくりきます。

メリット

閉じタグ忘れがなくなる

HTMLでは開きタグと同時に閉じタグも必要になります。
今まではタグを変更するときに閉じタグも一緒に変更するのが少し面倒でした。
HTMLを書いたことがある人ならば一度は思ったことがあるのではないでしょうか。

JavaScriptライクな書き方

他の言語同様、繰り返しや分岐処理が可能。

保守性が高い

HTMLのページや要素を追加する場合なども予め変数で用意しておけば追加するだけで他をいじる必要がない。

どんな感じ

index.pug

-
  var pages = [
    {
      name: "TOP",
      url: "./index.html"
    },
    {
      name: "MEMBERS",
      url: "./members.html"
    },
    {
      name: "COMPANY",
      url: "./company.html"
    },
    {
      name: "CONTACT",
      url: "./contact.html"
    }
  ]

header.l-header
  div.p-header
    div.p-header__inner
      h1.p-heder__logo
        a(href="index.html") HUMANS
      button.p-header__hamburger(aria-label="メニュー" type="button")
        span
        span
        span
      nav.p-header__globalNav
        ul.p-header__globalNav__list
          each page in pages
            li.p-header__globalNav__item
              a(href=page.url) #{page.name}

↓こんな書き方をすると...

index.html

<header class="l-header">
  <div class="p-header">
    <h1 class="p-header__logo"><a href="index.html">HUMANS</a></h1>
    <button class="p-header__hamburger" aria-label="メニュー" type="button"><span></span><span></span><span></span></button>
    <nav class="p-header__globalNav">
      <ul class="p-header__globalNav__list">
        <li class="p-header__globalNav__item"><a href="./index.html">TOP</a></li>
        <li class="p-header__globalNav__item"><a href="./members.html">MEMBERS</a></li>
        <li class="p-header__globalNav__item"><a href="./company.html">COMPANY</a></li>
        <li class="p-header__globalNav__item"><a href="./contact.html">CONTACT</a></li>
      </ul>
    </nav>
  </div>
</header>

こうなります！

書き方はHTMLと多少違うという点で覚えることはありますが、慣れてくるとかなり速いスピードでかけるようになります。

ちなみにPugはVueのテンプレートタグでも使用できます。ありがたい。

終わりに

今回はマークアップの部分を効率的にかけるようになりましたが、こういった考えは日々持つべきだなぁと改めて感じました。
プログラマの三大美徳にもある「怠慢」を体現したように感じました。

その他の美徳に関してはコチラを参照

参考文献:
- HTMLを超簡単に書けるPugとやらをまとめてみました！
- PugでHTMLコーディングを効率化・メリットと使い方を知る