古いサイトのヘッダー改修で全ページを修正したり、微妙にことなる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)は繰り返しや属性などの書き方が若干
![PugでHTMLコーディングを効率化・メリットと使い方を知る](https://cdn-ak-scissors.b.st-hatena.com/image/square/fc6dea55ca15cb3831ea77302f76660582fa1ea9/height=288;version=1;width=512/https%3A%2F%2Fi.gyazo.com%2Fabfe37b04cc1e3d377fb29264c4a01d1.png)