初心者のためのpug入門

はじめに

テンプレートエンジンのpugに触れる機会があったので、初心者の方でもわかりやすいようにまとめようと思います。

pug（パグ）とは

pug(パグ)とは、HTMLを簡単に、かつ効率的に書くためのテンプレートエンジンです。
閉じタグの概念がなく、素のHTMLに比べて記述が少なくなるのが特徴です。
また、内部で定数を定義してループできたりもします。

① 導入

pugを導入するには、

• pug-cliをグローバルにインストール
• gulpなどのタスクランナーでコンパイル

などの方法がありますが、今回は一番手軽なpug-cliを使用します。

pug-cliをglobalにインストールします。

$ npm install pug-cli -g
or
$ yarn global add pug-cli

pugコマンドが使用できるようになっていればOKです。

$ pug --version
//　 実行結果
pug version: 2.0.4
pug-cli version: 1.0.0-alpha6

任意のディレクトリにpugファイルを作成し、記述していきます。

$ touch index.pug

HTMLファイルに出力する際は

$ pug index.pug

を実行すると、同じディレクトリにHTMLファイルが出力されます。

ただし、そのままだと1行に圧縮されてHTMLファイルが出力されてしまいますので、—pretty オプションをつけるのがおすすめです。

$ pug index.pug —pretty

pug-cliにはその他たくさんのoptionコマンドがありますので、公式を参考にしてみてください。

② 基本文法

pugには閉じタグの概念がないので、タグに入れるテキスト等は半角スペースの後に記述します。

h1 見出し
p ここに文章が入ります
div ここはdivタグです
	button ボタンタグです

HTMLに出力すると以下のようになります。

<h1>見出し</h1>
<p>ここに文章が入ります</p>
<div>
	ここはdivタグです
	<button>ボタンタグです</button>
</div>

idとclassを付けたい場合

idとclassを付けたい場合はタグの直後に記述します。
CSSやJavaScriptと同じように、idは#、classは. で表記します。

h1#title 見出し
p.text ここに文章が入ります

<h1 id="title">見出し</h1>
<p class="text">ここに文章が入ります</p>

属性を指定したい場合

属性を指定したい場合も、直後に()で記述します。

a(href="#" target="_blank") リンク
img(src="/pass/image.png" alt="画像1")

<a href="#" target="_blank">リンク</a>
<img src="/pass/image.png" alt="画像1">

改行したい場合

pタグの中に長い文章を記述する際など、改行をしたい場合は | を使用します。
インデントをひとつ下げて | で繋ぐと改行されます。

p
 | テキスト

<p>
	テキスト
</p>

コメントアウトしたい場合

コメントアウトの方法には、

• HTMLファイルに出力されるコメント
• HTMLファイルに出力されないコメント

の2種類の記述方法があります。

// HTMLファイルに出力されるコメント
//- HTMLファイルに出力されないコメント

ブロックコメントも可能です。

//
	ブロックコメントです。
	HTMLファイルに出力されます。

//-
	ブロックコメントです。
	HTMLファイルに出力されません。

③ 応用文法(ループ文)

pugファイル内でforやeach等のループ文を記述することが可能です。

for：特定の回数ループさせる

for文の書き方はJavaScriptとほぼ同じです。

ul
	- for (let i = 0; i < 3; i++)
	li リスト #{i}

<ul>
	<li>リスト 0</li>
	<li>リスト 1</li>
	<li>リスト 2</li>
</ul>

each：配列をループさせる

pugファイル内で配列を定義し、ループで出力させます。
配列を定義する際は - の直後から記述します。

ul
	- const list = ['リスト1', 'リスト2', 'リスト3']
	each item in list
		li #{item}

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
</ul>

連想配列を出力することも可能です。
連想配列を定義する際は -の後改行が必要になるので注意です。

dl
	-
		const list = [
			{
				name: 'item1',
				text: 'あいうえお'
			},
			{
				name: 'item2',
				text: 'かきくけこ'
			},
			{
				name: 'item3',
				text: 'さしすせそ'
			}
		]
	each item in list
		dt #{[item.name](http://item.name/)}
		dd #{item.text}

<dl>
	<dt>item1</dt>
	<dd>あいうえお</dd>
	<dt>item2</dt>
	<dd>かきくけこ</dd>
	<dt>item3</dt>
	<dd>さしすせそ</dd>
</dl>

④応用文法(mixin, include)

include：別ファイルを呼びこむ

includeを使用して別のpugファイルを呼び込むことも可能です。
ヘッダーやフッターなど、共通で使うものを別ファイルで切り出して使用することができます。
分割したファイルはファイル名の先頭にアンダースコア(_)をつけてコンパイルされないようにします。

// _header.pug

header ヘッダーコンテンツ

// index.pug

include _header.pug
	main
		| メインコンテンツ

<header>ヘッダーコンテンツ</header>
<main>メインコンテンツ</main>

mixin：関数を定義する

関数を定義して、pugファイル内で実行することも可能です。
mixin で関数を定義し、 +で実行します。
if文も記述することができます。

mixin listItems(items, active)
	ul
		each item in items
			if(item === active)
				li.isActive= item
			else
				li= item

+listItems(['リスト1','リスト2', 'リスト3'], 'リスト3')

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li class="isActive">リスト3</li>
</ul>

おわりに

以上がpugの基本的文法です。
色々便利そうですね。