今更解説するpug

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/9dca9d0d-9536-f4c0-160c-d88409292a5b.png)
すっかり「古い技術」になってしまったのかもですが、`pug(jade)`を今更紹介します。

## grunt/gulp以降の新習慣

`gulp` などで `html` を作るプロジェクトでは、`html`以外の言語で`html`を書くという
「**謎習慣**」があります。

##意識高い系が使うオーバーテクノロジー説

何故`gulp`とか`pug`とか、そういうややこしい技術を使うの？
**意識高い系（笑）がわざとややこしくしてるんじゃないの？**みたいに言う人もいます。
（いや意識高い系はもう `gulp` なんか使ってないし。。）

なんで`html`で書かないのかと言うと・・・

###htmlって実は見づらいし、書きにくい。
という一言に尽きると思います。`html`は読みづらい。

`html`に見慣れてる人からすると、「は？何を言ってるのか分からない」となるかもしれませんが、
`Node.js`前提の世代からすれば、`html`は `jquery.min.js` と同じ扱いです。
「もはや、読めるものではない」って事です。
`Javascript`も生のJSは読みづらいですし、
`Stylesheet`だって、生のCSSは読みづらいです。

一回作って終わりなら、それで良いのかもしれませんが、最近は
メンテナンスする時に読みやすいように作るのがお作法です。

##最近はどう変わってきたのか？

htmlは、変数の処理や、繰り返し処理に対応していないので、全部直書きする必要がありました。
プログラミング的な処理を書けるようにしたのが、「**htmlテンプレートエンジン**」です。

##HTMLテンプレートエンジンって何？

「HTMLテンプレートエンジン」っていうのにもいくつか種類があって、
有名なものでいうと `EJS`とか、`PUG`とか、`Handlebars`とかありますけど、
学習コストが高い`EJS`が流行ったので、アレルギーになった人が続出したように思います。
結果的に「**使わない人が多数派**」という結果になってます。

##どういう特徴があるの？

`pug`は「pug」という拡張子のファイルに書かれています。この後詳しく説明しますが

これは「**コーディングを素早くできるテンプレートエンジン**」です
記法を覚えるまでは「**普通に書いた方が速い**」みたいな事を必ず思います。
私もそうでした。

`pug`を読めない人が沢山アサインされた時、まず最初に「`pug`やめよう」という話になります。
いやいやいや、ちょっと待って下さい。`pug`って`html`を**直接書けるの、知ってますか？**
便利さが分かってから廃止でも、遅くはないでしょう。

##基本形
まず基本的な `html` を `pug` で書く場合、どうなるかを見てみます。

```html
<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <title>html</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body id="sample_id" class="sample_class">
  <div class="a">Hello world! This is HTML5 Boilerplate.</div>
  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
</body>
</html>
```

↓これをpugで書きます

```javascript
doctype html
html.no-js(lang='')
  head
    meta(charset='utf-8')
    title html
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='css/normalize.css')
    link(rel='stylesheet', href='css/main.css')
  body#sample_id.sample_class
    .a Hello world! This is HTML5 Boilerplate.
    script(src='js/vendor/modernizr-3.11.2.min.js')
    script(src='js/plugins.js')
    script(src='js/main.js')
```
「…あまり変わんないのでは？」と思うと思います。この辺では特に違いはわかりにくいです。

##pug の 特徴

★`<>` という記号がなくなっている。その代わりにタグの後ろに`()`が付いている
★ 閉じタグがない。
★インデントがそろってる。
★ `class="sample_class"` が `.sample_class` になっている
★ `id="sample_id"`が、 `#sample_id` になっている
★ `div class="a"` が`.a` になっている

つまり書き方さえ分かってしまえば「かなり短く書ける」って事です。

##省略記述の例

閉じタグがないので、短く書けます。
`<div></div>`が１番よく使うタグだと思いますが、それを書かなくて良いっていうだけでかなり速い。
（※ class も id も付けない場合は上の図の例と同じく p と同じように div を書く必要があります。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/1603099e-c1ef-4a68-493a-4345576fdb10.png)

