最速5分見積
もり

ブログ

  1. トップ
  2. ブログ
  3. Pug（Jade）って何だ？特徴や基本的な使い方の解説

Web制作

Pug（Jade）って何だ？特徴や基本的な使い方の解説

Pug（Jade）の特徴やメリット、基本的な使い方、導入方法についてまとめました。Pugをご存じない方にもご理解いただけるように、できるだけ丁寧に解説していきますね。

Pugの基礎知識

まずはPugの基礎知識から見ていきましょう。Pugの特徴やメリットについてもまとめています。

Pugとは？

Pug（旧Jade）とは、HTMLを書くためのJavaScriptテンプレートエンジンです。

Pug

» Getting Started – Pug（公式ドキュメント）

» Pug · GitHub（GitHubリポジトリ）

PugはJST（JavaScript Templates）の一つとして知られ、同じくHTML系のテンプレートエンジンであるHamlに影響を受けたとされています。

※Hamlについては、話が逸れるのでここでは割愛します。興味のある方は、下のリンクからHamlの公式サイトをご覧ください。
» Haml

Pugの機能を一言で言うと、HTMLの記述を効率化してくれるということに尽きます。

具体的には、どのように効率化してくれるのでしょうか？例えば、下のようなHTMLコードがあるとします。ごくごく一般的なHTMLコードですね。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <style src="css/style.css"></style>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し１</h1>
    <div id="container">
      <p>Pugのテストページです。</p>
    </div>
  </body>
</html>

これをPugを使って書くと、下のようになります。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title タイトル
  body
    h1 見出し１
    #container
      p Pugのテストページです。

コードの分量や行数が減っていることがおわかりいただけるでしょうか？（ちょっと見た目は変わりましたが、それについては後述します。）

これが、Pugを使う最大のメリットです。

普通にHTMLを書くよりも、かなり少ないコード量で済ませることができるのです。コーディングが効率化できますし、それに付随したいろいろなメリットが得られます。

お気づきの方もいるかもしれませんが、CSSで言うところのScssやLessなんかに似ていますね。Scssについては下の記事で解説しているので、よろしければそちらの記事もご覧ください。

» CSSコーディングを効率化する！SCSSの特徴と基本的な使い方

主な特徴

Pugの主な特徴やメリットについて、もう少し踏み込んで解説していきます。

コード量が減る

上でも述べたように、Pugを導入することでHTMLのコード量を大幅に減らすことができます。

なぜコード量を減らせるのでしょうか？

記事後半で詳しく解説をしますが、閉じタグがないことや変数が使えること、HTMLのインクルードができることなどがあげられます。

またタグを使わない代わりに、改行やインデントを利用してコードを書いていきます。このあたりの書き方は、Pythonと似ていますね。

通常のHTMLとは書き方が異なるので、もちろんPugを学ぶ工数は必要になります。ですが、それを大きく上回るメリットがあると言えるでしょう。

得られるメリット

コード量が減ることに付随して、得られるメリットがあります。代表的なものを列挙しておきましょう。

  • 制作スピードが上げられる
  • 書き間違いが減る
  • 不具合の削減につながる
  • 保守にかかる工数、コストが減らせる
制作スピードが上げられる

コードが減ると、エンジニアの工数を減らすことにつながります。そのため、Web制作のスピードアップが期待できます。

時間がかかるのは、Pugを導入する時やエンジニアがPugに慣れていない初期段階だけ。その後は、圧倒的にスピードアップしていけるでしょう。

書き間違いが減る

Pugを導入すると、書き間違いを減らすことができるでしょう。

その理由は、書くべきコードが減るから。コード量が増えれば、それだけヒューマンエラーの確率が高くなってしまうものです。Pugは自動でHTMLを展開してくれるので、書き間違いも減るのです。

不具合の削減につながる

不具合を減らせることもメリットの一つです。

ここで言っている不具合とは、文法のミスや書き間違いなどによるもののこと。PugはHTMLを簡易的に書くことができるので、文法上のミスが発生しにくくなります。人的な不具合を減らすことにも役立ってくれるのです。

保守にかかる工数、コストが減らせる

