もちろん以前からPugの事は知っていたのだけれど、記述方法に一抹の気持ち悪さを感じ、距離を置いていた。先日、あるキッカケで使ってみたところ、ただの食わず嫌いだという事が分かった。先入観は可能性を狭める。これまではHTMLテンプレートエンジンとしてEJSをつかってきたが、今はもうPugに乗り換える気満々だ。
自分が感じた利点はこんな感じ。
- 書く量が少ない ＝ 速い
- 特に<>が無いのが良い。こんなに快適だとは思わなかった。
- 閉じタグ忘れが起きない。（普段から忘れないけどね）
- includeやmixinの使用感が良い。
- 繰り返し（each）や条件分岐（if）などがejsに比べて書きやすい。
- Vue.jsでもつかえる。
- Slim(Ruby)と似てる。
サンプル集
せっかく使い始めたので、サンプルを貯める。今後、使いながら増やしていこうと思う。
Pugの基本
きほんのき。構造はインデントで管理する。
sample.pug
doctype html
html(lang="ja")
head
meta(charset="utf-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
title タイトル
link(rel="stylesheet", href="/assets/css/common.css")
body
h1 TITLE
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>タイトル</title>
<link rel="stylesheet" href="/assets/css/common.css">
</head>
<body>
<h1>TITLE</h1>
</body>
</html>
タグにClassやidやattributeをつける
これも基本。繋げて書けば良いだけ。
sample.pug
input#sample-id.sample-class(type="text",name="sample",value="値")
button(type="submit").btn.btn-large ボタン
sample.html
<input id="sample-id" class="sample-class" type="text" name="sample" value="値">
<button class="btn btn-large">ボタン</button>
変数の呼び出し２種
そのままタグに入れる場合と、文章内に含める場合。
（テンプレートリテラルとして考えるとrubyっぽい。JavaScriptなら#でなく$。）
variables.pug
- var title = "ラララ";
h1= title
p このページの名前は、#{title}です。
variables.html
<h1>ラララ</h1>
<p>このページの名前は、ラララです。</p>
変数内のHTMLタグの扱い
<>をどうするか。
tag.pug
- var text = "ラララ<br>ルルル";
p= text // HTMLタグ無効。<>は<と>に変換される。
p!= text // HTMLタグとして機能。<br>では改行される。
includeしたpugファイルに値を渡す
簡単にincludeできる。ファイルを分割して、コンポーネント設計がしやすい。
ただ、値をやりとりする場合、命名ルールがあると良さそうだったので、以下のようにしてみた。
- include用のファイル名はアンダーバーをつけ、Gulpでhtml化しない。（ _btn.pug ）
- ファイル間でやりとりがある変数にはアンダーバーを付ける。（ _var ）
- 上書きする場合はsetを付ける。（ _setVar ）
- デフォルト値を設定する。
ラベル名を指定しつつ、ボタン（ _btn.pug ）をincludeするサンプル。
変数をタグ無いでテキスト化する場合は＝を使用する。
_btn.pug
-var _label = 'ボタン' // デフォルト設定
if _setLabel
-_label = _setLabel
button= _label
main.pug
include _btn.pug
-var _setLabel = '更新'
include _btn.pug
main.html
<button>ボタン</button>
<button>更新</button>
mixinと連想配列を組み合わせる
記事データとかにつかえる。JSONデータで外部化してGulpで読み込む方法も良い。
article.pug
-
var data = [
{ id: 1, title: 'title1' },
{ id: 2, title: 'title2' },
{ id: 3, title: 'title3' }
]
mixin set_list(_id, _title)
li #{_id} / #{_title}
ul
each val in data
+set_list(val.id, val.title)
article.html
<ul>
<li>1 / title1</li>
<li>2 / title2</li>
<li>3 / title3</li>
</ul>
includeしたメニューの状態をページによって切り替える
よくあるシチュエーション。ifは三項演算子（条件式 ? 値1 : 値2）で書ける。
_menu.pug
ul.menu
li(class= page == 'index' ? 'is-selected' : '')
a(href="/index.html") トップ
li(class= page == 'about' ? 'is-selected' : '')
a(href="/about.html") 概要
li(class= page == 'contact' ? 'is-selected' : '')
a(href="/contact.html") お問い合わせ
index.pug
-var page = 'index'
include _menu.pug
index.html
<ul class="menu">
<li class="is-selected">
<a href="/index.html">トップ</a>
</li>
<li>
<a href="/about.html">概要</a>
</li>
<li>
<a href="/contact.html">お問い合わせ</a>
</li>
</ul>
参考資料
公式サイト
https://pugjs.org/api/getting-started.html
公式のGitHub
https://github.com/pugjs/pug