##テキストの書き方
テキストは、タグの後ろに半角スペースを空けて書く事もできますし、
改行する場合はインデントを深くした上で「`| `」を入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/3249e3c9-2313-9820-971e-9a221e360cf5.png)

##html属性の書き方
img タグみたいに html の中に色々な属性がある場合はこうなります。これは短くなりません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/f2dd7bfb-5820-d96d-b95f-717775ce5f48.png)

##インデントは厳しい
閉じタグがない代わりに、インデントは常に正しくして下さい。
VSCodeなら`Alt+Shift+F`で整列できますので。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/eaaa4a50-3174-f4e2-7d1b-50fa001ed0a6.png)

##extendsが使える
`pug`は、`extends`が使えます。bodyの外側をインクルードするイメージ。
htmlで毎回、同じようなメタタグとか js とか書いてるんだけど、ぶっちゃけコレ毎回コピペするの面倒ですよね。
同じなら省略したいですよね。ということで。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/e7b38da8-512b-f3c9-cebc-3960af126ee0.png)

この色を塗った部分をextendで省略するとこうなります（下図）
_layout_frame に、bodyの外側を書いておき、
bodyの中に`block content`と書いておく事で、面倒な`<head>`などの記述を省略できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/4f691fc5-c81d-c87a-921b-efcda546dd5d.png)

毎回繰り返し使う body の外側を extends に書いておくことで、毎回書かなくてよくなります。
とはいえ、「タイトルとか、メタタグはページごとに変わるんじゃないの？」って思いますよね。
そんな時は変数を extends したファイル側に `variables`（変数）として、読み込ませれば良いんです↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/97f37151-576f-c4cf-9765-3f8a2fbd833f.png)

##include が使える
include は、ヘッダーやフッターなど、繰り返し使う要素を差し込む時に使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/179696ed-0c4e-870d-32a3-d8b4be461515.png)

コレも、毎回長いヘッダーの中身をわざわざ毎回書く必要がありません。
include すれば、同じようなヘッダーを繰り返し使うことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/16c903ce-e3f0-78cd-502c-b01e7ab5d9ab.png)

##script
`<script>`の中身はテキストじゃないので、このようにドットでつないで書きます。

```html
<script>
   alert("test");
</script>
```

　↓

```javascript
script.
   alert("test");
```

##style
styleも同様です。

```html
<style>
  .hoge {font-size: 100%;}
</style>
```

↓

```javascript
style.
  .hoge {font-size: 100%;}
```

##改行を￥マーク、\バックスラッシュで打ち消せる
Javascriptと同じなので、改行を改行だと思わせないようにするには、
文末に\（Windowsの場合は¥マーク）を入れると改行を無効化できます。

```javascript
p
  |これは\
改行を\
打ち消すサンプル\
です。
```

##他の機能もあるけど

それ以外にも `if` 文と `for` 文が使えます。

```javascript
- var name = 'fuga'
  if name=='hoge'
    p ほげです。
  else if name=='fuga'
    p ふがです。
  else
    p ぴよです。
```

```javascript
- for (var x = 0; x < 3; x++)
  li item#{x}
```

`json` を `include` する事で テキストとコードを分離することもできます。

```javascript
var text  ='エスケープ処理する'
var text2 ='エスケープ処理しない'

p #{text}
p !{text2}
```
機能はあるのですが、やりすぎると直感的ではなくなり、複雑化する可能性もあります。
それをやる事で `pug` がキライになっちゃう可能性もあるので、
まずは省略記法だけ使ってみて下さい。慣れたら使ってみて下さい。

---
##コンパイラがない？
`gulp`とか`pug`をはじめて使う人が必ず言うのが、
「htmlどこ？」っていうセリフです。`html`は`pug`を編集しただけではでてきません。
ビルド（変換作業）する必要があります。

ターミナルを使います。ターミナルのおまじないを教えておきます。

```sh
$ cd project （現在のプロジェクトの直下フォルダ）
$ npm install （必要なライブラリを揃える）
$ npm run dev　（ローカルで実行し、ブラウザに映す）
$ npm run build （変換されたファイルを書き出す）
```