Pugを導入すると、保守もしやすくなると言えるでしょう。

コードが減るということは、保守すべき対象が減らせるということ。当然、保守にかかる手間を減らすことができるのです。その分だけ、コストダウンも期待できるようになります。

デメリットは？

Pugのいいところばかり見てきましたが、デメリットはないのでしょうか？

こういったツールにつきものなのですが、文法や使い方に慣れるまでの学習コストは必要です。チームで開発を行っている場合は、エンジニアやデザイナーがPugを使えるようになってもらう必要もあるでしょう。

ただ、記法そのものはHTMLをベースにしているので、抵抗なく習得していけるはず。HTMLが使えるのであれば、Pugにもすぐに慣れることができるでしょう。

また、すでにHTMLでコードを管理している場合、Pugに置き換えるのはそれなりに手間がかかることも考えられます。

しかし嬉しいことに、Pugに直接HTMLコードを書いても全く問題なく出力をしてくれます。ケースバイケースですが、Pug導入にかかる工数はそれほど膨らまないとも言えるでしょう。

Pugの導入方法

それではPugの使い方に入っていきましょう。

まずはPugを導入する方法から。ここではMacにPugを導入するとして、解説していきますね。

下の手順を、ステップバイステップで進めていきます。

  • Homebrewをインストールする
  • nodebrewをインストールする
  • Node.jsをインストールする
  • Pugをインストールする

Pugを導入して実際に動かすのは難しくはないので、ぜひトライしてみてくださいね。

Homebrewをインストールする

Pugを動かすには、Node.jsが必要です。

» Node.js

» GitHub – nodejs/node: Node.js JavaScript runtime

Node.jsは手動でインストールしてもいいのですが、Macで使えるパッケージ管理ツールのHomebrewを使ってインストールしていきましょう。

Homebrewを使うには、XcodeのCommand Line Tools for Xcodeが必要です。こちらはすでにインストールされているとして、話を進めていきます。

Homebrewをインストールするには、公式サイトにあるスクリプトをターミナルで実行してください。

» Homebrew — macOS 用パッケージマネージャー

Homebrewのインストールが終わったら、下のコマンドを打ってください。

$ brew doctor

エラーが出ず「Your system is ready to brew.」と表示されれば、Homebrewのインストールは正常にできたと言えます。

nodebrewをインストールする

Homebrewを使って、nodebrewというパッケージをインストールします。nodebrewとは、Node.jsのバージョン切り替えやインストールができるパッケージのことです。

» GitHub – hokaccha/nodebrew: Node.js version manager

nodebrewを使わなくてもいいのですが、便利なのでその方法で進めていきましょう。

下のコマンドを打って、nodebrewをインストールします。

$ brew install nodebrew

nodebrewのインストールが終わったら、下のコマンドを打って確認しておきましょう。

$ nodebrew -v
nodebrew 0.9.7

正しくバージョンが表示されればインストール成功です。

Node.jsをインストールする

nodebrewが使えるようになったので、Node.jsのインストールに入っていきます。

はじめに、インストール可能なNode.jsのバージョンを確認しておきましょう。

下記のコマンドを実行すると、nodebrewでインストール可能なNode.jsのバージョンがリストアップされます。

$ nodebrew ls-remote

例えば、v7.10.0のバージョンをインストールする場合は下のコマンドを実行します。

$ nodebrew install-binary v7.10.0

最新版でよければ、下のようにしてください。

$ nodebrew install-binary latest

下のようになれば、Node.jsの最新版のインストールが成功です。

$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v7.10.0/node-v7.10.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

下のコマンドで、インストールされたNode.jsの一覧を見てみましょう。

$ nodebrew list
v7.10.0

current: none

正しくインストールされていますね。

さらに下のコマンドを実行して、インストールしたNode.jsを有効化します。

$ nodebrew use v7.10.0
use v7.10.0

もう一度、listコマンドを実行してみます。

$ nodebrew list
v7.10.0

current: v7.10.0

currentが埋まりましたね。インストールしたNode.jsが有効化されました。

次に、実行パスを通します。

