HTMLのコーディングを楽にしてくれるNode.jsパッケージを紹介します。
Pug
https://pugjs.org/api/getting-started.html
今回使用したNode.jsパッケージのバージョンは下記の通りです。
Node.jsパッケージ
gulp: 4.0.0
gulp-pug: 4.0.1
Pugとは
PugはHTMLを効率よくコーディングするためのテンプレートエンジンです。もともとはJadeという名前で呼ばれていました。
Pugのインストール
Node.js をインストールしてください。次に、package.jsonがあるフォルダに移動して、下記のコマンドを実行してください。
$ npm install
PugからHTMLに変換する
*.pugファイルを*.htmlファイルに変換するには、下記のコマンドを実行してください。
$ gulp pug
基本的な使い方
<>カッコなしで記述ができる
Pug
p Pug Test
HTML
<p>Pug Test</p>
インデントを付けると入れ子になる
Pug
body
p Pug Test
HTML
<body>
<p>Pug Test</p>
</body>
属性は()カッコを付ける
Pug
a(href="index.html") index link
HTML
<a href="index.html">index link</a>
ID属性は#を付ける
Pug
#elmId01
HTML
<div id="elmId01"></div>
クラス属性は.を付ける
Pug
.cln01
HTML
<div class="cln01"></div>
最初の文字列はタグとして変換される
Pug
p
test01 test01
test02 test02
test03 test03
HTML
<p>
<test01>test01</test01>
<test02>test02</test02>
<test03>test03</test03>
</p>
|を使うと改行になる
Pug
p
| test01 test01
| test02 test02
| test03 test03
HTML
<p>
test01 test01
test02 test02
test03 test03
</p>
JavaScriptのオブジェクトのようにスタイルを指定できる
Pug
p(style={"color":"red","font-weight":"bold"}) test01
HTML
<p style="color:red;font-weight:bold;">test01</p>
JavaScriptの配列のように複数のクラス属性を指定できる
Pug
#elmId01(class=["cln01","cln02","cln03"])
HTML
<div class="cln01 cln02 cln03" id="elmId01"></div>
=を使うと文字列がエスケープされる
Pug
p= "<script>alert('XSS');</script>"
HTML
<p><script>alert('XSS');</script></p>
disabledをbooleanで指定することができる
Pug
input#elmId101(type="button" value="test01" disabled=true)
HTML
<input id="elmId101" type="button" value="test01" disabled>
checkedをbooleanで指定することができる
Pug
label(for="elmId021") test021
input#elmId021(type="radio" name="test02" value="test021" checked=false)
label(for="elmId022") test022
input#elmId022(type="radio" name="test02" value="test022" checked=true)
HTML
<label for="elmId021">test021</label>
<input id="elmId021" type="radio" name="test02" value="test021">
<label for="elmId022">test022</label>
<input id="elmId022" type="radio" name="test02" value="test022" checked>
HTMLに出力されないコメント
Pug
//- Comment01
#elmId01
HTML
<div id="elmId01"></div>
HTMLに出力されるコメント
Pug
// Comment02
#elmId02
HTML
<!-- Comment02-->
<div id="elmId02"></div>
JavaScriptのように変数を-で指定できる
Pug
- var url = "index.html";
a(href=url) index link
HTML
<a href="index.html">index link</a>
制御文
case~when
Pug
- var url = "index.html";
case url
when "index.html"
p index.html
when "sub.html"
p sub.html
default
p default.html
HTML
<p>index.html</p>
each, if~else
Pug
- var langList = [{code:"en",name:"English"},{code:"jp",name:"Japanese"},{code:"zh",name:"Chinese"}];
- var defaultLang = "jp";
each lang in langList
if lang.code == defaultLang
li language:#{lang.name}(default)
else
li language:#{lang.name}
HTML
<li>language:English</li>
<li>language:Japanese(default)</li>
<li>language:Chinese</li>
#{}で変数を出力することができます。
includeで*.pugファイルを追加できる
Pug（head.pug）
meta(charset="utf-8")
title Pug Test
Pug（index.pug）
doctype html
html(lang="ja")
head
include head.pug
body
p Pug Test
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pug Test</title>
</head>
<body>
<p>Pug Test</p>
</body>
</html>
extendsで*.pugファイルを拡張できる
Pug（template.pug）
doctype html
html(lang="ja")
head
meta(charset="utf-8")
title Pug Test
body
p Pug Test
block content
Pug（index.pug）
extends template.pug
block content
p extend content
block prepend content
p extend prepend content
block append content
p extend append content
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pug Test</title>
</head>
<body>
<p>Pug Test</p>
<p>extend prepend content</p>
<p>extend content</p>
<p>extend append content</p>
</body>
</html>
blockを使用した箇所に拡張するタグの纏まり（ブロック）を追加できます。block prependはブロックの前に追加します。block appendはブロックの後に追加します。
mixinで定義したブロックを追加できる
Pug
mixin content1
P mixin content1
mixin content2(label)
P mixin content2 #{label}
doctype html
html(lang="ja")
head
meta(charset="utf-8")
title Pug Test
body
p Pug Test
+content1
+content2('arg2')
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pug Test</title>
</head>
<body>
<p>Pug Test</p>
<P>mixin content1</P>
<P>mixin content2 arg2</P>
</body>
</html>
+でmixinのブロックを追加します。content2(label)のように引数を指定することもできます。
以上です。