基本からはじめるPugのサンプル集

もちろん以前からPugの事は知っていたのだけれど、記述方法に一抹の気持ち悪さを感じ、距離を置いていた。先日、あるキッカケで使ってみたところ、ただの食わず嫌いだという事が分かった。先入観は可能性を狭める。これまではHTMLテンプレートエンジンとしてEJSをつかってきたが、今はもうPugに乗り換える気満々だ。
自分が感じた利点はこんな感じ。

- 書く量が少ない ＝ 速い
- 特に<>が無いのが良い。こんなに快適だとは思わなかった。
- 閉じタグ忘れが起きない。（普段から忘れないけどね）
- includeやmixinの使用感が良い。
- 繰り返し（each）や条件分岐（if）などがejsに比べて書きやすい。
- Vue.jsでもつかえる。
- Slim(Ruby)と似てる。


#サンプル集
せっかく使い始めたので、サンプルを貯める。今後、使いながら増やしていこうと思う。

##Pugの基本
きほんのき。構造はインデントで管理する。

```pug:sample.pug
doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    title タイトル
    link(rel="stylesheet", href="/assets/css/common.css")
  body
    h1 TITLE
```

```html:sample.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>タイトル</title>
    <link rel="stylesheet" href="/assets/css/common.css">
  </head>
  <body>
    <h1>TITLE</h1>
  </body>
</html>
```


##タグにClassやidやattributeをつける
これも基本。繋げて書けば良いだけ。

```pug:sample.pug
input#sample-id.sample-class(type="text",name="sample",value="値")
button(type="submit").btn.btn-large ボタン
```

```html:sample.html
<input id="sample-id" class="sample-class" type="text" name="sample" value="値">
<button class="btn btn-large">ボタン</button>
```



## 変数の呼び出し２種
そのままタグに入れる場合と、文章内に含める場合。
（テンプレートリテラルとして考えるとrubyっぽい。JavaScriptなら#でなく$。）

```pug:variables.pug
- var title = "ラララ";

h1= title
p このページの名前は、#{title}です。
```

```html:variables.html
<h1>ラララ</h1>
<p>このページの名前は、ラララです。</p>
```

## 変数内のHTMLタグの扱い
<>をどうするか。

```pug:tag.pug
- var text = "ラララ<br>ルルル";

p= text　// HTMLタグ無効。<>は&lt;と&gt;に変換される。
p!= text // HTMLタグとして機能。<br>では改行される。
```

## includeしたpugファイルに値を渡す
簡単にincludeできる。ファイルを分割して、コンポーネント設計がしやすい。
ただ、値をやりとりする場合、命名ルールがあると良さそうだったので、以下のようにしてみた。

- include用のファイル名はアンダーバーをつけ、Gulpでhtml化しない。（ _btn.pug ）
- ファイル間でやりとりがある変数にはアンダーバーを付ける。（ _var ）
- 上書きする場合はsetを付ける。（ _setVar ）
- デフォルト値を設定する。

ラベル名を指定しつつ、ボタン（ _btn.pug ）をincludeするサンプル。
変数をタグ無いでテキスト化する場合は＝を使用する。

```pug:_btn.pug
-var _label = 'ボタン' // デフォルト設定
if _setLabel
  -_label = _setLabel

button= _label
```
```pug:main.pug
include _btn.pug

-var _setLabel = '更新'
include _btn.pug
```
```html:main.html
<button>ボタン</button>
<button>更新</button>
```



## mixinと連想配列を組み合わせる
記事データとかにつかえる。JSONデータで外部化してGulpで読み込む方法も良い。

```pug:article.pug
-
  var data = [
    { id: 1, title: 'title1' },
    { id: 2, title: 'title2' },
    { id: 3, title: 'title3' }
  ]
    
mixin set_list(_id, _title)
  li #{_id} / #{_title}

ul
  each val in data
    +set_list(val.id, val.title)
```
```html:article.html
<ul>
  <li>1 / title1</li>
  <li>2 / title2</li>
  <li>3 / title3</li>
</ul>
```

## includeしたメニューの状態をページによって切り替える
よくあるシチュエーション。ifは三項演算子（条件式 ? 値1 : 値2）で書ける。

```pug:_menu.pug
ul.menu
  li(class= page == 'index' ? 'is-selected' : '')
    a(href="/index.html") トップ
  li(class= page == 'about' ? 'is-selected' : '')
    a(href="/about.html") 概要
  li(class= page == 'contact' ? 'is-selected' : '')
    a(href="/contact.html") お問い合わせ
```

```pug:index.pug
-var page = 'index'
include _menu.pug
```

```html:index.html
<ul class="menu">
  <li class="is-selected">
    <a href="/index.html">トップ</a>
  </li>
  <li>
    <a href="/about.html">概要</a>
  </li>
  <li>
    <a href="/contact.html">お問い合わせ</a>
  </li>
</ul>
```


#参考資料
公式サイト
https://pugjs.org/api/getting-started.html
公式のGitHub
https://github.com/pugjs/pug