$ echo 'export PATH=$PATH:/Users/whoami/.nodebrew/current/bin' >> ~/.bashrc

whoamiのところは、ホームディレクトリ名と差し替えてください。

ターミナルを再起動して、下記のコマンドを入力。指定したNode.jsのバージョンが表示されれば、OKです。

$ node -v
v7.10.0

Pugのインストールではnpmを使うので、念のためnpmの動作確認をしておきましょう。

$ npm -v
3.3.12

正しくバージョン情報が表示されました。これでPugをインストールする準備が整いました。

Pugをインストールする

それでは、Pugのインストールに入っていきましょう。

» Pug · GitHub

Pugをインストールするには、ターミナルから下のコマンドを実行すればOK。今回はグローバルに使いたいので、「-g」をつけています。

$ npm install pug-cli -g

インストールが完了したら、下のコマンドで動作チェックをしておきましょう。

$ pug --version
pug version: 2.0.0-rc.1
pug-cli version: 1.0.0-alpha6

正常にPugがインストールできたようです。これで、Pugを使う準備が整いました。

Pugの使い方

Pugがインストールできたところで、実際にコードを見ながら基本的な使い方を見ていきましょう。

最初に、Pugの基本文法として、主なものを下にまとめておきます。

  • タグを囲む<と>は不要
  • 閉じタグは書かない
  • 改行とインデントで入れ子を表現する
  • IDにはシャープ（#）を、classにはドット（.）を使う
  • 属性は括弧内に「属性名=”値”」と書く
  • 半角スペースの後にタグ内のテキストを書く

以降は、この基本文法を頭に入れながら読み進めていただければと思います。

基本的な書き方

Pugの基本的な書き方を順に見ていきましょう。

※ここからは、Pugのコードと、それをコンパイルしたHTMLのコードを順に載せていきます。実際にPugを使いながら読み進めていくと、きっと理解が深まると思いますよ！

DOCTYPE宣言、言語コード、文字コード

DOCTYPEの宣言は、下のように記述します。

doctype html

<!DOCTYPE html>

続いて、headの中に言語コードを追加します。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
  </head>
</html>

だんだんとHTMLコードらしくなってきましたね。

ここで注意して欲しいのは、インデントです。入れ子にする場合は、タブの個数によって入れ子の深さが決まってきます。順番ではないのです。

例えば、下のように記述すると、正しくない入れ子構造になってしまいます。

doctype html
html(lang="ja")
  head
  meta(charset="utf-8")

<!DOCTYPE html>
<html lang="ja">
  <head></head>
  <meta charset="utf-8">
</html>

HTMLの3行目と4行目に注目してください。本来はheadタグに入るべき文字コードの指定が、headタグの外に出てしまっています。

文字コードの指定をheadタグ内に入れたければ、文字コードの部分でインデントを1つ増やさなければいけないのです。

ここはPugを使う時にとても大事な部分になります。ぜひマスターしてくださいね。

CSS、JSの読み込み

外部のCSSファイルやJavaScriptファイルを読み込む場合は、下のように記述します。

style(src="css/style.css")
script(src="js/functions.js")

<style src="css/style.css"></style>
<script src="js/functions.js"></script>

括弧の中に、「属性値=”値”」と記載されていることに注目してください。

titleタグ、ヘッダータグ

titleタグは、半角スペースを使って下のように書きます。

title Pugの使い方

<title>Pugの使い方</title>

ヘッダータグも同様です。

h1 Pugの基本記法

<h1>Pugの基本記法</h1>

pタグなども同様に、半角スペースの後にテキストを書きます。

なお、改行をしたい場合は下のように記述をします。

p
  | ここではPugの使い方を説明しています。
  | まずは基本的な記法から解説しましょう。
p.
  ここではPugの使い方を説明しています。
  まずは基本的な記法から解説しましょう。

<p>
  ここではPugの使い方を説明しています。
  まずは基本的な記法から解説しましょう。
</p>
<p>
  ここではPugの使い方を説明しています。
  まずは基本的な記法から解説しましょう。
</p>

ID、クラス

要素にIDやクラスを付ける時の書き方です。これはCSSと同じように、半角シャープと半角ドットを使って記述します。

