くまだどうも、くまだ です。
CSSを楽に書くためのメタ言語、Sassがありますが、HTMLを楽に書くための言語も存在します。その一つがPug（パグ）です。
最近Web制作でPugを使ってコードを書いているのですが、実際使ってみて感じたメリット・デメリットを簡単に紹介していきたいと思います。
CSSを楽に書ける「Sass」については下記の記事をご覧ください。（Dart-Sass対応）
Pug（パグ）とは
テンプレートエンジンの一つで、かつてはJade（ジェード）（JavaScript Templates）と呼ばれていました。拡張子は「.pug」です。
GulpやWebpackなどを使って〇〇.pug→〇〇.html、みたいな感じでコンパイルして使用します。SassをコンパイルするとCSSになるような感じですね。
Pug（パグ）のメリット
Pugのメリットとして感じられたのは、以下です。（たぶん気づいてないだけでもっとあると思う）
- Sassのように、ファイルを分割管理することができる
- ひとつ修正すれば、それを使用しているタグすべて反映される
Sassは、ファイルを用途ごとに分割管理することができます。例えば、以下のように。
- _color.scss
- _font.scss
- _base.scss
- style.scss
これと同様に、HTMLもPugを使えば分割管理することができます。例えば、
- index.pug
- _header.pug
- _footer.pug
- _head.pug
みたいな感じです。こちらもincludeで使用することができます。下みたいな感じで書きます。
doctype html
html(lang="ja")
head
include _head.pug
body
div.container
//- header
include _header.pug
main
// ここにコンテンツが入る
//- footer
include _footer.pughead.pugやheader.pug、footer.pugもそれぞれあらかじめ書いておきます。例えばheader.pugに、以下のように書いておくとします。
// _header.pug
header.header
h1.header__title
上のやつをGulpやwebpackなどを使ってコンパイルすると、（footer.pugやhead.pugは省略！）下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
// headの中身が出力される
</head>
<body>
<div class="container">
<header class="header">
<h1 class="header__title">
</h1>
</header>
<main>
</main>
<footer class="foooter">
</footer>
</div>SassやCSSの場合、とあるclassのスタイルを変更すれば、そのclassを使っているところはすべて反映されるはずです。
ところがHTMLの場合はPugを使っていないと、一つの共通パーツのhtml構造を変更したとしても（例えば、headerやfooter、buttonなどのhtml構造）、同じパーツを使っている他のhtml構造は書き換えが起こりません。なので、その場合は変更したHTMLをいちいちコピーして、該当の箇所に貼り付けするなどして対応しなければなりません。
ここでPugを使うと、例えばheader.pugのファイルひとつだけ変更すれば、その他のファイルすべて（上の例だと、include _header.pugが使用されているところ）に変更が反映されます。
複数ページがある場合はめちゃくちゃ便利です。
Pug（パグ）のデメリット
Pugをつかって感じたデメリットは以下です。
- 導入まで時間がかかる
- 慣れるまで時間かかる
- ファイルが増えてくると管理が大変
上で述べたように、GulpやWebpackなど使って環境構築しないと使えないので、そこまでいくのに時間がかかります。導入したら今度は、Pugに慣れないとなりません。
Pugは閉じタグがないので、普段みているHTMLに慣れている我々からすると、違和感を覚えることでしょう。
そして分割管理できることはメリットでもありますが、何事もメリットなところは裏を返せばデメリットにもなります。Sassでも分割管理するとファイルの数はなかなかの数になりますが、そこにPugも分割管理したとするとめちゃめちゃファイル数が多くなります。どこになにがあるか把握するのに大変かもしれません。
慣れるまで大変だが、慣れれば爆速にコードが書ける、かも
個人的にSassになれるまで大変で、それに慣れたらcssを書くのが億劫になりました。それと同様に、Pugに慣れれば、最初は大変でもだんだんHTMLを書くのが面倒に感じるようになるんだろうな～と感覚的に思っています。
まあ、なんでも試してみないと便利かそうでないかが分からないし、使いどころを間違えなければめちゃくちゃ使えると思います。
Pugに慣れたら、次はEJSやります。
ここまで読んでくださりありがとうございました。