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

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね
カテゴリー
タグ
文章量
ソート
Twitterをフォロー Facebookでいいね

記事一覧

関連記事 人気記事 ランダム

目次

表示設定

ダークモード

この機能はCookieを使用して、設定した内容を保存しています。個人を特定したりするものではありませんが、気になる方はプライバシーポリシーをご覧ください。