概要

初心者のためにPug（パグ）とはなんぞやを解説していきます。

対象者

HTML,CSSの知識がある
Pugを使ってみたい方

Pugとは

Pug（パグ）は、HTMLを効率的に書くためのテンプレートエンジンです。
使い方はCSSで言うSassみたいなもので、
拡張子 .pug のファイルを書き、変換されHTMLファイルとして出力されます。
（コンパイル環境が必要になりますが、今回は環境以外のPugの書き方など考え方について説明していきます。）

Pugの記法

インデントのみで階層化を行い書いていく。

Pug

main#main
  ul.btns
    li
      a.btn(href="/") ボタン

↓

HTML


<main id="main">
  <ul class="btns">
    <li><a href="/" class="btn">ボタン</a></li>
  </ul>
</main>

Pugのメリット

1. 閉じタグ忘れがなくなる
自動的に閉じタグが生成されるので、閉じタグ忘れがない。

2. 書き方をCSSと統一できる
classは . 、idだと # で書くのでCSSとの連携が取りやすい。

3. ファイルを分割管理できる
別ファイルを読み込んで書き出せるのが便利。各コンテンツやパーツごとにファイルを分割管理できる。
_header.pug と _footer.pug を別ファイルで作っていた場合の例。

Pug

include section/_header.pug

main#main
  ul.btns
    li
      a.btn(href="/") ボタン

include section/_footer.pug

↓

HTML

<header>
  <h1>
    <a href="#"><img src="img/logo.svg" alt="Pug" class="logo"></a>
  </h1>
</header>
<main id="main">
  <ul class="btns">
    <li><a href="/" class="btn">ボタン</a></li>
  </ul>
</main>
<footer>
  <p class="copylight"></p>
</footer>

4.変数で修正が楽になる
変数が使えるため直接HTMLファイルを何箇所も修正しなくても変数の値を一箇所かえるだけでよい。
大規模サイトで共通の値を使っている場合など一括で変えることができるので作業時間が短縮される。

Pug

- var title = "Pugの基礎知識";

doctype html
html(lang="ja")
  head
    meta(charset="UTF-8")
    title #{title}
  body
    header
      h1
        a(href="#")
          img.logo(src="img/logo.svg" alt=title)

5. 条件分岐を作れる
Pugの中でも条件分岐を使うことが可能。
例えば、トップだけ h1 にして他のページは p にするなどの条件分岐が可能。

Pug


- var page = "top"
if page === "top"
  h1 見出し
else
  p 見出し

6. 繰り返しを楽に書ける
Pugの中でもループ処理を使うことが可能。

Pug

- for (var i = 0; i < 3; i++)
  p #{i}

** ↓**

HTML

<p>0</p>
<p>1</p>
<p>2</p>

7. mixin
PugではMixinを使うことが可能。Mixinを使うと共通処理をメソッド化して呼び出すことができる。
mixin Mixin名(変数,...)で宣言しておくと、+Mixin名(値,...)で呼び出すことができる。

Pug

mixin pet(name)
  li.pet= name

ul
  +pet('cat')
  +pet('dog')
  +pet('pig')

↓

HTML

<ul>
  <li class="pet">cat</li>
  <li class="pet">dog</li>
  <li class="pet">pig</li>
</ul>

基本的な書き方のルール

タグ名はHTMLタグになる
改行をしてインデントをつければ入れ子になる

Pug

h1 HTMLタグ
div
  p パラグラフ
  center センタリング
  ul
    li あ
    li い

↓

HTML

<h1>HTMLタグ</h1>
<div>
  <p>パラグラフ</p>
  <center>センタリング</center>
  <ul>
    <li>あ</li>
    <li>い</li>
  </ul>
</div>

インライン要素や改行にはパイプライン | を使う

Pugでは要素ごとに改行して記述するが、ブロックレベル要素の中に複数のインライン要素が混ざっている場合はかなりややこしくなる。
そこでパイプラインを使うことで、複数行にまたがって記述することができる。
改行タグの使用時も同じで、パイプラインを使うことで次の行に続けて書くことができる。

