【サンプルコード付き】Pugを利用したコーディングの入門解説

2023.12.26

林暁東

こんにちは。キオミル株式会社の林です。
実務で古いWebサイトのヘッダーをアップデートするときに、すべてのページを手動で修正し、微妙に異なるHTMLコードを何度も繰り返し書いたり、閉じタグの記述忘れでデザインが崩れたりして、頭を抱えたことはありませんか？

キオミルのWeb制作では、このような課題を効果的に解決するために、テンプレートエンジンのPugを導入しています。こちらの記事では、Pugの特徴と簡単な使用例を解説します。ぜひご活用ください。

Pugとは
Pugの4つの特徴
Pugのメリット
Pugの活用事例
- Pugの条件分岐について
- Pugのインクルードについて
Pugを導入してコードの品質と効率を向上させよう

Pugとは

Pugは、テンプレートエンジンのひとつで、主にHTMLを生成するために使用されるプログラミング言語です。以前はJadeとしても知られていました。

公式サイトはこちらです。
https://pugjs.org/api/getting-started.html

Pugは、テンプレート内でHTML構造を簡略化するために設計されています。そのおかげでWebエンジニアがより効率的にコーディングを行えて、メンテナンスしやすいWebサイトを構築するのに役立ちます。

Pugの4つの特徴

Pugは、以下の4つの特徴により、HTML生成とコードの管理を簡素化し、効率的な開発を可能にします。そのため、Webエンジニアにとっては非常に使いやすいテンプレートエンジンだと考えられます。

1. シンプルな構文
Pugは非常にシンプルな構文でコードを記述します。インデントを使用してネストされた要素を表現し、閉じるタグを明示的に書かないため、コードが簡潔で可読性が高いです。

2. コンポーネントの再利用
Pugを使用することで、再利用可能なコンポーネントやテンプレートを容易に作成できます。これにより、同じコードの繰り返しを減らし、メンテナンスが容易になります。

3. コンテンツを動的生成できる
Pugは変数や配列を使用してコンテンツを動的に生成できます。これにより、データとHTML構造を分離でき、フロントエンドにおける修正コストが低減します。

4. 学習コストが低い
PugはHTMLを生成するためのツールであり、基本的なHTMLおよびCSSの知識があれば理解しやすく、迅速に習得できると考えられます。

Pugのメリット

Pugには、以下のようなメリットがあります。

HTMLタグを簡略表記できる
インデントして階層構造を表現できる
従来のHTMLタグと混在して記述できる
CSSライクな構文で書ける
div要素の記述は省略できる
属性の付け方も簡単に記述できる
変数が使える
簡潔な構文による繰り返し処理

それぞれ、PugとHTMLのコーディングの実例を比較紹介しながら解説します。

HTMLタグを簡略表記できる

まず、Pugの最大の特徴といえば、HTMLタグを簡略表記できることです。
開始タグと閉じタグをペアで書かかなくてもマークアップできます。これにより、HTMLに比べて記述量が圧倒的に減ります。さらにコードの見た目がスッキリするので、可読性も向上します。

Pugの場合

div
    p テキストが入ります。
    a(href='#') リンクです。

HTMLの場合

<div>
    <p>テキストが入ります。</p>
    <a href="#">リンクです。</a>
</div>

インデントして階層構造を表現できる

Pugでは要素をインデントして、階層構造を表現できます。
インデント自体はスペースかタブで行えば問題ありませんが、混在してしまうと分かりにくくなるため、なるべく統一して使った方がよいでしょう。

以下はネストの例です。

Pugの場合

table
    tbody
        tr
            td 会社名
            td キオミル株式会社（英文名称：kiomiru inc.）
        tr
            td WebサイトURL
            td https://kiomiru.co.jp

HTMLの場合

<table>
    <tbody>
        <tr>
            <td>会社名</td>
            <td>キオミル株式会社（英文名称：kiomiru inc.）</td>
        <tr>
            <td>WebサイトURL</td>
            <td>https://kiomiru.co.jp</td>
    </tbody>
</table>

実務のコーディングにおいても、tableなどを記述するときに「面倒だなあ〜」と思うことは何度もありました。Pugでコーディングすれば、かなり楽に記述できるのでオススメです。

従来のHTMLタグと混在して記述できる

Pugでは途中で通常のHTMLコードも使用できるので、柔軟な記述が可能です。この便利な機能を利用して、必要に応じて通常のHTMLも組み込むことができます。

