# 効率的にHTMLを生成できるPugの特徴や記述方法
URL: https://webrandum.net/pug/
公開日: 2019-04-04
更新日: 2019-04-04
カテゴリー: コーディング
タグ: Pug
出典: Webrandum（著者: サイトウ マサカズ）
Pug(パグ)はHTMLを生成するためのテンプレートエンジンで、ものすごくざっくり言うとSassのHTML版です。好き嫌いが別れたり、使い所も考える必要がありますが、今回はPugの特徴や記述方法についてまとめておきます。
## Pugの特徴
[Pug](https://pugjs.org/api/getting-started.html)の特徴をまとめると下記のようになります。
- 閉じタグが不要
- 山括弧<>も不要
- インデントで構造を管理
- ファイルの分割ができる
- 変数が使える
- 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="#") ボタン
```
コンパイルすると下記のようになります。
```
コンパイル後
Pugのサンプル
```
### ファイルの分割管理
複数ページの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}
```
```
コンパイル後item-0
item-1
item-2
item-3
item-4
```
### each文を使う
配列要素ごとに繰り返しをしたい時はeach文を使用します。
文法は`each 変数 in 配列`の形です。
```
コンパイル前- var list = ['text1', 'text2', 'text3'];
ul
each item in list
li #{item}
```
```
コンパイル後
```
### コメントの書き方
コメントの書き方は2通りあって、HTMLにコンパイルした時に表示されるものと、表示されないPugだけのコメントの2通りです。
スラッシュ2つでコメントは記述しますが、その後にハイフンを付けるとPugだけのコメントになります。
```
コンパイル前// HTMLにも表示されるコメント
//- Pugだけのコメント
```
```
コンパイル後
```
## Pugをプロジェクトで使う時の注意点
ここまでPugを見てきてわかると思いますが、Pugは最終的に大量の静的HTMLを書き出す時に有効です。
逆に言えば、CMSなどへの組み込みを前提とする場合は使いにくい印象です。
また、書き方が独特のため、複数人で作業をする場合はメンバー全員にPugについての書き方や、ファイル分割する時のルールについて共有しておく必要があります。
「使おう」と意識しなければあまり触れる機会はなさそうですが、最近はVue.jsのテンプレートをPugで記述もできるようになりましたし、書けるようになっていて損はないと思います。