0%

Programmingプログラミングナレッジ

Posted:2018.06.11

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

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】