Pugの場合

p 私たちと、<br>私たちに関わる人たちの<br>幸せに貢献する。

HTMLの場合

<p>私たちと、<br>私たちに関わる人たちの<br>幸せに貢献する。</p>

実務では、この特徴を活かして以下のようなシーンで活用しています。

アナリティクスなどの解析コードの埋め込み
youtube動画とGoogleマップの埋め込み
JavaScriptの記述によるメールアドレスの暗号化
一部の改行タグとspanタグ

こうすることで、ツールから生成された埋め込みコードを調整することなく、そのまま使えます。また、原稿変更などによるHTML構造の調整を回避することもできます。

CSSライクな構文で書ける

Pugは、CSSと似ている構文を採用しています。
簡単に言えば、CSSのセレクターの記述方法でHTMLを書くようなイメージです。そのため、初心者にとっても学習コストが低くて覚えやすいです。

例えば、HTML要素にclassとidを振って記述したいときは、以下のように書くとよいでしょう。

idの場合はid名の前にシャープ（#）を付ける
classの場合はclass名の前にドット（.）を付ける

Pugの場合

h1#title ミッション
p.text 私たちと、私たちに関わる人たちの幸せに貢献する。

HTMLの場合

<h1 id=”title”> ミッション</h1>
<p class=”text”> 私たちと、私たちに関わる人たちの幸せに貢献する。</p>

div要素の記述は省略できる

Pugでは、div要素を省略して直接要素を記述できます。
div要素を記載せずにclass名かid名で直接要素を記述した場合、自動的にdiv要素に変換されるので、コード全体の見通しが良くなります。

Pugの場合

#wrapper
  .header
  .content
  .footer

HTMLの場合

<div class="wrapper">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

また、classとIDを連続して記述すると、同時に付けることもできます。

Pugの場合

.wrapper#wrapper
    .header#header
    .content#content
    .footer#footer

これで生成されたHTMLはこちらです。

<div class="wrapper" id="wrapper">
    <div class="header" id="header"></div>
    <div class="content" id="content"></div>
    <div class="footer" id="footer"></div>
</div>

属性の付け方も簡単に記述できる

Pugでは要素に属性を追加する場合、要素名の後に括弧を付けて、さらにその中に属性を指定します。

複数の属性を記述する必要があれば、属性の間をスペースかカンマ（,）で区切ります。
見通しがいいので、後から確認するときに記述漏れを発見しやすくなります。

Pugの場合

a(href="https://kiomiru.co.jp/" target="_blank") リンクです。
img(src="logo_img.svg",alt="キオミル株式会社",width="100",height="50")

HTMLの場合

<a href="https://kiomiru.co.jp/" target="_blank">リンクです。</a>
<img src="logo_img.svg" alt="キオミル株式会社" width="100" height="50">

変数が使える

Pugでは、JavaScriptと同じく変数を定義できます。予め定義した変数を共通モジュールに埋め込んで使ったり、HTML構造を制御したりするためにも使います。

以下は変数宣言と表示の例です。

変数を宣言する構文です。

- var 変数名 = 値

変数の値を表示する構文です。

要素名=変数名

Pugの場合

- var company = "キオミル株式会社"
h1=company

HTMLの場合

<h1>キオミル株式会社</h1>

Pugの変数を使用することによって、例えば共通の画像やリンクのパスを何回も書かなくても良くなるので、かなりオススメです。

Pugの場合

- var img = './assets/img/'
- var css = './assets/css/'
- var js = './assets/js/'

img(src= img + "imgage01.jpg",alt="")
link(rel="stylesheet",href= css + "common.css")
script(src= js + ”common.js”)

HTMLの場合

<img src="./assets/img/imgage01.jpg" alt="">
<link rel="stylesheet" href="./assets/csscommon.css">
<script src=”'./assets/js/common.js”>

簡潔な構文による繰り返し処理

Pugでは、簡潔な構文で繰り返し処理を記述できます。
必要に応じて繰り返し処理の構文で配列（オブジェクト）の値を自由に出力できます。出力用のコードは1つだけ記述すればいいので、例えば後から修正が入ったとしても、1箇所だけ変更すれば済みます。

Pugの場合

// 配列
- var list = ['コーポレートサイト', '採用サイト','サービスサイト']


// 配列データの出力
ul
    each val in list
        li=val

