HTMLを書くためのテンプレートエンジン「Pug」を使えば、マークアップを高速化でき、メンテナンスもしやすくなります。
今回は、そんなPugの基本的な書き方をまとめました。
Pugの導入方法はこちらをご覧ください。
Pugの基本構造
例文
doctype
html(lang='ja')
header
title Site Title
body
header
h1 : img(src='logo.png')
main
div.content
footer
こんな感じでsassっぽく書いていきます。
階層がインデントで表現されているので分かりやすく、閉じタグが必要ないのも便利ですね。
これだけでも大体の書き方は分かりますが、いろいろな要素の書き方を詳しく見ていきましょう。
タグ
まずは基本的なタグの書き方です。
各行の先頭にタグを書きます。インデントを付けるとネスト（入れ子）されます。
Pug
ul li Item A li Item B li Item C
HTML
<ul> <li>Item A</li> <li>Item B</li> <li>Item C</li> </ul>
画像を入れるだけのような単純なネストの時には、次のようにコロン「:」を使って1行で書けば、スペースを節約することができます。
Pug
a : img
HTML
<a><img/></a>
属性
タグに付ける属性は括弧で表します。
Pug
a(class='button' href='google.com') Google
HTML
<a class="button" href="google.com">Google</a>
複数の属性を付けるときは、改行して見やすくすることもできます。
Pug
input( type='checkbox' name='agreement' checked )
HTML
<input type="checkbox" name="agreement" checked="checked" />
classとID
classとIDはcssのようにドットやシャープで表せます。
Pug
a.button | | a#main-link
HTML
<a class="button"></a> <a id="main-link"></a>
さらに、divタグを使う場合はタグを省略してclassやIDだけで表すことができます。
Pug
.content #content
HTML
<div class="content"></div> <div id="content"></div>
上記を組み合わせるとこんな感じで書けます。
Pug
div#foo.bar(data-bar='baz')
HTML
<div class="bar" id="foo" data-bar="baz"></div>
コメント
コメントの付け方はJavaScriptと同じで、行頭にダブルスラッシュ「//」を付けます。
htmlに反映させない場合はそれにハイフン「-」を加えるだけ。
ブロックコメントも同じ方法で、インデントを付けるだけです。
Pug
// コメント
//- 見せないコメント
//
ブロックコメント
2行目
//-
見せないブロックコメント
2行目
HTML
<!-- コメント-->
<!-- ブロックコメント
2行目-->
条件付きコメント
要するにこういうやつですね。
HTML
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
これは次のようには書けません。
Pug（間違い）
//
[if lt IE 9]>
script(src='html5shiv.js')
<![endif]
訳の分からないことに…
こういうときは、htmlの構文でそのまま書けばOKです。「<」で始まる行はそのままのテキストが出力されるようになっているからです。
プレーンテキスト
プレーンテキスト、つまり文字列を処理せずそのまま表示させたい場合は、以下の4つの書き方があります。
インライン
タグの後ろにスペースを1つ空けて書いた文字はすべてテキストコンテンツになります。
Pug
p これは<em>テキスト</em>コンテンツです。
HTML
<p>これは<em>テキスト</em>コンテンツです。 </p>
リテラルHTML
「<」で始まる行もプレーンテキストとして扱われます。要するにHTMLで書いた部分はそのまま表示されるってことですね。
条件付きコメントなど、他の書き方では難しいときに活躍する書き方です。
Pug（HTMLと同じ）
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
パイプライン
行頭にパイプライン「|」を付ける方法です。プレーンテキストをパイプラインで連結するイメージですね。タグと混在させることもできます。
Pug
p | これはテキストコンテンツです。 | こんな風に書いても改行されず連結されます。
HTML
<p>これはテキストコンテンツです。 こんな風に書いても改行されずに連結されます。</p>
ブロック
タグの直後にドット「.」を追加すると、インデントしたその下の要素はプレーンテキストになります。scriptを書くときなどに使う書き方です。
Pug
script.
if (usingPug)
console.log('you are awesome')
else
console.log('use pug')
HTML
<script>
if (usingPug)
console.log('you are awesome')
else
console.log('use pug')
</script>
ドット単体でも使えます。
Pug
div
p こんな書き方もできます。
br
.
これはdiv直下に入るテキストです。
HTML
<div> <p>こんな書き方もできます。<br/>これはdiv直下に入るテキストです。</p></div>
スペース問題
要素間のスペースは除去されることに注意しましょう。
Pug
// OK p I like <em>cucumbers</em> very much. // NG p | I like em cucumbers | very much.
HTML
<!-- OK--> <p>I like <em>cucumbers</em> very much.</p> <!-- NG--> <p>I like<em>cucumbers</em>very much.
右が空白の「|」をつなぐと改行されます。
Pug
p | I like | em cucumbers | | very much.
HTML
<p> I like <em>cucumbers</em> very much. </p>
コード
Pugの大きな特徴の一つは、JavaScriptを使えることです。
Pug内に記述したJavaScriptのコードをHTMLには出力しないで使うこともあれば、そのまま出力できると便利なときもありますね。そんなコードの記述方法は以下の通り。
「-」出力しない
HTMLに出力しないコードを書くときは「-」で始めます。ブロック表記もいけます。
Pug
//- Inline
- for (var x = 0; x < 3; x++)
li item
//- Block
-
var list = ["Uno", "Dos", "Tres",
"Cuatro", "Cinco", "Seis"]
each item in list
li= item
HTML
<li>item</li> <li>item</li> <li>item</li> <li>Uno</li> <li>Dos</li> <li>Tres</li> <li>Cuatro</li> <li>Cinco</li> <li>Seis</li>
例文で実行しているeach文はPugのメソッドで、以下の記事で詳しく説明しています。
「=」出力する（エスケープあり）
処理結果をHTMLに出力するときは「=」で始めます。HTMLエスケープされた結果が出力されます。
「=」を要素の属性としてくっつければ、インラインでコードを記述することもできます。上の例でもさらっと使っていました。
Pug
p = 'This code is <escaped>!' p= 'This code is' + ' <escaped>!' //- "="を忘れると、そのままのテキストとして扱われる p 'This code is' + ' <escaped>!'
HTML
<p>This code is <escaped>!</p> <p>This code is <escaped>!</p> <p>'This code is' + ' <escaped>!'</p>
「!=」エスケープせずに出力する
エスケープしないときは上の「=」の代わりに「!=」を使うだけです。
Pug
p!= 'This code is' + ' <strong>not</strong> escaped!'
HTML
<p>This code is <strong>not</strong> escaped!</p>
ユーザー入力をエスケープせずに出力させると危険なので、そこだけ注意。
まとめ
以上がPugに登場する基本的な要素です。
これだけ押さえておけば、とりあえずPugでコーディングすることが可能です。まずはガシガシ打ち込んで試してみましょう！
コメント