[Pug] HTMLを効率よくコーディングする

HTMLのコーディングを楽にしてくれるNode.jsパッケージを紹介します。

Pug
https://pugjs.org/api/getting-started.html

今回使用したNode.jsパッケージのバージョンは下記の通りです。

```Markdown:Node.jsパッケージ
gulp: 4.0.0
gulp-pug: 4.0.1
```

# Pugとは
PugはHTMLを効率よくコーディングするためのテンプレートエンジンです。もともとはJadeという名前で呼ばれていました。

# Pugのインストール
Node.js をインストールしてください。次に、package.jsonがあるフォルダに移動して、下記のコマンドを実行してください。

```Bash:
$ npm install
```

# PugからHTMLに変換する
`*.pug`ファイルを`*.html`ファイルに変換するには、下記のコマンドを実行してください。

```Bash:
$ gulp pug
```

## 基本的な使い方

[ソースファイルはこちら](https://github.com/yunbow/sample-pug/)

### `<>`カッコなしで記述ができる
```Pug:Pug
p Pug Test
```
```HTML:HTML
<p>Pug Test</p>
```

### インデントを付けると入れ子になる
```Pug:Pug
body
  p Pug Test
```
```HTML:HTML
<body>
  <p>Pug Test</p>
</body>
```

### 属性は`()`カッコを付ける
```Pug:Pug
a(href="index.html") index link
```
```HTML:HTML
<a href="index.html">index link</a>
```

### ID属性は`#`を付ける
```Pug:Pug
#elmId01
```
```HTML:HTML
<div id="elmId01"></div>
```

### クラス属性は`.`を付ける
```Pug:Pug
.cln01
```
```HTML:HTML
<div class="cln01"></div>
```

### 最初の文字列はタグとして変換される
```Pug:Pug
p
  test01 test01 
  test02 test02 
  test03 test03
```
```HTML:HTML
<p>
  <test01>test01</test01>
  <test02>test02</test02>
  <test03>test03</test03>
</p>
```

### `|`を使うと改行になる
```Pug:Pug
p
  | test01 test01 
  | test02 test02 
  | test03 test03 
```
```HTML:HTML
<p>
  test01 test01 
  test02 test02 
  test03 test03 
</p>
```

### JavaScriptのオブジェクトのようにスタイルを指定できる
```Pug:Pug
p(style={"color":"red","font-weight":"bold"}) test01
```
```HTML:HTML
<p style="color:red;font-weight:bold;">test01</p>
```

### JavaScriptの配列のように複数のクラス属性を指定できる
```Pug:Pug
#elmId01(class=["cln01","cln02","cln03"])
```
```HTML:HTML
<div class="cln01 cln02 cln03" id="elmId01"></div>
```

### `=`を使うと文字列がエスケープされる
```Pug:Pug
p= "<script>alert('XSS');</script>"
```
```HTML:HTML
<p>&lt;script&gt;alert('XSS');&lt;/script&gt;</p>
```

### `disabled`をbooleanで指定することができる
```Pug:Pug
input#elmId101(type="button" value="test01" disabled=true)
```
```HTML:HTML
<input id="elmId101" type="button" value="test01" disabled>
```

### `checked`をbooleanで指定することができる
```Pug: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: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:Pug
//- Comment01
#elmId01
```
```HTML:HTML
<div id="elmId01"></div>
```

### HTMLに出力されるコメント
```Pug:Pug
// Comment02
#elmId02
```
```HTML:HTML
<!-- Comment02-->
<div id="elmId02"></div>
```

### JavaScriptのように変数を`-`で指定できる
```Pug:Pug
- var url = "index.html";
a(href=url) index link
```
```HTML:HTML
<a href="index.html">index link</a>
```

## 制御文
### `case`~`when`
```Pug:Pug
- var url = "index.html";
case url
when "index.html"
  p index.html
when "sub.html"
  p sub.html
default
  p default.html
```
```HTML:HTML
<p>index.html</p>
```

### `each`, `if`~`else`
```Pug: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:HTML
<li>language:English</li>
<li>language:Japanese(default)</li>
<li>language:Chinese</li>
```
`#{}`で変数を出力することができます。

### `include`で`*.pug`ファイルを追加できる
```Pug:Pug（head.pug）
meta(charset="utf-8")
title Pug Test
```
```Pug:Pug（index.pug）
doctype html
html(lang="ja")
  head
    include head.pug
  body
    p Pug Test
```
```HTML: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:Pug（template.pug）
doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    title Pug Test
  body
    p Pug Test
    block content
```
```Pug: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: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: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: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)`のように引数を指定することもできます。

以上です。