Pug講座
Pug講座

Pug入門

Pugとは

HTMLは、マークアップ言語の一種で、Webページの構造を定義するためのものです。HTMLはとても簡単でおぼえやすい言語ですが、その分、コーディングを補助する機能や効率化といった面ではリリース時からほとんど変わっていません。

今回紹介するPugは、HTMLの機能を拡張し、効率的にマークアップすることができるテンプレートエンジンです。Pugの仕組みはSassと同様で、Pugの記法で書いたコードをHTMLに変換（コンパイル）します。コンパイルが必要と聞くとハードルが高く感じたり、作業効率が気になるかもしれませんが、ご安心ください。WindowsやMacであればPugをコンパイルしてくれる無料のアプリがあり、最小限でよければ環境構築もシンプルです。最初に開発環境を整えさえすれば、それ以降はPugを保存するたびに自動的にHTMLが出力されるようになるため、快適にコーディングできます。一度Pugになれてしまうと、生のHTMLを書くのが非常に面倒に感じると思います。

PugからHTMLに変換するためのツールとしては、gulpなどのタスクランナーや、Preprosなどがあります。これらのツールは、変更されたファイルをチェックし、自動的にコンパイルしてくれます。また、多くのツールではローカルサーバも用意されているので、出力された結果をブラウザで確認することができ、内容も自動的に更新されます。インストールや設定といった作業をクリアすれば、最初の面倒を補ってあまりあるほど、作業効率が向上します。

それでは、早速Pugのサンプルコードを見てみましょう。

article
	h1 タイトル
	section
		h2 タイトル
		ul
			li
				項目1
			li
				項目2

いかがでしょうか？HTMLでもおなじみのARTICLEやH1といったタグ名が使われていますね。PugではHTMLのタグ名や属性名をそのまま使うため、HTMLを知っていれば数十分程度の学習でも十分使えるようになります。学習コストはかなり低いと思います。

今度はHTMLとの相違点に注目してみましょう。Pugでは、HTMLのようにタグ名を括弧（< >）で囲む必要がなく、閉じタグも使いません。インデントとタグ名だけで表現できるので、シンプルにコード量が少なくなっています。

先程のPugコードの出力結果は下記のようになります。

<article>
	<h1>タイトル</h1>
	<section>
		<h2>タイトル</h2>
		<ul>
			<li>
				項目1
			</li>
			<li>
				項目2
			</li>
		</ul>
	</section>
</article>

Pugのときと比べ、HTMLでは2倍程度のコード量になっています。

作業効率の良さや学習コストの低さ以外にも、Pugには様々な便利な機能が用意されています。たとえば、ヘッダやフッタといった共通パーツを外部ファイルとして読み込む機能や、変数や条件分岐などの構文があります。

ここでは、Pugの代表的な機能を紹介しましょう。

  • 外部ファイル化が可能
  • HTMLコードもそのまま使える
  • 閉じタグが不要
  • 変数が使える
  • 条件分岐、繰り返し構文が使える

Pugの基本的な使い方

タグ名を指定する

HTMLのタグはタグ名を山カッコ（<>）で囲みます。殆どのタグは開始タグと終了タグが必要です。

<p>テキスト</p>

Pugのコーディングでは、HTMLタグのような括弧（<>）や、終了タグは必要ありません。たとえばP要素であれば、Pといったタグ名のみを指定します。要素内のテキストは、要素名の後に半角スペースを入れて、その後に続けます。

p テキスト
出力結果
<p>テキスト</a>

親子関係はインデントで表す

ULやLIといった入れ子が必要な要素の場合、入れ子の代わりにインデントを使います。たとえば、UL要素の中にLI要素を配したい場合、インデントを使って下記のように記載します。かなりシンプルに書けますね。

ul
	li テキスト
出力結果
<ul>
	<li>テキスト</li>
</ul>

親子関係を1行にまとめる

インデントを使って入れ子を表現する代わりに、コロン（:）を使って1行にまとめることができます。