インライン要素を行を分けて記述する場合

Pug

p ブロックレベル要素です 
 span このテキストは1行内に収まります。
  | Pugでは2行目で改行していますが、インラインとして扱われます。
  | Pugでは3行目で改行していますが、インラインとして扱われます。

↓

HTML

<p>
 <span>このテキストは1行内に収まります。Pugでは2行目で改行していますが、インラインとして扱われます。Pugでは3行目で改行していますが、インラインとして扱われます。</span>
</p>

改行タグ使用時の書き方

Pug

p テキストテキストテキストテキスト
 br
  | 改行後のテキスト

↓

HTML

<p>テキストテキストテキストテキスト<br>改行後のテキスト</p>

ドット.を使ってHTMLをそのまま貼り付ける

要素の直後にドットを入れて、入れ子になるようにそのままHTMLを記述すると、要素にインラインの埋め込みコードが内包されるようになる。
インラインの埋め込みコードなどそのまま貼り付けたい時に使える。

Pug

div.
  <iframe src="https://www.youtube.com/embed/"></iframe>

↓

HTML

<div>
 <iframe src="https://www.youtube.com/embed/"></iframe>
</div>

属性は丸括弧内に記述する

hrefやsrcのような属性は半角の丸括弧の中に記述する。
属性の間は半角スペースかカンマ,、あるいは両方で区切られていればOK。
属性が複数あって1行にすると読みにくい場合は、改行やスペースで整形しても解釈してくれる。
上3つは書き方は違うが、出力結果は同じになる。

Pug

ul
  li: a(href="example.com" target="_blank") aタグです
  li: a(href="example.com", target="_blank") aタグです
  li
    a(href="example.com",
      target="_blank") aタグです

input(type="checkbox" checked)
input(type="checkbox" checked="checked")

↓

HTML

<ul>
  <li><a href="example.com" target="_blank">aタグです</a></li>
  <li><a href="example.com" target="_blank">aタグです</a></li>
  <li><a href="example.com" target="_blank">aタグです</a></li>
</ul>

<input type="checkbox" checked>
<input type="checkbox" checked="checked">

クラス属性はドット. 、ID属性はシャープ # で表す
コメントにはHTMLとして出力されるものと、されないものがある

PugのコメントにはHTMLに表示されるコメントと、Pug内だけで表示されるコメントの2種類がある。
//のようにスラッシュ2つだけだとHTMLに残って、//-のようにハイフンをつけるとHTMLには残らなくなる。

Pug

//- Pug
// これはHTMLに表示されるコメントです

//- これはHTMLに表示されないコメントです

↓

HTML

<!-- HTML -->
<!-- これはHTMLに表示されるコメントです-->

イコール（=）を使ったHTML記号のエスケープ

HTML文書の中ではセキュリティのために5つの文字列（& < > " '）をエスケープすることが推奨されている。
要素の直後にイコールをつけて、エスケープされる範囲のテキストをクォーテーションマークで囲うと
その中に特殊文字が含まれていた場合はその文字がエスケープされて出力される。

エスケープをせずにそのまま出力する場合には、改行してエクスクラメーションマーク ! を入れるとエスケープされずにそのまま出力される。

文字をエスケープして出力

Pug

p= '<や>などの特殊文字をエスケープする'

↓

HTML

<p>&lt;や&gt;などの特殊文字をエスケープする</p>

エスケープなしで出力

Pug

p
 != '<や>などの特殊文字をエスケープせずに出力'

↓

HTML

<p><や>などの特殊文字をエスケープせずに出力</p>

インクルード（include [ファイル名へのパス]）で共通化したファイルを挿入できる

さいごに

HTML,CSSの知識があって効率的なコーディングにチャレンジしたいという方におすすめです。
コンパイルする必要があるので環境構築が大きなネックになってきますが、
すでに環境が整っているならば、ぜひ試していただきたいです。

次回以降はPug導入にあたっての環境構築の手順なども合わせて書いていきたいと思います。