Jade（Pug）の記述方法
Jade（現在はPug）はインデントを使用してHTMLを簡潔に記述できるテンプレートエンジンです。以下は基本的な記述例と、さまざまなHTML要素の書き方です。
基本構文
HTMLタグの書き方
doctype html
html
head
title My Website
body
h1 Hello World
p This is a paragraph.
結果
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
属性の指定
属性の記述方法
a(href='https://example.com' target='_blank') Visit Example
結果
<a href="https://example.com" target="_blank">Visit Example</a>
クラスとIDの指定
クラスとIDを簡潔に指定
div#main.container
h1.title Page Title
p.subtitle Welcome to my page!
結果
<div id="main" class="container">
<h1 class="title">Page Title</h1>
<p class="subtitle">Welcome to my page!</p>
</div>
ループと条件分岐
ループ
ul
each item in ['Apple', 'Banana', 'Cherry']
li= item
結果
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
条件分岐
if user
p Welcome back, #{user.name}!
else
p Please log in.
結果
ユーザーが存在する場合:
<p>Welcome back, John!</p>
ユーザーが存在しない場合:
<p>Please log in.</p>
ネスト構造
子要素をインデントで記述
ul
li Item 1
ul
li Sub-item 1.1
li Sub-item 1.2
li Item 2
結果
<ul>
<li>Item 1
<ul>
<li>Sub-item 1.1</li>
<li>Sub-item 1.2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
テキストと変数の組み合わせ
変数の埋め込み
p Hello, #{username}!
結果
<p>Hello, John!</p>
フォームの記述
基本的なフォーム
form(action='/submit' method='post')
label(for='name') Name:
input#name(type='text' name='name')
button(type='submit') Submit
結果
<form action="/submit" method="post">
<label for="name">Name:</label>
<input id="name" type="text" name="name">
<button type="submit">Submit</button>
</form>
コメント
HTMLコメント
// This is a comment
出力されるHTML
<!-- This is a comment -->
Jade内でのコメント（HTMLに出力されない）
//- This comment will not appear in the HTML
その他の要素
画像の挿入
img(src='/images/example.png' alt='Example Image')
リンクリスト
nav
ul
li: a(href='/home') Home
li: a(href='/about') About
li: a(href='/contact') Contact
結果
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
これらの例を使うことで、Jade（Pug）の記述が簡単に理解でき、様々な場面に対応できます。Jadeの簡潔な記述で効率的にテンプレートを作成しましょう！