// オブジェクト
-
    var list = [
        {
            ico: 'ico_corporate.svg',
            title: 'コーポレートサイト',
        },
        {
            ico: 'ico_recruit.svg',
            title: '採用サイト',
        },
        {
            ico: 'ico_service.svg',
            title: 'サービスサイト',
        },
    ];



// オブジェクトデータの出力
ul
    each val in list
        li
            img(src=”val.ico”,alt=val.title,width="100",height="50")
            p=val.title

HTMLの場合

<ul>
    <li>コーポレートサイト</li>
    <li>採用サイト</li>
    <li>サービスサイト</li>
</ul>

<ul>
    <li>
        <img src="ico_corporate.svg" alt="コーポレートサイト" width="100" height="50">
        <p>コーポレートサイト</p>
    </li>
    <li>
        <img src="ico_recruit.svg" alt="採用サイト" width="100" height="50">
        <p>採用サイト</p>
    </li>
    <li>
        <img src="ico_service.svg" alt="サービスサイト" width="100" height="50">
        <p>サービスサイト</p>
    </li>
</ul>

上記のように最初から変数を定義しておけば、データとHTML構造を分離できるので、柔軟にコーディングができます。また、いざ修正が入った場合も効率的に行えるので、ぜひ使ってもらいたい機能です。

Pugの活用事例

ここからはPugの活用事例として、if文・unless文・case文の条件分岐と、インクルード（取り込み）のやり方を紹介します。

Pugの条件分岐について

Pugで条件分岐を行うには、いくつかの形式で使用できます。PugはJavaScriptの制御構造と類似した構文を提供しているので、よく使われる以下の3つの構文を紹介します。

if文
unless文
case文

if文

条件に基づく分岐を実行するには、if文を使用します。また、if条件文では、条件が一致しない場合の処理にはelse文を使用し、別の条件で処理を行う場合はelse if文を利用します。それぞれの条件に合致した場合の処理は、改行してインデントを付けて記述します。

条件文には、論理演算子や比較演算子などのさまざまな演算子を使用することができます。

パターン1

if 条件文
	// 条件に一致した場合の処理

パターン2

if 条件文
	// 条件に一致した場合の処理
else
	// 条件に一致しなかった場合の処理

パターン3

if 条件文
	// 条件に一致した場合の処理
else if 条件文
	// 条件に一致した場合の処理
else
	// 条件に一致しなかった場合の処理

Pugで以下のように記述します。

- var page = 'home'

if page == 'home'
	link(rel="stylesheet" href="home.css")
else if page == 'contact'
	link(rel="stylesheet" href="contact.css")
else
	link(rel="stylesheet" href="common.css")

HTMLはこのように生成されます。

// 現在変数pageの値は’home’であるので、home.cssを読み込ませます。

<link rel="stylesheet" href="home.css">

unless文

逆に条件が満たされない場合の分岐を行うには、unless文を使用します。
unless文の条件が満たされない場合は、else文を使用します。ただし、if文と異なり、else文にはさらに別の条件に合致するような構文（例: else unless）は存在しません。

unless 条件文
	// 条件に一致しなかった場合の処理
unless 条件文
	// 条件に一致しなかった場合の処理
else
	// 条件に一致した場合の処理

Pugで以下のように記述します。

- var score = 100

unless score >= 60
	p="不合格です"
else
	p="合格です"

HTMLはこのように生成されます。

<p>合格です</p>

case文

特定の値が真または偽で分岐するには、caseとwhenを利用します。これは、if文の if 値 == 値に相当します。同様に、いずれの条件にも一致しない場合の処理には、defaultを使用します。

条件が一致した場合に何も行わないようにしたい場合は、- breakを利用します。

パターン1

case 条件文

when 値の判定
	// 一致した場合の処理

パターン2

case 条件文

when 値の判定
	// 一致した場合の処理
default
	// いずれも一致しなかった場合の処理

パターン3

case 条件文

when 値の判定
	- break

Pugで以下のように記述します。

- var address = "横浜"

case address
	when "八王子"
		p="東京都"
	when "横浜"
		p="神奈川県"
	default
		p="不明"

HTMLはこのように生成されます。

<p>神奈川県</p>

このように、Pugでは条件分岐構文を使って、特定の条件に基づいて異なるメッセージやコンテンツを表示することができます。

Pugのインクルードについて

