効率的に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で記述もできるようになりましたし、書けるようになっていて損はないと思います。
