Pug テンプレートエンジン

以下では、Node.js環境でHTMLテンプレートを簡潔に記述・出力できるPug（旧Jade）について、概要から導入・活用までを解説します。

1. Pugとは？

Pug はインデントベースのテンプレートエンジンで、HTMLをよりシンプルな構文で記述できます。
もともとは「Jade」という名前でしたが、商標の関係で2016年に「Pug」に改名されました。
Node.js プロジェクト（特に Express.js）と相性が良く、サーバーサイドで動的にHTMLを生成する際によく利用されます。

2. 主な特徴

インデントによる階層構造
タグの入れ子はインデント（スペース／タブ）で表現。HTMLの閉じタグが不要になります。
シンタックスの省力化
- <div class="foo" id="bar"> → .foo#bar
- 属性値も丸括弧とカンマで簡潔に記述
変数埋め込み・式評価
- #{変数} で HTML 要素内に展開
- - var x = 3 * 5 のようにテンプレート内部で JavaScript が実行可能
条件分岐・ループ制御 if user.isAdmin p 管理者ページへようこそ else p ユーザーとしてログイン中 each item in items li= item.name
ミックスイン（mixin）
再利用可能なテンプレート片を定義し、パラメータ付きで呼び出せます。
テンプレート継承（extends／block）
レイアウトと部分テンプレートを分けて構築し、共通のヘッダー／フッターを管理できます。

3. インストール

# グローバルに CLI を入れる場合
npm install -g pug-cli

# プロジェクトに組み込む場合
npm install pug --save

CLI：.pug ファイルをコマンドラインで HTML にコンパイル
ライブラリ：Node.js のコード内／Express から直接レンダリング

4. 基本的な使い方

4.1 シンプルな Pug ファイル

//- views/index.pug
doctype html
html(lang="ja")
  head
    title= pageTitle
  body
    h1 Pug テンプレートの例
    p ようこそ、#{user.name} さん！

4.2 コマンドラインでのコンパイル

pug views/index.pug --pretty --out public

--pretty オプションでインデント付きの可読 HTML を出力
結果は public/index.html に生成されます

5. Express への組み込み

const express = require('express');
const app = express();

// テンプレートエンジンに Pug を設定
app.set('view engine', 'pug');
app.set('views', './views');

app.get('/', (req, res) => {
  res.render('index', {
    pageTitle: 'ホーム',
    user: { name: '河合' }
  });
});

app.listen(3000, () => {
  console.log('http://localhost:3000 で起動中');
});

views ディレクトリ以下の *.pug を自動的に探してレンダリング

6. 高度な機能

6.1 Mixins（ミックスイン）

//- mixins.pug
mixin button(text, link)
  a.btn(href=link)= text

//- index.pug
include mixins.pug

+button('詳細を見る', '/details')
+button('お問い合わせ', '/contact')

6.2 テンプレート継承

//- layout.pug
doctype html
html
  head
    title MyApp - block title
  body
    header
      h1 MyApp Header
    block content
    footer
      p © 2025 MyApp

//- page.pug
extends layout.pug

block title
  | トップページ

block content
  p ここが本文エリアです。

7. 他のテンプレートエンジンとの比較

特徴	Pug	EJS	Handlebars
記述の簡潔さ	★★★★☆（インデント型）	★★☆☆☆（HTML＋埋め込み）	★★☆☆☆（Mustache型）
学習コスト	中	低	低
ロジック記述	◎（JSコード挿入可）	○	△（ロジック制限あり）
レイアウト管理	◎（extends／block）	△（includeのみ）	◎（partial）

Pug は記述の簡潔さとテンプレート機能に優れる一方、インデントに敏感なので慣れが必要です。

8. 注意点・ベストプラクティス

インデント（スペース数）をプロジェクトで統一する
複雑すぎるロジックはテンプレート上ではなく、コントローラ側で処理
--pretty を本番環境で有効にするとファイルサイズが増えるため、ビルド時にオフにする

Pug を導入することで、HTML マークアップをより読みやすく・保守しやすく記述できます。特に大規模なビュー構造を持つウェブアプリケーションでは、テンプレート継承やミックスインが強力な武器となります。ぜひ一度試してみてください。

チュートリアル

Pugテンプレートエンジンを使ったチュートリアルを作成しました。

GitHub – kkawailab/Pug_Tutorial

Contribute to kkawailab/Pug_Tutorial development by creating an account on GitHub.