「Pug(パグ)」って何？ HTMLと見比べながら7つのメリットを紹介！

公開日 : 2021.11.01 最終更新日 : 2023.08.28

コーディング

そもそも「Pug」とは？

Pugとは「パグ」と読み、HTMLを効率的に書くための記述方法です。
「テンプレートエンジン」と言われるもののひとつです。
※犬の種類ではないです。

HTMLの場合は拡張子が.htmlですが、Pugの場合は .pugとなります。

Pugを扱う注意点としては、PugファイルはWebブラウザが認識してくれないので、通常のHTMLに「変換」する必要があります。通常は、「コンパイル」といって、タスクランナー（gulpなど）やコンパイラーアプリ（Preprosなど）を用いて自動変換しますが、今回はPugのメリット紹介のため変換方法については割愛します。

Pugのメリット7つ

今回は、PugとHTMLを見比べながら、Pugのメリットや使い方をご紹介していきます。

メリット1 : 開始タグと閉じタグを書かなくても良い

まずPugの特徴といったこれです。閉じタグを書かなくても良くHTMLに比べて記述量が圧倒的に減ります。インデントにすることで入れ子となります。

Pug

h1 タイトル
section
  h2 タイトル
  p テキスト
  ul
    li テキスト
    li テキスト
section
  h2 タイトル
  p テキスト
  ul
    li テキスト
    li テキスト

HTML

<h1>タイトル</h1>
<section>
  <h2>タイトル</h2>
  <p>テキスト</p>
  <ul>
    <li>テキスト</li>
    <li>テキスト</li>
  </ul>
</section>
<section>
  <h2>タイトル</h2>
  <p>テキスト</p>
  <ul>
    <li>テキスト</li>
    <li>テキスト</li>
  </ul>
</section>

メリット2 : 途中で普通のHTMLも書ける

PugはPugのルール(記述方法)でしか書けないわけではありません。普通にPugと混合してHTMLタグも書くことができます。

Pug

p テキスト<span class="inner">テキスト中身</span>テキスト

HTML

<p>テキスト<span class="inner">テキスト中身</span>テキスト</p>

例えばYoutubeの埋め込みなどは、https://www.youtube.com/ にある「埋め込み」からHTMLタグとしてコピーできますが、PugではそのHTMLのまま入れることができます。わざわざPugにする必要が無いです。

.youtube
  <iframe width="560" height="315" src="https://www.youtube.com/embed/" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

HTML

<div class="youtube">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

メリット3 : CSSと統一の書き方ができる

CSSの場合、class=""と記述する必要がありますが、Pugの場合はドット（.）がClass、シャープ（#）がIDとなり、CSSの記述と同じ書き方が可能です。CSSとPugでコピペが簡単になり視覚的にも分かりやすいです。

Pug

h1#title タイトル
p.text テキスト

HTML

<h1 id="title">タイトル</h1>
<p class="text">テキスト</p>

CSS

#title{
  color: #333;
}
.text{
  color: #eaeaea
}

メリット4 : divを省略できる

タグを記載せずにそのままドットやシャープで記載した場合、自動的にdivタグへと変換されます。

Pug

.wrap_text
  p.text テキスト
 
#wrap_text
  p.text テキスト

HTML

<div class="wrap_text">
  <p class="text">テキスト</p>
</div>
 
<div id="wrap_text">
  <p class="text">テキスト</p>
</div>

メリット5 : ファイルを分割して読み込みできる。

大きいサイトになればなるほどこのメリットは大きいと思います。

例えば50ページ近いページ数があるサイトのヘッダーを修正したいとなった場合、HTMLだと50ファイル分の修正が必要となります。Pugの場合は、header.pugなどとひとつのファイルに記述してindex.pugで呼び出すという事ができます。ひとつのファイルを修正するのみで良いため管理が楽になります。

header.pug

header
  .logo
    img(src='./assets/img/logo.png' alt='AndHA')
  nav
    ul
      li:a(href='') ホーム
      li:a(href='') about
      li:a(href='') works

footer.pug

footer
  p.copylight © AndHA

index.pug

include ./components/_header.pug
 
main
  h2 タイトル
  p テキスト
 
include ./components/_footer.pug

HTML

<header>
  <div class="logo">
    <img src="./assets/img/logo.png" alt="AndHA">
  </div>
  <nav>
    <ul>
      <li><a href="">ホーム</a></li>
      <li><a href="">about</a></li>
      <li><a href="">works</a></li>
    </ul>
  </nav>
</header>
<main>
  <h2>タイトル</h2>
  <p>テキスト</p>
</main>
<footer>
  <p class="copylight">© AndHA</p>
</footer>

メリット6 : 共通の画像パスやリンクパスを何回も書かなくても良い。

ニュース記事一覧などで利用しやすいと思います。
共通の文字列になる場合はそれを変数に格納してしまい適宜呼び出して使うことができます。
記述量を減らす事ができるため、うまく使うことで効率的にコーディングができます。

Pug

//- 画像パス
const img_path =  './assets/img/service/'
 
//- リンクパス
const link_path =  './service/'
 
img(src= img_path + "sample.jpg", alt="")
img(src= img_path + "image.jpg", alt="")
img(src= img_path + "picture.jpg", alt="")
 
a(href= link_path + 'service-1/') サービス一1の詳細を見る
a(href= link_path + 'service-2/') サービス一2の詳細を見る
a(href= link_path ) サービス一覧に戻る

