効率的にHTMLを生成できるPugの特徴や記述方法

Pug(パグ)はHTMLを生成するためのテンプレートエンジンで、ものすごくざっくり言うとSassのHTML版です。好き嫌いが別れたり、使い所も考える必要がありますが、今回はPugの特徴や記述方法についてまとめておきます。

Pugの特徴

Pugの特徴をまとめると下記のようになります。

閉じタグが不要
山括弧<>も不要
インデントで構造を管理
ファイルの分割ができる
変数が使える
if文やfor文が使える

閉じタグが無い変わりにインデントがかなり重要になってきます。
そのため、普段からインデントを付けながら書いている人であれば、単純に書く文字数が減ります（その辺りの設定が甘い人が触ろうとすると、インデント調整の時間が長くなってしまいます）。

Pugの使い方

基本的な書き方

基本的な書き方は下記の通りです。

階層ごとにインデントを付けて書いていく
要素名はそのまま書く
- divの場合は要素名の省略が可能
classには「.（ピリオド）」、idは「#（ハッシュ記号）」の後に記述する
- 特定要素にclassを付けたい場合は、要素の後にclass名を記述する
テキストは要素の後に半角スペースを空けてから入力する
- 最後に「.（ピリオド）」だけを入力しておくと、次のインデントは文字列として出力される
属性名は丸括弧の後に入力する

コンパイル前doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    title Pugのサンプル
    style(src="css/style.css")
  body
    header
      h1 Pugのサンプル
      ul.nav
        li サンプル
        li サンプル
    main
      section
        p テキストテキストテキスト
        a.btn(href="#") ボタン

コンパイルすると下記のようになります。

コンパイル後<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Pugのサンプル</title>
    <style src="css/style.css"></style>
  </head>
  <body>
    <header>
      <h1>Pugのサンプル</h1>
      <ul class="nav">
        <li>サンプル</li>
        <li>サンプル</li>
      </ul>
    </header>
    <main>
      <section>
        <p>テキストテキストテキスト</p><a class="btn" href="#">ボタン</a>
      </section>
    </main>
  </body>
</html>

ファイルの分割管理

複数ページのHTMLを作る時に、ヘッダーやフッターなどの共通部分を分割しておけます。
そうしておくことで、後で修正があった時に1つのファイルを修正するだけで、修正が反映されます。

分割して作成したPugファイルを、includeを使って読み込みます。

include 分割したファイル名.pug

実際の使用例は下記のようになります。

index.puginclude common/_header.pug
main
  .wrap
    p サンプル
include common/_footer.pug

変数を使う

変数を使うことで、後から一括で修正ができます。宣言の仕方は1つですが、使う時に色んな書き方があるので注意が必要です。

// 変数の宣言
- var 変数名 = 値;

//変数の使用
p #{変数名} //通常の使用方法
a(href=変数名) //属性内で使用する場合
a(href=`${変数名}`) //バッククォートを使用する場合

実際の使用例は下記のようになります。

コンパイル前- var btnLabel = "詳しくはこちら";
section.about
  p.
    テキスト
  a(href="#") #{btnLable}
section.feature
  p.
    テキスト
  a(href="#") #{btnLabel}

また、ブラケットで囲むと配列を作成できます。for文やeach文を使う時にはこの配列を使用します。

- var list = ['text1', 'text2', text3];

if文を使う

例えば「トップページには特定のclassを付けるけど、下層ページには付けない」のような条件分岐が可能です。

- var page = 'top';

if page == 'top'
  p トップページです
else if page == 'about'
  p アバウトページです
else
  p #{page}ページです

ちなみにifの代わりにunlessを使うと、否定（if !条件と同じ）の意味になります。

for文を使う

同じようなHTMLのタグを繰り返す時は、for文を使うことで、コードをすっきり書けます。

コンパイル前- for (var x = 0; x < 5; x++)
li item-#{x}

コンパイル後<li>item-0</li>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>

each文を使う

配列要素ごとに繰り返しをしたい時はeach文を使用します。
文法はeach 変数 in 配列の形です。

コンパイル前- var list = ['text1', 'text2', 'text3'];
ul
  each item in list
    li #{item}

コンパイル後<ul>
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
</ul>

コメントの書き方

コメントの書き方は2通りあって、HTMLにコンパイルした時に表示されるものと、表示されないPugだけのコメントの2通りです。
スラッシュ2つでコメントは記述しますが、その後にハイフンを付けるとPugだけのコメントになります。

コンパイル前// HTMLにも表示されるコメント
//- Pugだけのコメント

コンパイル後<!-- HTMLにも表示されるコメント -->

Pugをプロジェクトで使う時の注意点

ここまでPugを見てきてわかると思いますが、Pugは最終的に大量の静的HTMLを書き出す時に有効です。
逆に言えば、CMSなどへの組み込みを前提とする場合は使いにくい印象です。

また、書き方が独特のため、複数人で作業をする場合はメンバー全員にPugについての書き方や、ファイル分割する時のルールについて共有しておく必要があります。

「使おう」と意識しなければあまり触れる機会はなさそうですが、最近はVue.jsのテンプレートをPugで記述もできるようになりましたし、書けるようになっていて損はないと思います。

WebDesigner's Memorandumウェブデザイナーの備忘録

効率的にHTMLを生成できるPugの特徴や記述方法

Pugの特徴

Pugの使い方

基本的な書き方

ファイルの分割管理

変数を使う

if文を使う

for文を使う

each文を使う

コメントの書き方

Pugをプロジェクトで使う時の注意点

著者について

サイトウマサカズ@31mskz10

記事一覧

目次

X（旧：Twitter）

WebDesigner's Memorandumウェブデザイナーの備忘録

Pugの特徴

Pugの使い方

基本的な書き方

ファイルの分割管理

変数を使う

if文を使う

for文を使う

each文を使う

コメントの書き方

Pugをプロジェクトで使う時の注意点

著者について

サイトウ マサカズ@31mskz10

記事一覧

目次

X（旧：Twitter）

表示設定

ダークモード

サイトウマサカズ@31mskz10