こんにちわ！WEBチームの面倒くさがり屋、阿部です。
今回はホームページ作る際のHTMLを書くのを楽にしてくれるらしいpugを試してみました。

pugはHTMLテンプレートエンジンの一種です。
HTMLテンプレートエンジンを使うメリットは何でしょう？
・少ない記述でHTMLが書ける
・ヘッダーやフッターなど部品をインクルードできる
・変数やIF文が使える

pugをブラウザに直接読み込んでもブラウザは理解してくれないため、pugをhtmlに変換（コンパイル）が必要です。
いくつかのコンパイラーがあるのですが、今回はVue CLIで試してみます。

Vue CLIのインストール方法についてはたくさん記事があるのでそちらを参考してください。
簡単に説明しますとnode.jsをインストールしてからVue CLIをインストールします。

インストールできたらコンソールやコマンドプロンプトで以下のコマンドを打ちます。

vue ui

localhost:8000でVue CLIが起動しますのでプロジェクトを作成し
vue-cli-plugin-pugをインストールします。

タスクを実行しますとlocalhost:8080でプロジェクトが稼働します。
ホットリロードが効いてますのでリロードしなくてもページが更新されます。

vueのtemplateを更新していきます。
templateのlangをpugにします。

<template lang="pug">

</template>

headerを書いてみます。
改行してインデントすると入れ子になります。

//記述コード
  header#header
    h1#sitname サイトの名前

//出力されるコード
<header id="header">
<h1 id="sitname">サイトの名前</h1>
</header>

サイトの名前を変数にしてみます。

//記述コード
- const sitename = "サイトの名前"
  header#header
    h1#sitname #{sitename}

//出力されるコード
<header id="header">
<h1 id="sitname">サイトの名前</h1>
</header>

改行は

//記述コード
  p.txt テキスト
      br
      | テキスト
//出力されるコード
<p class="txt">テキスト<br>テキスト</p>

リンク付きのリストを書いてみます。
アンカーリンクタグにidを振ってみます。

//記述コード
ul.list
  li
    a(href="#" id="aaa")
  li
    a(href="#") リスト2
  li
    a(href="#") リスト3

//出力されるコード
<ul class="list">
<li><a href="#" id="aaa">リスト1</a></li>
<li><a href="#">リスト2</a></li>
<li><a href="#">リスト3</a></li>
</ul>

配列を使ってリストを生成してみる

//記述コード
- var list = ["リスト1", "リスト2", "リスト3"]
ul
  each item in list
    li= item

//出力されるコード
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

IF文を使ってみる

//記述コード
- var user = "abe"
#user
if "abe"
  p 阿部です
else if "sato"
  p 佐藤です
else
  p だれですか？

//出力されるコード
<p>阿部です</p>

まとめ

使ってみたのは一部の機能ですが、少ない記述でHTMLを生成できるのは面白いです。
しかし普段Emmet記法で入力しているため、入力文字数としてはあまり変わらないかなとも思いました。
HTMLよりは見通しの良いのでpugでデータを残しておくのもなよいかなと思いました。
今回、インクルードなどは試していませんが、そちらがHTMLテンプレートエンジンの本領かと思います。シングルページアプリケーションやバックエンドが不要なサイトを作る場合には良いかもしれません。
HTMLテンプレートエンジンには他にもNunjucks、EJSなどがあるようなので、そちらもいつか試してみたいと思います。