ほんの数年前まではHTMLは直接書くしか方法がなかった。
共通ブロックの修正があると悲惨だった。
それらを解消するためにPHPなどのサーバサイド言語やJS、あるいはSSIなどを使ったりして管理したりしていた。

HTMLタグを直接書いていた頃は閉じタグの抜けや、入れ子構造がおかしくなっていないかという確認も必要だった。

これは苦行だった。

そして数年前に出会ったのはHAML。
Rubyベースで作られたテンプレートは閉じタグを必要とせず、インデントで入れ子を表現できる素晴らしいテンプレートエンジンだった。

ただ、複雑なことを行おうとすると破綻したりして、すぐに使わなくなった。

その後、Pug(当時はJade)に出会ったことで制作効率は一変。
Node.jsベースのこのテンプレートエンジンは、HAMLのようにインデントで入れ子を表現出来るので閉じタグの位置を気にしなくてもいいし、Pugで用意されたメソッド以外にもSassのようにMixinを作ることもできるだけでなく、JavaScriptの利用やJSONなどを使いあらかじめグローバル変数として使いまわせると言った事ができる素晴らしいエンジン。

Pugを使うともうHTMLタグを直接書くなんて煩わしい！

プログラムをやったことがある人は、「同じことを繰り返し書かない」と言われたことがあるでしょう。
プログラムであれば関数化するなどして、呼び出せばいいけどHTMLだとそういうことはできないので気持ち悪い。
Pugであれば、ブロックごとにファイルを分けてincludeすればいいし、変数渡して動的に処理をすればいい。

コンパイルすればきちんとHTMLタグで生成されるので問題ない。
そして、閉じタグ忘れとか入れ子構造のチェックなどから開放されます。

まだHTMLタグを頑張って書いている人に言いたい。
Pugを使えば自分の世界は変わると。
そして今後のウェブサイト制作においてこういったテンプレートエンジンやaltCSSなどは必須であり、自動化出来るところは自動化してUXなどに力を入れる事が重要になってきます。

メリット

Pugを使うとどんなメリットがあるのか？

• 全ページ共通箇所はベーステンプレートを作っておきextendすればいい。
• 設計次第だけど、HTML構文をブロック単位までファイルやMixinに分けることが出来る。
• 別に作ったファイルを差し込みたい時はincludeすればいい。
• データを用意しておき、eachなどで回せば変更があっても容易。
• JavaScriptを書くことが出来るので拡張が楽。
• if文などで処理を分けられる。
• 変数が使える。ページをまたぐグローバル変数を作ることも可能。
• コンパイル時にソースコードをminify化することも可能。
• ファイルを修正して再コンパイルすれば一度の修正で呼び出している箇所全て反映されるので管理が楽。

デメリット

もちろんデメリットもある。

• 考えて設計する必要がある(設計するのは当たり前だが)。
• 吐き出されたHTMLを見なくなる。
• 最初に共通で作った箇所を後々仕様変更で、例外的にあるときだけは別のタグ構成にしたいとかあると死にたくなる(変数フラグ作って分ければいいけど)。

個人的にはデメリットよりメリットのほうが大きすぎて使わない理由がない。

Pugの基本的な書き方

実際にPugを使うとどうなるのか。
Pugの詳しい事やドキュメントは公式サイトを参照するとよいです。

Pugを簡単に試してみたい人はCodepenで書くことができます。
ただし、変数とかロジックは使えませんが。

CSSと同じでIDの場合は#foobar、クラスは.foobarと書きます。
変数を使いたい場合はJavaScriptと同じで- var hoge = 'ほにゃらら'で使えます。
変数を展開したい場合はいくつかの方法があります。

- var hoge = 'ほにゃらら'
p= hoge  //- & => &
p #{hoge}
p!= hoge
p !{hoge}

上の二つはエスケープして展開してくれます。
!はエスケープせずにそのまま展開します。

他にも色々便利な使い方ありますが、リファレンスはそのうち書きます。

ちなみにHTML内でPHPを書く必要がある(WordPressとかもそうだね)場合や、MustacheやHandlebarsのテンプレートもPugのコンパイルを拡張して書いてるよ。
もう閉じタグなんて気にしたくないからね！