「Pug(パグ)」って何？ HTMLと見比べながら7つのメリットを紹介！
公開日 : 最終更新日 :
- コーディング
そもそもPugとは
Pugとは「パグ」と読み、HTMLを効率的に書くための記述方法です。
「テンプレートエンジン」と言われるもののひとつです。
※犬の種類ではないです。
HTMLの場合は拡張子が.htmlですが、Pugの場合は .pugとなります。
注意点として、Pugファイルはそのままだとブラウザが認識してくれないので、普通の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にする必要が無いです。
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のまとめ
場合によってはHTMLよりも記述が多くなる箇所もありますが、ページ数が多いほど、もしくは階層が深くなっていくほど、一度定義してしまえば記述や管理が楽になりますし単純なミスも減らすことが可能です。
もちろんPugを書くにはHTMLの知識が前提となりますので、HTMLをしっかり勉強した上で利用しましょう。
Pugのサンプルコード紹介
最後に、ここまで紹介した内容を応用すると下記のような書き方も可能です。少し省略していますが、3行目にある「const page」の中身を書き換えるだけで、
- パンくずリスト
- そのページへのリンクパス
- そのページの画像パス
- メインビジュアルに記載するタイトルや画像
が出来上がる仕組みになってます。
※例：下記の構造のサイトにて「広告」のページを作成する場合。
TOP
└ サービス
└ 広告
└ デザイン
└ 開発
Pug
-
// ページの情報 ここの記述のみ変更で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>
Pugの使い方で参考にしたサイト
https://www.tam-tam.co.jp/tipsnote/html_css/post12789.html
https://qiita.com/yun_bow/items/d21586b51f87d781a857
https://qiita.com/takeshisakuma/items/fdcf456d8250e6dafc7b
https://tech.qookie.jp/posts/info-pug-feature/
