テックコード -web関連の情報サイト- 
こんにちは、今日はHTMLテンプレートエンジン「Pug」について詳しく解説します。Pugは、かつて「Jade」と呼ばれていた、シンプルで強力なテンプレートエンジンです。HTMLのコードをより簡潔に書くために設計されており、特にNode.jsのアプリケーションで広く使用されています。
Pugの基本
Pugを使うと、HTMLのコードをインデントベースの構文で記述できます。これにより、タグのネストや属性の管理が直感的になります。
インストール方法
Pugを使用するためには、まずNode.jsとnpmがインストールされている必要があります。次に、プロジェクトにPugをインストールします。
npm install pug
簡単な例
以下に、Pugで書かれた簡単なテンプレートと、それが生成するHTMLを示します。
//- index.pug
doctype html
html(lang="en")
head
title Pug Example
body
h1 Hello, Pug!
p This is a paragraph.
上記のPugコードは、次のようなHTMLに変換されます。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pug Example</title>
</head>
<body>
<h1>Hello, Pug!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Pugの構文
Pugの構文はシンプルで、インデントによって要素の階層を示します。タグ名の後に属性を括弧で囲んで記述し、テキストはタグ名の後にスペースを空けて記述します。
要素と属性
Pugでは、要素とその属性を次のように記述します。
a(href="https://example.com" target="_blank") Click here
これは次のHTMLに変換されます。
<a href="https://example.com" target="_blank">Click here</a>
クラスとID
クラスやIDはCSSセレクタのように記述できます。
div.container
p#paragraph This is a paragraph with an ID.
これは次のHTMLに変換されます。
<div class="container">
<p id="paragraph">This is a paragraph with an ID.</p>
</div>
ネスト
要素のネストはインデントで示します。インデントにはスペースかタブを使用しますが、一貫性が重要です。
ul
li Item 1
li Item 2
li Item 3
これは次のHTMLに変換されます。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Pugの特徴と利点
1. 読みやすさと書きやすさ
Pugのインデントベースの構文は、コードを読みやすくし、タグの閉じ忘れなどのエラーを減少させます。
2. 短縮構文
Pugでは、簡潔な記述が可能です。例えば、divタグはタグ名を省略してクラスやIDだけを記述できます。
.container
#main.content
p This is a paragraph.
これは次のHTMLに変換されます。
<div class="container">
<div id="main" class="content">
<p>This is a paragraph.</p>
</div>
</div>
3. ループと条件分岐
Pugは、テンプレート内でループや条件分岐を簡単に行うことができます。
- var items = ['Item 1', 'Item 2', 'Item 3']
ul
each item in items
li= item
これは次のHTMLに変換されます。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
実際の使用例
PugはNode.jsのExpressフレームワークと組み合わせて使うことが多いです。以下は、ExpressアプリケーションでPugを使用する例です。
const express = require('express');
const app = express();
app.set('view engine', 'pug');
app.get('/', (req, res) => {
res.render('index', { title: 'Hey', message: 'Hello there!' });
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
//- views/index.pug
doctype html
html
head
title= title
body
h1= message
この例では、/にアクセスすると次のHTMLが生成されます。
<!DOCTYPE html>
<html>
<head>
<title>Hey</title>
</head>
<body>
<h1>Hello there!</h1>
</body>
</html>
まとめ
Pugは、HTMLテンプレートを簡潔かつ直感的に記述するための強力なツールです。そのシンプルな構文と柔軟性により、Web開発の効率を大幅に向上させます。Node.jsやExpressとの相性も良く、多くのプロジェクトで利用されています。Pugを学び、活用することで、よりクリーンでメンテナンスしやすいコードを書けるようになるでしょう。
ぜひ、Pugを使ってあなたのWebプロジェクトを次のレベルに引き上げてください！
