Web制作やフロントエンド開発をしていると、**「HTMLの閉じタグ（</div>）を書くのが面倒」「インデントがズレて構造がわからなくなった」**という悩みはありませんか？
そんな悩みを解決してくれるのが、HTMLテンプレートエンジン**「Pug（パグ）」**です。今回は、一度使うと普通のHTMLには戻れなくなる、Pugの魅力と基本をご紹介します。
Pugとは？
Pugは、HTMLをよりシンプルに、効率的に書くための言語です。
もともとは「Jade」という名前でしたが、現在は「Pug」として親しまれています。Node.js環境で動作し、コンパイル（変換）することで、ブラウザが読み込める普通のHTMLを出力します。
Pugのここがすごい！3つのメリット
1. 閉じタグがいらない
HTMLの基本である < > や閉じタグが必要ありません。**「インデント（字下げ）」**が親子関係を決定するため、コードが圧倒的に短く、見た目もスッキリします。
2. JavaScriptの力が使える
HTMLの中で「変数」を使ったり、「繰り返し処理（for文）」を使ったりできます。例えば、同じようなリストを10個作るのも、数行書くだけで完了します。
3. 外部ファイルの共通化（Include）
ヘッダーやフッターなど、全ページ共通のパーツを別ファイルに切り分けて管理できます。修正が必要なときも、1つのファイルを直すだけで全ページに反映されるので、メンテナンス性が劇的に向上します。
実際のコードを比較してみよう
例えば、クラス付きの section の中にタイトルとテキストがある場合、これだけ差が出ます。
【普通のHTML】
HTML
<section class="container">
<h1 class="title">こんにちは、Pug！</h1>
<p>HTMLを効率的に書くことができます。</p>
</section>
【Pugの場合】
コード スニペット
section.container
h1.title こんにちは、Pug！
p HTMLを効率的に書くことができます。
驚くほど短くなりましたよね？
.container のように、CSSセレクタと同じ感覚でクラス名を指定できるのも直感的で嬉しいポイントです。
まとめ：Pugはこんな人におすすめ
- タイピング量を減らして、開発スピードを上げたい人
- HTMLの構造（ネスト）を視覚的にきれいに保ちたい人
- Node.jsを使ったモダンな制作環境に挑戦したい人
Pugを導入するには、VSCodeの拡張機能や、gulp、webpackなどのツールが必要ですが、その手間に見合うだけの爆速体験が待っています。
