今回はHTMLを効率的に書くためのテンプレートエンジン、Pugについてご紹介させていただきます。
以前業務で使用しましたが、通常のHTMLで記述するより可読性が良く、個人的にすごく好印象です。
Pugを使用した時に感じた、メリット、デメリットについて記載しています。
ちなみに、Pugはそのまま記述してもブラウザに認識されないため、別途コンパイルする必要があります。
こちらについて、今回は割愛させていただきます。
ちなみに読み方は見た通り、「パグ」です。
パグ可愛いですよね。お耳がきくらげみたいです。
実家のお隣の家にパグがおりまして、学生時代に遊んだ記憶があります。
Pugって何？
PugはHTMLを簡潔に書くためのテンプレートエンジンです。
Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.
以前は「Jade（ジェイド）」という名前で呼ばれていたそうです。
PugからHTMLへの変換は必須ですが、前述の通り今回は割愛させていただきます。
Pugを使用するメリット・デメリット
次にPugを使用するメリット・デメリットをご紹介します。
もし仕様を検討されている方はご参考までに！
メリット①：タグの記述が不要
通常のHTMLであれば開始タグと閉じタグを記述する必要がありますが、Pugは閉じタグの記述が不要です。
そのため、記述量の減少・可読性の向上（個人差あり）と嬉しい要素が詰まっています。
後に記載していますが、Pugでの入れ子はインデントで管理しているため注意が必要です。
h1#title1 タイトル
main.main
h2 サブタイトル
p テキスト
ul
li リスト①
li リスト②<h1 id="title1">タイトル</h1>
<main class="main">
<h2>サブタイトル</h2>
<p>テキスト</p>
<ul>
<li>リスト①</li>
<li>リスト②</li>
</ul>
</main>メリット②：cssとの連携が簡単
小さなことですが、個人的には良いと思いました。
通常のHTMLであればと指定する必要がありました。
Pugの場合は上記の指定が不要でcssと同じように、classの場合はドット（.）
idの場合はシャープ（#）をタグの次に記述することで指定できます。
また、単純に記述量が減るのもメリットと感じています。
p#title タグにidを指定します
p.text1 タグにclassを指定します
p#subTitle.text2 タグにidとクラスを指定しますメリット③：分岐の書き方が簡単
これは便利というか、個人的に関心したことになります。 HTML内での分岐は言語によって、変わってくると思います。 ですが、Pugはif文をそのまま書いて大丈夫でした。
if result > 80
p 合格です
else
p 不合格ですデメリット①：インデント管理で苦労した
Pug初見だった方はつまずいた経験があるのではないでしょうか。
divや入れ子が省略できる分、インデントがその役割を担っています。
インデントがずれると要素が分かれてしまうため、
レイアウトが崩れたりcssがうまく反映されなかったりします。
私もこれにハマってしまい、最初の方は苦労しました。
デメリット②：導入に時間がかかる
今回割愛させていただきましたが、別途コンパイルが必要なため、
GulpやWebpackなど使って環境構築をする必要があります。
さらに、記述方法も通常のHTMLと違うため、Pugの書き方に慣れていく必要があります。
閉じタグやdivが無いので、最初はとても違和感があると思います。
※ちなみに私は、違和感より関心の気持ちが上回りました
さいごに
Reactを使用されている方は馴染みが無いと思いますが、
タグを記述する必要が無い分スッキリ記述できて好印象でした。
通常のHTMLと違うため最初の方は違和感があると思いますが、慣れてくると使用感が良くなると思います。
使ったことのない方は、新鮮な気持ちを味わえますのでぜひお試しください！
今回紹介できていないことがたくさんありますので、気になる方は公式サイトをチェックしてみてください！