p#sample-id.sample-class Pugの使い方について説明しています。

<p id="sample-id" class="sample-class">Pugの使い方について説明しています。</p>

IDやクラスが複数ある場合は、半角カンマで区切って記述をします。

p#sample-id.sample-class1.sample-class2.sample-class3 Pugの使い方について説明しています。

<p id="sample-id" class="sample-class1 sample-class2 sample-class3">Pugの使い方について説明しています。</p>

input

inputについても同様で、括弧の中に属性を列挙していけばOKです。その際、それぞれの属性の間は半角スペースで区切ります。

input(type="text" name="email" size="10")

<input type="text" name="email" size="10"/>

なお、上の例のように属性が複数ある場合は、下のように改行をして記述をしてもOKです。

もちろん出力結果は変わりません。

input(
  type="text"
  name="email"
  size="10"
)

<input type="text" name="email" size="10"/>

コメントアウト

次はコメントアウトです。

Pugの場合はコメントアウトが2種類あります。HTMLに書き出すコメントと、書き出さないコメントです。

// HTMLに書き出すコメント。
//- HTMLに書き出さないコメント。

<!-- HTMLに書き出すコメント。-->

コンパイルする

コンパイルの方法です。

Pugは.pugという拡張子がついたファイルを、.htmlファイルにコンパイルをして使います。

試しにindex.pugというファイルを作成して、コンパイルしてみましょう。適当なフォルダにindex.pugというファイルを作って、下のコードを書き込みます。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title タイトル
  body
    h1 見出し１
    #container
      p Pugのテストページです。

ターミナルでカレントディレクトリに移動したあと、下のコードを実行してみてください。

$ pug index.pug

  rendered index.html

コンパイルが実行され、index.pugと同じ階層（ディレクトリ）に、index.htmlというファイルが生成されたかと思います。

ファイルを開いてみましょう。

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><style src="css/style.css"></style><title>タイトル</title></head><body><h1>見出し１</h1><div id="container"><p>Pugのテストページです。</p></div></body></html>

HTMLコードが生成されていますね。これでコンパイルが完了です。

ところで、いちいち上のコマンドを実行するのは手間ですよね。そこで、下のようにすることでpugファイルを監視できるようになります。pugファイルに変更があった場合、自動でコンパイルを行ってくれるので便利です。

$ pug index.pug --watch

  watching index.pug
  rendered index.html

「Ctrl + C」を押すことで、監視を止めることができます。

コードを整形する

上でPugのコンパイルを行いましたが、HTMLコードが1行で見づらかったかと思います。そこで、HTMLコードを整形してみましょう。

コンパイル時に、下のようにすればOKです。

$ pug index.pug --pretty

生成されたファイルを見ると、キチンと整形されたHTMLが生成されていることがわかります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <style src="css/style.css"></style>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し１</h1>
    <div id="container">
      <p>Pugのテストページです。</p>
    </div>
  </body>
</html>

インクルードする

Pugの基本的な記法や使い方を見てきましたが、さらに2つ。インクルードと継承もご紹介しましょう。この2つを使うと、Pugをさらに便利に使うことができます。

まずはインクルードから。

Webページは一般的に、ヘッダーやフッター、サイドバーなどの共通部分から構成されています。全てのページで同じコードを書くのは、非効率ですよね。

そこでインクルードの登場です。

共通部分は他のファイルに移しておき、必要な時に読み込む。コーディングが楽になりますし、保守や改修が格段にしやすくなります。

このように、他のファイルからコードを読み込むことをインクルードと呼ぶのです。

具体例を見ていきましょう。まずは元の状態のコードです。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title タイトル
  body
    header
      h1 見出し１
      nav
        ul
          li
            a(href="###.html") メニュー１
          li
            a( href="###.html") メニュー２
          li
            a(href="###.html") メニュー３
    main
      h2 見出し２
      p ファイルをインクルードする方法です。

色が変わっている部分、すなわちヘッダー部分をheader.pugというファイルに移しましょう。

