【Pug】"Pug"って何！？

# 初めに
本記事は、.NET系(WPF, WinForm, .NET Coreなどなど)を主に経験してきた私が、
Web系会社に転職して、学んだことを自分のメモとして残していくものです。

そんな私が、”Pugって何！？”なレベルからスタートして、実践してみたメモです。
⭐️　超初心者向けな記事です、至らぬ点ありましたら、世の中の諸先輩方、忌憚のないご意見お待ちしてます！ ⭐️

# 概要
[Pug](https://www.npmjs.com/package/pug)とは、「HTMLを書くためのテンプレートエンジン」のことです。
.NETでいえば、「[Razor](https://docs.microsoft.com/ja-jp/aspnet/core/mvc/views/razor?view=aspnetcore-6.0)」、Java（のSpringFW）でいえば、「[Thymeleaf](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html)」のようなものでしょうか。

よく上記を経験してきましたが、より強力なテンプレートエンジンだな、と感じました。
例をご覧ください。

# 例

いきなりですが、以下のHTMLとPugを比べてみましょう。

## HTML

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body></body>
  <div class="container">
    <button class="btn">
      api request
      
    </button>
    <hr>
    <h1 id="heading">枝豆（など）OR　fugafugaで絞り込み</h1>
    <input class="form-control activity-input" type="text" placeholder="name or memoで絞り込み">
    <hr>
    <div class="activity-table">
      <div class="activity-table-body"> 
        <div class="activity-table-tr">
          <div class="activity-table-td-left">
            <div class="activity-table-td--date">2022/09/03</div>
            <div class="activity-table-td--name">枝豆</div>
          </div>
          <div class="activity-table-td-right">
            <div class="activity-table-td--memo"></div>
          </div>
        </div>
        ...{長いので省略}
        <div class="activity-table-tr">
          <div class="activity-table-td-left">
            <div class="activity-table-td--date">2022/09/03</div>
            <div class="activity-table-td--name">鯛の刺身</div>
          </div>
          <div class="activity-table-td-right">
            <div class="activity-table-td--memo"></div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"> </script>
    <script src="./jquery.pagination.js"> </script>
    <script src="./index.js"> </script>
  </div>
</html>
```

## Pug

Pugで書くと以下になります。

```js
doctype html
html(lang="ja")
  head
    title タイトル
    meta(charset='utf-8')
    meta(http-equiv="X-UA-Compatible", content="IE=edge,chrome=1")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    block link
      link(rel='stylesheet', href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css")
      link(rel='stylesheet', href="style.css")
  body
  .container

    button.btn.  
        api request

    hr

    h1#heading 枝豆（など）OR　fugafugaで絞り込み
    input(type='text')&attributes({placeholder: 'name or memoで絞り込み', class:'form-control activity-input'})

    hr
    .activity-table
        .activity-table-body 
            -
                var list = [
                    {
                        date:"2022/09/03",
                        memo:"",
                        name:"枝豆"
                    },
                    {
                        date:"2022/09/03",
                        memo:"hogehoge",
                        name:"ビール"
                    },
                    {
                        date:"2022/09/03",
                        memo:"fugafuga",
                        name:"卵焼き"
                    },
                    {
                        date:"2022/09/03",
                        memo:"",
                        name:"鯛の刺身"
                    }
                ]

            - for (var i = 0; i < 4; i++)
                each item in list 
                    .activity-table-tr
                        .activity-table-td-left
                            .activity-table-td--date=item.date
                            .activity-table-td--name=item.name
                        .activity-table-td-right
                            .activity-table-td--memo=item.memo
    block end_of_body 
        script(src="https://code.jquery.com/jquery-3.6.1.min.js") 
        script(src="./jquery.pagination.js") 
        script(src="./index.js") 
```

若干戸惑う書き方をしてますが、重複コードのない、スマートなかんじになってませんか。


# 始め方

以下のコマンドでpug->htmlファイルに生成できます。
あとは、index.pugを編集したら、"npx pug index.pug"していくことで、どんどん開発を行えます！

```sh
$ mkdir pug-study
$ cd pug-study
$ npm init
$ npm i pug-cli 
$ touch index.pug
$ vim index.pug //　任意の内容で編集(!)
(!) : 
----
doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5);
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
----

$ npx pug --pretty index.pug // --pretty(HTMLをインデント付きでコンパイルする)
rendered index.html
$ cat index.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script type="text/javascript">if (foo) bar(1 + 5);</script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div class="col" id="container">
      <p>Get on it!</p>
      <p>Pug is a terse and simple templating language with a</p>
    </div>
  </body>
</html>%                        
```


# 凄くない？

前職で、せっせと、HTMLモック作ってましたが、同じ構造のHTMLコードで、データが違う、みたいな物を
作ってました。構造とか、クラスが変わるたびに面倒だな、と思った経験があります。

ですが、Pugを用いることで、重複コードを極限してますよね。スマート！

# Let`s Try🎵

メリットは理解いただけましたか？？
多少慣れは必要だとは思いますが、学習コストはそれほど大きなものではないのかな、という印象です
やってみて、理解することが大切かなと思いますので、
Pugの導入方法や、細かな記載方法はここでは割愛します（良い記事が多くありますので、、、）


# links

[Github](https://github.com/pugjs/pug)
[覚えるのはこれだけ！Pug(Jade)のよく使う9つの書き方](https://www.tam-tam.co.jp/tipsnote/html_css/post12789.html)