Pugは、テンプレート内のファイルをインクルード（取り込み）することができます。
インクルードの機能を利用することにより、コードの再利用性が向上し、テンプレートを分割して管理しやすくなります。特に規模が大きいサイトになればなるほど、インクルードを使うメリットは大きいです。

ディレクトリ構造

root
  ├ header.pug
  └ index.pug

header.pug

header
    div
        img(src="logo_img.svg" alt="キオミル株式会社" width="100" height="50")

index.pug

// 他のファイルの読み込む
include header.pug

main
    p コンテンツです。

なお、外部ファイルをインクルードしたら次のコードと同じ機能となります。

header
    div
        img(src="logo_img.svg" alt="キオミル株式会社" width="100" height="50")

main
    p コンテンツです。

インクルード機能は、ヘッダー・フッターやサイドバーなどの共通モジュールを含む下層ページの作成に特に役立ちます。
例えば、100ページを超える中規模サイトのヘッダーを修正したい場合、通常のHTMLではページ数分の修正が必要となります。しかし、Pugを使用することにより、header.pugなど1つのファイルにヘッダーのコードをまとめ、それをindex.pugなどで呼び出すことができます。そうすると1つのファイルを修正するだけで済むため、管理が簡単になります。

Pugを導入してコードの品質と効率を向上させよう

Pugは、HTMLに比べてよりコンパクトにコードを記述でき、インデントを使用して階層構造を表現するシンプルなテンプレートエンジンです。
さらに、JavaScriptのような構文も取り入れることができ、開発の要件に応じて柔軟に適用できます。さまざまな課題に対処し、広範な用途に適しているので、実際の現場でも非常に役立ちます。Pugのコンパクトな構文と柔軟性は、コードの品質と効率を向上させるのに寄与すると考えられるので、ぜひ導入を検討してみてください。

この記事の執筆者

林暁東

1984年生まれ。中国出身。21歳に初めて来日し、日本の大学を卒業後、サービス業に就職。30歳でWebデザイナーに転身し、事業会社とWeb制作会社を経験後、キオミルに入社。デザイナーとエンジニアのスキルを持ち、両方の課題や難しさを理解しているのが強み。デザイナーとエンジニアの両スキルを活かし、見た目と機能性を兼ね備えたWebサイト制作に励んでいる。趣味は映画鑑賞とバスケットボール。

この記事の編集者

水島なぎ

1985年生まれ。福井県出身。「書く・編む・正すことばのよろず屋」を掲げる、フリーランスのライター・編集者・校正者。実用書系出版社の企画編集者として培った編集スキルやディレクションスキルを生かし、紙媒体やWebなど幅広い分野で活動中。正しい日本語、読みやすい日本語、誤解されにくい日本語への提案が得意。

ことばのよろず屋

キオミル株式会社では個別交流会を実施しています。

キオミルでは将来一緒に働いてくれる仲間やパートナー、同業種の方々と交流したいと考えています。転職先や職職先としてキオミルに興味がある方、同業者やパートナーとしてキオミルに興味のある方。まずは飲み物でも飲みながらゆるやかに交流しませんか？

Web制作に関するお悩みがある方はお気軽にご相談ください。

ご相談・お問い合わせはこちら

【サンプルコード付き】Pugを利用したコーディングの入門解説

Pugとは

Pugの4つの特徴

Pugのメリット

HTMLタグを簡略表記できる

インデントして階層構造を表現できる

従来のHTMLタグと混在して記述できる

CSSライクな構文で書ける

div要素の記述は省略できる

属性の付け方も簡単に記述できる

変数が使える

簡潔な構文による繰り返し処理

Pugの活用事例

Pugの条件分岐について

if文

unless文

case文

Pugのインクルードについて

Pugを導入してコードの品質と効率を向上させよう

カテゴリー

ライター

このブログについて

【サンプルコード付き】Pugを利用したコーディングの入門解説

Pugとは

Pugの4つの特徴

Pugのメリット

HTMLタグを簡略表記できる

インデントして階層構造を表現できる

従来のHTMLタグと混在して記述できる

CSSライクな構文で書ける

div要素の記述は省略できる

属性の付け方も簡単に記述できる

変数が使える

簡潔な構文による繰り返し処理

Pugの活用事例

Pugの条件分岐について

if文

unless文

case文

Pugのインクルードについて

Pugを導入してコードの品質と効率を向上させよう

人気の記事

カテゴリー

ライター

このブログについて