Angular2からのpug2を利用するための調査メモ

# pug2とは何か?

Angular2を勉強するための基礎知識として、pug2を勉強したのでそれのメモ
htmlファイルを生成するための形式。最初は jade と言っていたが、商標?の関係で名称がpugと成ったようだ。

環境 OSX 10.11.6,Angular2,pug

 * node: 6.10.3
 * @angular/cli: 1.0.3
 * pug version: 2.0.0-rc.1
 * pug-cli version: 1.0.0-alpha6

## 記述ルール

```pug
h1 タイトル
```

上記のpugを変換すると以下のhtmlになる。

```html
<h1>タイトル</h1>
```

[先駆者](https://blog.mismithportfolio.com/web/20160326pugbegin)が情報をまとめているので、参考に。

重要そうなところメインに調査

### idとclassの書き方

idは「#」、classは「.」で区切れば属性として展開される。また、タグを省略すると「div」タグとなる。

```pug
section#top
  .content.inner
```

```html
<section id="top">
    <div class="content inner"></div>
</section>
```

### 改行せずに要素の入れ子をつくる

pugは、「: ＋ 半角スペース」で横並びに書いても、要素の入れ子を作れる。

```pug
ul
  li: a(href="#") Top
  li: a(href="#") About
  li: a(href="#"): span Links
```

```html
<ul>
    <li><a href="#">Top</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#"><span>Contacts</span></a></li>
</ui>
```

### コメント

pugのコメントの書き方は2種類あり、書き出したHTML内にコメントを残す方法と残さない方法。

```pug
// HTMLで書き出されるコメント
 
//- HTMLで書き出されないコメント
```

### include機能

記述の一部をパーツ化し、includeで必要な箇所に読み込むことが出来る。
拡張子「.pug」を省略すると「.pug」付きのファイル名で読み込む。[.jade]では読み込んでくれないようだ。

### 変数の利用

「- var 変数名 = 変数の中身」で定義できる。

 * 変数の展開は、include展開を行った後評価されるようで、以下のような使い方も出来た。

```pug:index.pug
- var title = "サンプルソース";
doctype html
html(lang="ja")
  include header.pug
  body
     h1 title
```

```pug:header.pug
head
  meta(charset="utf-8")
  style(src="css/style.css")
  title #{title}
```

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <style src="css/style.css"></style>
    <title>サンプルソース</title>
  </head>
  <body>
    <h1>title</h1>
  </body>
</html>
```

### forループ文

```pug
section#top
  .content.top
  - for (var i = 0; i < 3; i++) {
    .block
      h2(class="#{i}") 見出し
      p テキストテキスト#{i}
      a(href="#") ボタン
  - }
```

```html
<section id="top">
  <div class="content top"></div>
  <div class="block">
    <h2 class="#{i}">見出し</h2>
    <p>テキストテキスト0</p><a href="#">ボタン</a>
  </div>
  <div class="block">
    <h2 class="#{i}">見出し</h2>
    <p>テキストテキスト1</p><a href="#">ボタン</a>
  </div>
  <div class="block">
    <h2 class="#{i}">見出し</h2>
    <p>テキストテキスト2</p><a href="#">ボタン</a>
  </div>
</section>
```

参考にした[ページ](https://blog.mismithportfolio.com/web/20160326pugbegin)では、classの変数は展開されていたが、やってみると展開されなかった。
pug-cliのバージョンにより動きが変わるのか?

[jadeがpugになって変わった所のメモ](http://chaika.hatenablog.com/entry/2016/12/20/172550)に記載があった。仕様が変わったようだ。
行先頭の - なしでIteration命令(each,while)が使えるようだ。ただ、forがeachの別名(機能はeachと同じ)になったのは、少し不便。
一定回数のループは、whileを利用するか、下記のサンプルのようにArrayのキー不自然に利用するしかなくなる。

```pug
section#top
  .content.top
  each idx in [ ...Array(3).keys() ]
    .block
      h2(class='test'+idx) 見出し
      p テキストテキスト #{idx}
      a(href="#") ボタン
```

```html
<section id="top">
  <div class="content top"></div>
  <div class="block">
    <h2 class="test0">見出し</h2>
    <p>テキストテキスト 0</p><a href="#">ボタン</a>
  </div>
  <div class="block">
    <h2 class="test1">見出し</h2>
    <p>テキストテキスト 1</p><a href="#">ボタン</a>
  </div>
  <div class="block">
    <h2 class="test2">見出し</h2>
    <p>テキストテキスト 2</p><a href="#">ボタン</a>
  </div>
</section>
```

一応、期待した動きになったが、変数(idx)へのアクセスルールがよく理解できない。idx でアクセスしたり、#{idx}でアクセスしたり。

### eachループ文

```pug
ul
  each val in ["Top", "About", "Works", "Contact"]
    li: a(href="#")= val
```

```html
<ul>
  <li><a href="#">Top</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Works</a></li>
  <li><a href="#">Contact</a></li>
```

### mixin機能

mixin 関数のような機能を実現できる。

```pug
mixin title-block(title, date)
  h1= title
  p= date || new Date

mixin title-block("Hello, World!", "Tue Jan 14 2014 00:00:00 GMT+0900 (JST)")
mixin title-block("Hello, World!")
```

こ記述方法では、以下のエラーとなる。

```
Error: d.pug:5:1
    3|   p= date || new Date
    4| 
  > 5| mixin title-block("Hello, World!", "Tue Jan 14 2014 00:00:00 GMT+0900 (JST)")
-------^
    6| mixin title-block("Hello, World!")
    7| 
```

以下のように + での指定のみになったようだ。[jadeがpugになって変わった所のメモ](http://chaika.hatenablog.com/entry/2016/12/20/172550)でも記載があるが、jadeからpugに変わったときの影響のようだ。

```pug
mixin title-block(title, date)
  h1= title
  p= date || new Date

+title-block("Hello, World!", "Tue Jan 14 2014 00:00:00 GMT+0900 (JST)")
+title-block("Hello, World!")
```

```html
<h1>Hello, World!</h1>
<p>Tue Jan 14 2014 00:00:00 GMT+0900 (JST)</p>
<h1>Hello, World!</h1>
<p>Sun May 14 2017 10:44:35 GMT+0900 (JST)</p>
```

### mixin機能とinclude機能を組み合わせ

```pug
include header2

doctype html
html(lang="ja")
  +header-block("タイトル")
  body
     h1 title
```

```pug:header2.pug
mixin header-block(ti)
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title ti
```

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <style src="css/style.css"></style>
    <title>ti</title>
  </head>
  <body>
    <h1>title</h1>
  </body>
</html>
```

## 参考

 [jadeがpugになって変わった所のメモ](http://chaika.hatenablog.com/entry/2016/12/20/172550)
 [pug Getting Started](https://pugjs.org/api/getting-started.html)
 [Migrating to Pug 2](https://pugjs.org/api/migration-v2.html)
 [Iteration to Pug 2](https://pugjs.org/language/iteration.html)