HTML

<img src="./assets/img/service/sample.jpg" alt="">
<img src="./assets/img/service/image.jpg" alt="">
<img src="./assets/img/service/picture.jpg" alt="">
 
<a href="./service/service-1">サービス一1の詳細を見る</a>
<a href="./service/service-2">サービス一2の詳細を見る</a>
<a href="./service/">サービス一覧に戻る</a>

メリット7 : 繰り返し処理が書ける

配列に必要事項を記述することで自動的に繰り返されます。
ニュースを追加したい場合は配列の上に書き足すだけです。

また、クラス名を変更したいといった場合にも、一箇所だけ変更すればいいので単純なミスが減ります。

Pug

.container-news
  ul.list-news
    -
      const newsData = [
        {
          "img":"3.jpg",
          "date":"2020/05/01",
          "cat":"行事",
          "title":"新人研修を行いました",
          "link":"news3.html"
        },
        {
          "img":"2.png",
          "date":"2020/02/01",
           "cat":"お知らせ",
           "title":"Webサイトをリニューアルしました",
           "link":"news2.html"
         },
         {
           "img":"1.jpg",
           "date":"2019/12/20",
           "cat":"お知らせ",
           "title":"年末年始の営業のお知らせ",
           "link":"news1.html"
         }
       ]
     each val,i in newsData
       li.c-news_item
         a(href="./news/" + val.link)
           .news_item--image
             img(src= ./assets/news/image-"+val.img, alt=val.title)
           .news_item--text
             time.news_item--date(datetime=val.date) #{val.date}
             p.news_item--category #{val.cat}
             p.news_item--title #{val.title}

HTML

<div class="container-news">
  <ul class="list-news">
    <li class="c-news_item">
      <a href="./news/news3.html">
        <div class="news_item--image">
          <img src="./assets/news/image-3.jpg" alt="新人研修を行いました">
        </div>
        <div class="news_item--text">
          <date class="news_item--date">2020/05/01</date>
          <p class="news_item--category">行事</p>
          <p class="news_item--title">新人研修を行いました</p>
        </div>
      </a>
    </li>
    <li class="c-news_item">
      <a href="./news/news2.html">
        <div class="news_item--image">
          <img src="./assets/news/image-2.jpg" alt="Webサイトをリニューアルしました">
        </div>
        <div class="news_item--text">
          <date class="news_item--date">2020/02/01"</date>
          <p class="news_item--category">お知らせ</p>
          <p class="news_item--title">Webサイトをリニューアルしました</p>
        </div>
      </a>
    </li>
    <li class="c-news_item">
      <a href="./news/news1.html">
        <div class="news_item--image">
          <img src="./assets/news/image-1.jpg" alt="年末年始の営業のお知らせ">
        </div>
        <div class="news_item--text">
          <date class="news_item--date">2019/12/20</date>
          <p class="news_item--category">お知らせ</p>
          <p class="news_item--title">年末年始の営業のお知らせ</p>
        </div>
      </a>
    </li>
  </ul>
</div>

【おまけ】Pugのサンプルコード紹介

最後に、ここまで紹介した内容を応用すると、下記のような書き方も可能です。少し省略していますが、3行目にある「const page」の中身を書き換えるだけで、

パンくずリスト
そのページへのリンクパス
そのページの画像パス
メインビジュアルに記載するタイトルや画像

が出来上がる仕組みになってます。

※例：下記の構造のサイトにて「広告」のページを作成する場合。

TOP
└ サービス
　└ 広告
　└ デザイン
　└ 開発

-
  // ページの情報　ここの記述のみ変更でOK
  const page = {
    titleJa: '広告',
    titleEn: 'service-ad',
    categoryJa: 'サービス',
    categoryEn: 'service',
  }
 
  // このページの画像パス
  const img_path =  './assets/img/' + page.categoryEn + '/' + page.titleEn + '/'
 
  // このページのリンクパス
  const link_path =  '/' + page.categoryEn + '/' +page.titleEn + '/'
 
  // パンクズ生成用配列
  const breadcrumbs = [
    {
      text: "AndHA",
      link: '/'
    },
    {
      text: page.categoryJa + ' | AndHA',
      link: '/' + page.categoryEn+ '/'
    },
    {
      text: page.titleJa + ' | ' + page.categoryJa + ' | AndHA',
      link: ''
    }
  ]
 
//- コンテンツ
nav.breadcrumbs
  ul.list-breadcrumbs
    each val,i in breadcrumbs 
      if val.link === ''
        li.breadcrumbs-list
          span #{val.text}
      else
        li
          a(href=val.link) #{val.text}
 
section.main_visual
  h1.page-heading
    span.page-heading-ja #{page.titleJa}
    span.page-heading-en #{page.titleEa}
  img.page-image(src= img_path + "main-iamge.jpg", alt=page.titleJa)

HTML

<nav class="breadcrumbs">
  <ul class="list-breadcrumbs">
    <li class="breadcrumbs-list"><a href="/"></a></li>
    <li class="breadcrumbs-list"><span>サービス</span></li>
    <li class="breadcrumbs-list"><span>広告</span></li>
  </ul>
</nav>
<section>
  <h1 class="page-heading">
    <span class="page-heading-ja">広告</span>
    <span class="page-heading-en">service-ad</span>
  </h1>
  <img class="page-image" src="./assets/img/service/service-ad/main-iamge.jpg" alt="広告">
</section>