ul: li: a(href="#") リンクテキスト
出力結果
<ul>
	<li>
		<a href="#">リンクテキスト</a>
	<li>
</ul>

クラス名はドット（.）、ID名はシャープ（#）で表す

クラス名（.）やID名（#）の指定はCSSと同じです。

ul#box-list
	li.item
出力結果
<ul id="box-list">
	<li class="item">
	<li>
</ul>

CSSと記法が同じなので、タグ名の置換なども簡単になりますね。

改行はパイプライン（|）を使う

要素内で改行を入れたい場合、改行のあとにパイプライン（|）を入れて、そのあとにテキストなどを続けます。

span テキスト
	| テキスト
出力結果
<span>テキスト<br>テキスト</span>

普通にBRタグを書いても同じ出力結果になります。

span テキスト<br>テキスト

Pugはとてもシンプルで良いのですが、この改行ルールはちょっとイケてない気がしますね。

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

HREFやSRCといった属性は丸括弧の中に記述します。

a(href="#") リンク
出力結果
<a href="#">リンク</a>

複数の属性を書く際はHTMLと同様に半角スペースや改行、カンマ（ , ）で区切ります。

a(href="#" title="リンクタイトル") リンク

a(href="#"
title="リンクタイトル") リンク

a(href="#", title="リンクタイトル") リンク

イコール（ = ）を使って文字列をHTMLエンコードする

要素内のテキストをHTMLエンコードしたい場合、要素名と値をイコール（ = ）で区切ります。

p="<script>alert('Hi!');</script>"
出力結果
<p>&lt;script&gt;alert('Hi!');&lt;/script&gt;</p>

HTMLに出力されるコメント

HTMLのコメントを出力するにはスラッシュを2つ続けます。

// コメント
出力結果
<!-- コメント-->

複数行のコメントにしたい場合はインデントを使います。

//
	コメント
	コメント
出力結果
<!--
コメント
コメント
-->

HTMLに出力されないコメント

HTMLとして出力したくない、Pugのコード上のみのコメントは以下になります。

//- コメント

HTMLに出力するコメントとの違いは//のあとにハイフンがあるかどうかです。//- が先頭にある行はHTMLに出力されません。

HTMLコードの埋め込み

YoutubeやGoogle Analyticsのタグなど、HTMLコードをそのまま埋め込みたい場合、ドット（.）のあとにインデントをつけてコードを指定します。そうすると、そのコードには何も処理されずに出力されます。

.
	<iframe loading="lazy" title="Pale Jay-Dos Uvas" width="1080" height="608" src="https://www.youtube.com/embed/v1CsjdOH_mw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
出力結果
<iframe loading="lazy" title="Pale Jay-Dos Uvas" width="1080" height="608" src="https://www.youtube.com/embed/v1CsjdOH_mw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Pugが提供する機能

インクルード

Pugには、ヘッダやフッタといった共通パーツを外部ファイル化して、インクルードする機能が用意されています。
たとえば、下記のようなヘッダファイルを用意したとします。

h1 サイト名

ファイル名とパスはinclude/header.pugとします。このファイルをインクルードしたい場合は、include文を使って以下のようにファイル名を指定します。

include include/header.pug

たったこれだけでheaer.pugの中身がインクルードされます。

変数

Pugは変数の作成、参照が可能です。- var のあとに変数名を指定して、あとは他のスクリプトと同じように値を指定します。変数の参照は、属性の値として使うときはクォーテーションをつけなければ変数として扱われます。

// 変数の定義
- const url = "index.html";

// 変数の参照
a(href=url) リンクテキスト
出力結果
<a href="index.html">リンクテキスト</a>

要素内のテキストに変数を使いたい場合は、変数名をブランケット（{}）で囲み、先頭にシャープ（#）をつけます。

- const title = "ページタイトル";

html
  head
    title #{title}
出力結果
<html>
	<head>
		<title>ページタイトル</title>
	</head>
</html>

複数の変数を定義したい場合はインデントします。

- 
	const title1 = "ページタイトル1";
	const title2 = "ページタイトル2";

関連記事