前回記事「Pugで覚えておくと便利なコーディング方法まとめ（機能編）」ではPugで使える便利な機能をまとめていきました。今回はPugにおいて知っておくと使える記法について備忘録として残しておきたいと思います。Pugには独特なコーディングルールが存在するので慣れるまでは大変ですが是非覚えるようにしておいきたいですね。  

パイプライン（|）を使ったインライン要素と改行タグの書き方

Pugでは要素ごとに改行して記述するのですが、ブロックレベル要素の中に複数のインライン要素が混ざっている場合はかなりややこしくなります、そこでパイプラインを使うことで、複数行にまたがって記述することができます。これで見やすくなりますね。改行タグの使用時も同じで、パイプラインを使うことで次の行に続けて書けることができます。 インライン要素を行を分けて記述する場合

p ブロックレベル要素です 
 span このテキストは1行内に収まります。
  | Pugでは2行目で改行していますが、インラインとして扱われます。
  | Pugでは3行目で改行していますが、インラインとして扱われます。

// 出力結果
<p>
 <span>このテキストは1行内に収まります。Pugでは2行目で改行していますが、インラインとして扱われます。Pugでは3行目で改行していますが、インラインとして扱われます。</span>
</p>

  改行タグ使用時の書き方

p テキストテキストテキストテキスト
 br
  | 改行後のテキスト

<!-- 出力結果 -->
<p>テキストテキストテキストテキスト<br>改行後のテキスト</p>

   

ドット（.）を使ってHTMLをそのまま貼り付ける

インラインの埋め込みコードなどはそのまま貼り付けたいですよね、そんな時には包括する要素の直後にドットを入れて、入れ子になるようにそのままHTMLを記述します。こうすることで要素にインラインの埋め込みコードが内包されるようになります。

div.
  <iframe src="https://www.youtube.com/embed/**************" ……></iframe>

// 出力結果
<div>
 <iframe src="https://www.youtube.com/embed/**************" ……></iframe>
</div>

  このドットを使った方法は、scriptタグの中身や、タグ内のテキストにも有効になります。パイプライン記号を使ったものと比べて、こちらの方が一般的によく用いられている方法のようです。

script.
 const message = 'hogehoge';
 alert(message);

// 出力結果
<script>
 const message = 'hogehoge';
 alert(message);
</script>

p.
 タグ内テキストタグ内テキストタグ内テキストタグ内テキスト

// 出力結果
<p>タグ内テキストタグ内テキストタグ内テキストタグ内テキスト</p>

   

イコール（=）を使ったHTML記号のエスケープ

XSS（クロスサイトスクリプティング）対策のためにHTMLで使う特殊文字をエスケープする場合は要素の直後にイコールをつけて、エスケープされる範囲のテキストをクォーテーションマークで囲います。するとその中に特殊文字が含まれていた場合はその文字がエスケープされて出力されます。   エスケープをせずにそのまま出力する場合には、改行してエクスクラメーションマーク（!）を入れるとエスケープされずにそのまま出力されます。 文字をエスケープして出力

p= '<や>などの特殊文字をエスケープする'

// 出力結果 
<p>&lt;や&gt;などの特殊文字をエスケープする</p>

  エスケープなしで出力

p
 != '<や>などの特殊文字をエスケープせずに出力'

// 出力結果
<p><や>などの特殊文字をエスケープせずに出力</p>

   

Pugで使えるコメント

Pugでコメントを使う場合にはjavascriptと同じくスラッシュを2回続けて書きます。そのあとにマイナスを入れるとHTMLに出力されないようにすることもできます。

// HTMLに出力される
//- HTMLに出力されない

  まだまだ慣れないのですが、ちょっとずつ覚えていきたいと思います。。   （参考） 覚えるのはこれだけ！Pug(Jade)のよく使う9つの書き方 Pug Getting Started