カテゴリー
アーカイブ
アーカイブ
HTMLの書き方に似たpug（Jade）を使用したので、いろいろ調べてみました。
pug（Jade）とは
pug（Jade）は、JavaScriptのテンプレートエンジンで、テンプレートと文字列とプログラムを組み合わせて出力ができます。元々はJadeという名前でしたが（拡張子は.jade）、2016年頃にpug（拡張子.pug）がリリースされたようです。
pugのインストール方法
pugを使用するには、Node.jsが必要になるので、下記の記事からNode.jsをインストールしてください。
※macでのインストール方法になります。
ますは、下記コマンドでnpmがインストールされているか確認
npm -vバージョンが確認できればOKです。
pugをインストール
npm install pug-cli -gインストールできているか確認
pug --versionpugの良さ
以下にpugを使用することのメリットを4点まとめました。
1. 閉じタグが不要
2. 変数が使用できる
3. 繰り返しが簡単
4. 条件分岐が使用できる
1. 閉じタグが不要
閉じタグを忘れてしまう、そもそもどこを閉じていないか探すことが無くなります。
タグの後に、半角スペースを忘れないようにしましょう。
■HTML
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>こんにちわ</h1>
<p>hoge1</p>
<ul>
<li>hoge2</li>
<li>hoge2</li>
</ul>
</body>
</html>■pug
doctype html
html
head
title タイトル
body
h1 こんにちわ
p hoge1
ul
li hoge2
li hoge22. 変数が使用できる
共通で使用されている文言等を修正する場合、修正漏れがあったり、ひとつひとつ修正していくのは面倒です。
pugだと変数一箇所の修正で済みます。
■HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>変数の使用</title>
</head>
<body>
...■pug
- var title = '変数の使用';
doctype html
html(lang="ja")
head
meta(charset="UTF-8")
title #{title}
body
...3. 繰り返しが簡単
<li>を何個も書かなくても良いので、効率よく書けます。
■HTML
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>■pug
//- 改行＆インデントすれば1個で済む
-
ul
each val in [1, 2, 3]
li= valさらに、連想配列も書けます。
■pug
-
var arr = [
{
name : 'taro',
age : 85,
},
{
name : 'hanako',
age : 55,
}
];
ul
each val in arr
li #{val.name}：#{val.age}4. 条件分岐が使用できる
最初にお話しましたテンプレートと文字列とプログラムを組み合わせて出力ができるとはどういうことか、
上記の繰り返しと条件分岐あたりで実感ができます。
// if文
- var name = 'taro'
if name=='hanako'
p 花子です。
else if name=='taro'
p 太郎です。
else
p 存じ上げません。
// switch文
- var name = 'taro'
case name
when 'hanako'
p 花子です。
- break
when 'taro'
p 太郎です。
default
p 存じ上げません。まとめ
ソースが見やすくなり、文言の修正などは変数を使用するなどして、HTMLを効率良く書けることがpugの特徴だなと思いました。includeやextendsなども使えるようなので、いろいろ試してみたいと思います。
