概要
今日、友人からpugというものについて聞いたので今回はそれについてまとめようと思います。
pugとはなんなのか
PugとはHTMLをより簡潔かつ効率的に記述できるテンプレートエンジン（動的なコンテンツを生成する際に使用されるプログラム）です。テンプレートエンジンは、静的なコンテンツ（HTML、CSS、JavaScriptなど）を、動的なデータ（データベースから取得した情報など）と組み合わせて表示することができます。これにより、同じ静的なコンテンツを使用して、様々な動的なコンテンツを生成することができます。
以下にpugの特徴をまとめたいと思います。
pugの特徴
- タグの省略
HTMLでは、タグの開始タグと終了タグの両方を記述する必要があります。
しかし、Pugでは、タグの終了タグを省略することができます。例えば、以下のHTMLコードをPugに変換すると、以下のようになります。
HTML.
<div class="container">
<h1>Welcome to my website</h1>
<p>This is a paragraph</p>
</div>
pug.
.container
h1 Welcome to my website
p This is a paragraph
このようにソースコードを大幅に短縮することが可能になります。cssに少し似ていますね。
- インデントによるネストの表現
HTMLでは、タグをネストする場合、開始タグと終了タグの位置を合わせる必要があります。しかし、Pugでは、インデントによってネストの深さを表現します。これにより、可読性が向上し、記述量が減ります。例えば、以下のHTMLコードをPugに変換すると、以下のようになります。
HTML .
.container
h1 Welcome to my website
ul
li Item 1
li Item 2
pug.
.container
h1 Welcome to my website
ul
li Item 1
li Item 2
タグを閉じる必要ないので便利ですね。（どこで終わっているのかわからなくなりそうだけど）
- 変数の展開
Pugでは、変数を使用してテンプレートを動的に生成することができます。変数を展開する場合、${}を使用します。例えば、以下のHTMLコードをPugに変換すると、以下のようになります。
HTML.
<p>Hello, John!</p>
pug.
p Hello, #{name}!
このようにpugではHTMLでは行えない変数の展開を行うことができます。
- コメントの書き方
HTMLでは、コメントをで囲みます。しかし、Pugでは、行頭に//を記述することでコメントを表現します。例えば、以下のHTMLコードをPugに変換すると、以下のようになります。
HTML.
<div class="container">
<!-- This is a comment -->
<h1>Welcome to my website</h1>
</div>
pug.
.container
// This is a comment
h1 Welcome to my website
自分はpugの記述法の方が慣れているのでありがたいですね。
まとめ
タグの表記を短縮化できたり使い方によってはとても便利な機能だということがわかりますね。
用途によって使い分けていこうと思います。
次の学習でも頑張ります。