pug(jade)とは何か調べてみました。

2021/03/15

HTMLの書き方に似たpug(Jade)を使用したので、いろいろ調べてみました。

pug(Jade)とは

pug(Jade)は、JavaScriptのテンプレートエンジンで、テンプレートと文字列とプログラムを組み合わせて出力ができます。元々はJadeという名前でしたが(拡張子は.jade)、2016年頃にpug(拡張子.pug)がリリースされたようです。

pugのインストール方法

pugを使用するには、Node.jsが必要になるので、下記の記事からNode.jsをインストールしてください。
※macでのインストール方法になります。

Node.jsのインストール方法

ますは、下記コマンドでnpmがインストールされているか確認

npm -v

バージョンが確認できればOKです。
pugをインストール

npm install pug-cli -g

インストールできているか確認

pug --version

pugの良さ

以下に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 hoge2

2. 変数が使用できる

共通で使用されている文言等を修正する場合、修正漏れがあったり、ひとつひとつ修正していくのは面倒です。
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なども使えるようなので、いろいろ試してみたいと思います。