Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Pug 2018.06.11

Pugで覚えておくと便利なコーディング方法まとめ(記法編)

Tags: ,,
最終更新日:Update

前回記事「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

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?