古いサイトのヘッダー改修で全ページを修正したり、微妙にことなるHTMLを繰り返し大量に書いたり(エディタがどんどん重くなる)、閉じタグ忘れを血眼になって探したことはないだろうか。 EmmetとSassでコーディングはかなり楽になったけれど、僕の作業を一番効率化してくれたのは、同時期に覚えたPugという技術だった。ここでは、Pugの概要とメリットを簡単に紹介したい。 Getting Started – Pug PugとはPug(パグ)は、HTMLを効率的に書くためのテンプレートエンジン。使い方はCSSで言うSassみたいなもの。拡張子 .pug のファイルを書いてHTMLに変換する。 もともとはJade(ジェード)という名前で開発されていたものの、商標の関係で2016年あたりにPugとして再リリースされた。新しいPug(2018年3月12日現在v2.0.1)は繰り返しや属性などの書き方が若干