header
  h1 見出し１
  nav
    ul
      li
        a(href="###.html") メニュー１
      li
        a(href="###.html") メニュー２
      li
        a(href="###.html") メニュー３

ヘッダー部分を取り除いた結果、index.pugは下記のようになりました。ここにあるように、他ファイルをインクルードするにはincludeを使います。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title タイトル
  body
    include header.pug
    main
      h2 見出し２
      p ファイルをインクルードする方法です。

index.pugをコンパイルすると、下のようにheader.phgがインクルードされた結果が出力されます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <style src="css/style.css"></style>
    <title>タイトル</title>
  </head>
  <body>
    <header>
      <h1>見出し１</h1>
      <nav>
        <ul>
          <li><a href="###.html">メニュー１</a></li>
          <li><a href="###.html">メニュー２</a></li>
          <li><a href="###.html">メニュー３</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>見出し２</h2>
      <p>ファイルをインクルードする方法です。</p>
    </main>
  </body>
</html>

上の例ではヘッダー部分のみを書き出してパーツ化をしましたが、もちろんその他の共通部分をインクルードしてもいいでしょう。

継承する

上ではファイルをインクルードする方法についてご紹介しましたが、さらにPugでは継承を行うことができます。

継承はオブジェクト指向の言語で頻繁に登場するので、ご存じの方も多いかと思いますが、簡単に解説しておきましょう。

Javaなどのオブジェクト指向の言語では、クラスとして共通で使いたい部分をスーパークラス（親クラス）とします。共通部分を利用したい場合は、スーパークラスの特徴を引き継ぎ、サブクラス（子クラス）とするのです。このように、他のオブジェクトに書かれている特徴を利用することを継承と呼びます。

Pugにもこれと同じ機能が備わっています。共通部分が書かれているPugファイルを読み込んで、そこに書かれている特徴を引き継ぐことことができるのです。

ということで、具体的に例をあげながら見ていきましょう。

まずは下のindexファイルを見てください。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title タイトル
  body
    header
      h1 見出し１
      nav
        ul
          li メニュー１
          li メニュー２
          li メニュー３

ここから共通した内容を抜き出し、下のような親ファイルをつくります。これが継承元となるファイルで、スーパークラスにあたるものです。

ハイライトしているblockの部分が、継承先で置き換わる部分です。ここではtitleとheading1、navitemsの3箇所が置き換わることになります。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    block title
  body
    header
      block heading1
      nav
        ul
          block navitems

さて、親ファイルに共通部分を抜き出したあとのindexファイルはどうなったでしょうか？下を見てみてください。

extends _layout
block title
  title タイトル
block heading1
  h1 見出し１
block navitems
  li メニュー１
  li メニュー２
  li メニュー３

随分と簡潔になりましたね！

extendsの後に継承するファイルを指定します。ここでは先ほど作成した_layout.pugを継承しています。その後ろに、_layout.pugでblockを使って指定していた部分の内容を列挙していきます。blockの名称で対応させているので、一字一句間違えないように書いてくださいね。

これをコンパイルすると、下のようなHTMLが出力されます。_layout.pugを継承したindex.pugがコンパイルされて、index.htmlが出力されたということになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <style src="css/style.css"></style>
    <title>タイトル</title>
  </head>
  <body>
    <header>
      <h1>見出し１</h1>
      <nav>
        <ul>
          <li>メニュー１</li>
          <li>メニュー２</li>
          <li>メニュー３</li>
        </ul>
      </nav>
    </header>
  </body>
</html>

Webページの骨組みを親ファイルに書いておき、各ページでは継承を使って対応する箇所を埋めていくイメージになります。

継承を使うことで、書かなければいけないコードをさらに減らすことができますし、ページ改修も容易になります。Pugを使うのであれば、継承も使いこなしたいところです。

あとがき

Pugの特徴や導入方法、基本的な使い方（記法）についてまとめてご紹介しました。

また記事で取り上げた以外にも、便利な機能がいろいろと備わっています。例えばif文やwhile文などの条件文も使えますし、mixinを使うこともできます。

Pugを使うと開発がスピードアップできること間違いなしなので、マークアッパーなどのエンジニアを中心に活用していただければと思います。