初めに
本記事は、.NET系(WPF, WinForm, .NET Coreなどなど)を主に経験してきた私が、
Web系会社に転職して、学んだことを自分のメモとして残していくものです。
そんな私が、”Pugって何！？”なレベルからスタートして、実践してみたメモです。
⭐️ 超初心者向けな記事です、至らぬ点ありましたら、世の中の諸先輩方、忌憚のないご意見お待ちしてます！ ⭐️
概要
Pugとは、「HTMLを書くためのテンプレートエンジン」のことです。
.NETでいえば、「Razor」、Java（のSpringFW）でいえば、「Thymeleaf」のようなものでしょうか。
よく上記を経験してきましたが、より強力なテンプレートエンジンだな、と感じました。
例をご覧ください。
例
いきなりですが、以下のHTMLとPugを比べてみましょう。
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で書くと以下になります。
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"していくことで、どんどん開発を行えます！
$ 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の導入方法や、細かな記載方法はここでは割愛します（良い記事が多くありますので、、、）