HTMLを書くためのテンプレートエンジン「Pug」を使えば、マークアップを高速化でき、メンテナンスもしやすくなります。

今回は、そんなPugの基本的な書き方をまとめました。

  1. 基本構造
  2. タグ
  3. 属性
  4. コメント「//」「//-」
  5. プレーンテキスト「 」「<」「|」「.」
  6. コード「-」「=」「!=」

Pugの導入方法はこちらをご覧ください。

GUIコンパイラ「Prepros」を利用して手軽にPugを始める方法。より効率的なHTMLコーディングをPugで。

Pugの基本構造

例文

doctype
html(lang='ja')
  header
    title Site Title
  body
    header
      h1 : img(src='logo.png')
    main
      div.content
    footer

こんな感じでsassっぽく書いていきます。

階層がインデントで表現されているので分かりやすく、閉じタグが必要ないのも便利ですね。

これだけでも大体の書き方は分かりますが、いろいろな要素の書き方を詳しく見ていきましょう。

タグ

まずは基本的なタグの書き方です。

各行の先頭にタグを書きます。インデントを付けるとネスト(入れ子)されます。

ul
  li Item A 
  li Item B 
  li Item C 
<ul>
  <li>Item A</li> 
  <li>Item B</li>  
  <li>Item C</li>
</ul>

画像を入れるだけのような単純なネストの時には、次のようにコロン「:」を使って1行で書けば、スペースを節約することができます。

a : img
<a><img/></a>

Tags – Pug

属性

タグに付ける属性は括弧で表します。

a(class='button' href='google.com') Google
<a class="button" href="google.com">Google</a>

複数の属性を付けるときは、改行して見やすくすることもできます。

input(
  type='checkbox'
  name='agreement'
  checked
)
<input type="checkbox" name="agreement" checked="checked" />

classとID

classとIDはcssのようにドットやシャープで表せます。

a.button
|
|
a#main-link
<a class="button"></a>
<a id="main-link"></a>

さらに、divタグを使う場合はタグを省略してclassやIDだけで表すことができます。

.content
#content
<div class="content"></div>
<div id="content"></div>

上記を組み合わせるとこんな感じで書けます。

div#foo.bar(data-bar='baz')
<div class="bar" id="foo" data-bar="baz"></div>

Attributes – Pug

コメント

コメントの付け方はJavaScriptと同じで、行頭にダブルスラッシュ「//」を付けます。htmlに反映させない場合はそれにハイフン「-」を加えるだけ。ブロックコメントも同じ方法で、インデントを付けるだけです。

// コメント
//- 見せないコメント
//
ブロックコメント
2行目
//-
見せないブロックコメント
2行目
<!-- コメント-->
<!-- ブロックコメント
2行目-->

条件付きコメント

要するにこういうやつですね。

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

これは次のようには書けません。

//
[if lt IE 9]>
script(src='html5shiv.js')
<![endif]

訳の分からないことに…

こういうときは、htmlの構文でそのまま書けばOKです。「<」で始まる行はそのままのテキストが出力されるようになっているからです。

Comments – Pug

プレーンテキスト

プレーンテキスト、つまり文字列を処理せずそのまま表示させたい場合は、以下の4つの書き方があります。

1. インライン

タグの後ろにスペースを1つ空けて書いた文字はすべてテキストコンテンツになります。

p これは<em>テキスト</em>コンテンツです。
<p>これは<em>テキスト</em>コンテンツです。 </p>

2. リテラルHTML

「<」で始まる行もプレーンテキストとして扱われます。要するにHTMLで書いた部分はそのまま表示されるってことですね。

条件付きコメントなど、他の書き方では難しいときに活躍する書き方です。

条件付きコメント

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

3. パイプライン

行頭にパイプライン「|」を付ける方法です。プレーンテキストをパイプラインで連結するイメージですね。タグと混在させることもできます。

p
  | これはテキストコンテンツです。
  | こんな風に書いても改行されず連結されます。
<p>これはテキストコンテンツです。 こんな風に書いても改行されずに連結されます。</p>

4. ブロック

タグの直後にドット「.」を追加すると、インデントしたその下の要素はプレーンテキストになります。scriptを書くときなどに使う書き方です。

script.
  if (usingPug)
    console.log('you are awesome')
  else
    console.log('use pug')
<script>
  if (usingPug)
    console.log('you are awesome')
  else
    console.log('use pug')
</script>

ドット単体でも使えます。

div
  p こんな書き方もできます。
  br
  .
    これはdiv直下に入るテキストです。
<div>
  <p>こんな書き方もできます。<br/>これはdiv直下に入るテキストです。</p></div>

スペース問題

要素間のスペースは除去されることに注意しましょう。

// OK
p I like <em>cucumbers</em> very much.
// NG
p
  | I like
  em cucumbers
  | very much.
<!-- OK-->
<p>I like <em>cucumbers</em> very much.</p>
<!-- NG-->
<p>I like<em>cucumbers</em>very much. 

右が空白の「|」をつなぐと改行されます。

p
  | I like
  |
  em cucumbers
  |
  | very much.
<p>
  I like
  <em>cucumbers</em>
  very much.
</p>

Plain Text – Pug

コード

Pugの大きな特徴の一つは、JavaScriptを使えることです。

Pug内に記述したJavaScriptのコードをHTMLには出力しないで使うこともあれば、そのまま出力できると便利なときもありますね。そんなコードの記述方法は以下の通り。

「-」出力しない

HTMLに出力しないコードを書くときは「-」で始めます。ブロック表記もいけます。

//- 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
<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>

「=」出力する(エスケープあり)

処理結果をHTMLに出力するときは「=」で始めます。HTMLエスケープされた結果が出力されます。

「=」を要素の属性としてくっつければ、インラインでコードを記述することもできます。上の例でもさらっと使っていました。

p
  = 'This code is <escaped>!'
p= 'This code is' + ' <escaped>!'
//- "="を忘れると、そのままのテキストとして扱われる
p 'This code is' + ' <escaped>!' 
<p>This code is &lt;escaped&gt;!</p>
<p>This code is &lt;escaped&gt;!</p>
<p>'This code is' + ' <escaped>!'</p>

「!=」エスケープせずに出力する

エスケープしないときは上の「=」の代わりに「!=」を使うだけです。

p!= 'This code is' + ' <strong>not</strong> escaped!'
<p>This code is <strong>not</strong> escaped!</p>

ユーザー入力をエスケープせずに出力させると危険なので、そこだけ注意。

Code – Pug

まとめ

以上がPugに登場する基本的な要素です。

これだけ押さえておけば、とりあえずPugでコーディングすることが可能です。まずはガシガシ打ち込んで試してみましょう!