htmlを楽に作りたい！初めてのPugの導入・使い方まとめ

2019年8月5日2019年10月5日

htmlを楽に作るため、Pugの基本的な使い方を解説します。

筆者は先日までejsでhtmlを作っていましたが、Pugに乗り換えました。

Pugの基本的な書き方
Pugでhtmlを作るのに知っておくと便利な使い方

を紹介します。

とりあえずPugを使ってみたい
ejsからPugに乗り換えたい

という人におすすめな内容です。

1. Pugのメリット
2. ejsとPugの比較
3. Pugの導入
4. Pugの使い方
5. テキストの途中で改行（brタグ）やspanタグを使いたい時
6. Pugのテンプレートサンプル
7. まとめ

Pugのメリット

最初にPugでhtmlを作るメリットをまとめます。

ヘッダーやフッターの共通部分のhtmlを別ファイルに作れる
変数やfor文を使って、htmlを楽にたくさん生成できる
レイアウト毎に使用するテンプレートを切り替えれる

共通部分をパーツ化して作れるため、htmlで大量ページを制作するときに便利です。

ejsとPugの比較

元々ejsを使っていたので、ejsとPugの違いを比較します。

閉じタグがないため、ejsよりもPugの方がソースコードの行数が少なくシンプルに
Pugはejsと違い、基本的にhtmlで記述しないため、ejsよりもPugの方が導入コストがちょい高い（といっても、難しくないのでそんな差はありませんが。。）
Pugなら、PreprosやCodekitなどのGUIタスクランナーでコンパイルできる。ejsはコンパイルにGulpなどが必要

ejsはほぼほぼhtmlで、変数やループなど細かい部分はjavascriptなので学習コストほぼない感じですが、Pugは書き方を最低限覚える必要があるため、ちょっとだけ学習コストかかります。

が、両方やった身としてはpugの方がシンプルにかけると思います。

なお、pugやPreprosやCodekitで簡単にコンパイルできるので、とりあえずコンパイルさせる環境作るだけならpugが楽です。

Pugの導入

Pugをコンパイルさせるだけなら、Guiのタスクランナーである、CodekitやPreprosを導入するのが楽です。

SassやPugを楽にコンパイルするならPreprosでOK

ちゃんとやるのなら、GulpやWebpackなど使うことになるかなと。

ちなみに、ブラウザでサクッとコンパイルすることもできたりします。

https://html2jade.org/

試しにPug触ってみたいなら、↑のページで遊んでみるといいかなと。

Pugの使い方

Pugの書き方は少し特殊です。

htmlで言う閉じタグがない
「>」や「<」などがない

実際のソースコードは↓のような形です。

main.main
  .container
    .pages
      .breadcrumb
        a(href="./", title="TOP") TOP

↑のような形でPugは記述されまして、ものすごくシンプルです。

↑をコンパイルすると↓のようになります。

<main class="main">
  <div class="container">
    <div class="pages">
      <div class="breadcrumb">
        <a href="./" title="TOP">TOP</a>
      </div>
    </div>
  </div>
</main>

こう見ると、Pugだとコード数が少なくhtmlで記述できるのがわかるかと。

以下に、Pugでの基本的な記述方法をまとめます。

コメントアウト

// コンパイルで作られるhtmlに残る
//- コンパイルで作られるhtmlに残らない

変数を宣言する

-
  const hensu =  '変数の中身'

  //- ↓ 変数が配列の場合
  const array = [0, 1, 2]

  //- ↓ 変数がオブジェクトの場合
  const meta = {
      title : "お問い合わせ",
      slug: 'CONTACT',
      smallSlug: 'contact'
  }

  //- ↓ 変数が連想配列の場合
  const array = [
    {
      index: 0,
      name: "Tom"
    },
    {
      index: 1,
      name: "Bob"
    }
  ]

変数を出力する

//- テキストとして出力する（エスケープされる）
p #{hensu}

//- テキストとして出力する（「<」や「>」をエスケープさせない）
p !{hensu}

//- hrefなどのhtml属性へ出力
a(href=hensu target="_blank") aタグリンクテキスト

//- オブジェクトを出力させる場合（↓は変数metaのdescriptionを出力させている）
meta(name="description" content=meta.description)

//- 変数とテキストを組み合わせる場合（↓indexが変数）
img(src=`./img/pages/pict${index + 1}.jpg`,)

Pugの中でhtmlをそのまま使いたい時

youtubeの埋め込みhtmlを使いたい時などに

div
  .
    <iframe width="560" height="315" src="https://www.youtube.com/embed/___" frameborder="0"></iframe>

テキストの途中で改行（brタグ）やspanタグを使いたい時

li ダミーテキストテキスト
  br
  | テキストテキスト
  span.liner テキストテキスト

↑を出力すると↓に。

<p>ダミーテキストテキスト<br />テキストテキスト<span class="liner">テキストテキスト</span></p>

if文

//- 変数hensuが存在すれば
if hensu
  p hensuは存在する
else
  p hensuは存在しない

foreach文

-
  const array = ["Tom", "Bob"]

ul
  //- 2つ目に宣言した変数がindex数になる
  each item,index in array
    li #{index} #{item}

↑を出力すると↓に。

<ul>
  <li>0 Tom</li>
  <li>1 Bob</li>
</ul>

Pugパーツのインクルード

//- inclue/_header.pugをインクルードする
include include/_header.pug

//- 以下のようにすると、変数metaをincludeファイルへ引き継げる（出力も、meta.titleと言う風にすればOK）
-
  const meta = {
      title : "タイトル",
      description: 'ディスクリプション',
  }
include include/_head.pug

Pugのテンプレートサンプル

全てのインクルードを入れると長いので一部だけ。

-
  const meta = {
      title : "タイトル",
      description: 'ディスクリプション',
  }
include include/_head.pug
include include/_header.pug

main
  //- ここにメインコンテンツ

include include/_footer.pug
include include/_footerHead.pug

<!DOCTYPE html>
html(lang="jp")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        meta(http-equiv="X-UA-Compatible", content="ie=edge")
        if meta.title
            title #{meta.title}
        if meta.description
            meta(name="description" content=meta.description)
        link(rel="stylesheet", href="./css/index.css")
        link(rel="stylesheet", href="./css/base.css")
        script(src="./js/index.js")
        .
            <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Roboto+Condensed:400,700&display=swap&subset=japanese" rel="stylesheet">

こんな感じにやるとhtmlで大量ページを作るのに楽になります。