Pug記法

Pug（以前はJadeと呼ばれていました）は、HTMLを記述するためのテンプレートエンジンの一つです。インデント（字下げ）を使ってHTMLの構造を表現することで、簡潔に記述できる点が最大の特徴です。閉じタグが不要なため、HTMLの記述量を大幅に削減でき、可読性も向上します。

Pugの基本

インデントによる構造表現: Pugでは、HTMLのネスト（入れ子）構造をインデントで表現します。親要素より一段深くインデントされた要素は、その親要素の子要素として扱われます。
タグ名: 要素はタグ名で記述します。例: div、p、h1など。
属性: 属性はタグ名の後に続けて記述します。括弧()で囲む方法と、スペース区切りで記述する方法があります。
テキスト: 要素の内容（テキスト）は、タグ名の後にスペースを空けて記述します。

主要な構文要素

要素（タグ）

例

div
  p Hello, Pug!

これは、以下のようなHTMLに変換されます。

<div>
  <p>Hello, Pug!</p>
</div>

属性

括弧()を使った記述:

a(href="https://example.com" class="link") Example

これは、以下のようなHTMLに変換されます。

<a href="https://example.com" class="link">Example</a>

スペース区切りを使った記述（属性が一つだけの場合などに便利）:

input type="text"

これは、以下のようなHTMLに変換されます。

<input type="text">

クラスとID

クラス: .（ドット）を使用します。

div.container
  p.text-red This is red text.

これは、以下のようなHTMLに変換されます。

<div class="container">
  <p class="text-red">This is red text.</p>
</div>

ID: #（シャープ）を使用します。

div#header
  h1#title My Website

これは、以下のようなHTMLに変換されます。

<div id="header">
  <h1 id="title">My Website</h1>
</div>

テキスト

要素の内容としてテキストを記述:

p This is a paragraph.

これは、以下のようなHTMLに変換されます。

<p>This is a paragraph.</p>

パイプ|を使って複数行のテキストを記述:

p
  | This is a long
  | paragraph that spans
  | multiple lines.

これは、以下のようなHTMLに変換されます。

<p>
This is a long
paragraph that spans
multiple lines.</p>

変数

Pugでは、JavaScriptの変数を埋め込むことができます。

- var name = "John";
p Hello, #{name}!

これは、以下のようなHTMLに変換されます。

<p>Hello, John!</p>

制御構文

if文:

- var showMessage = true;
if showMessage
  p The message is shown.
else
  p The message is hidden.

each文（ループ）:

ul
  each item in items
    li #{item}

itemsが['Apple', 'Banana', 'Orange']の場合、以下のようなHTMLに変換されます。

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

インクルード

他のPugファイルをインクルードできます。

include header.pug
main
  p Content
include footer.pug

まとめ

Pugは、簡潔で可読性の高いHTML記述を可能にする強力なテンプレートエンジンです。インデントベースの構文に慣れるまでは少し戸惑うかもしれませんが、慣れてしまえば効率的にHTMLを記述できるようになります。上記で説明した基本的な構文要素を理解することで、Pugを使った開発をスムーズに進めることができるでしょう。さらに詳しい情報は、Pugの公式ドキュメントを参照することをおすすめします。

Pugの基本

主要な構文要素

要素（タグ）

属性

クラスとID

テキスト

コメント

変数

制御構文

インクルード

まとめ