【Pug】ゴリラでもわかるJade改めPug入門

Posted on2016年3月26日 Edit on by misumi_takuma
ゴリラとパグ

Jadeが商標うんたらで、Pugに名前が変わるそうなので使ってみました。
Jade 2.0.0からPugになるそうです。

Jadeの記事はこちら

【Jade】ゴリラでもわかるJade入門 〜Jadeを使ってみる〜

ゴリラのイラストは素材工場さんから

素材工場

パグのイラストはイラストACさんから

イラストAC

目次
  1. Pugとは
  2. Pugのいいところ
  3. インストール
  4. Pugファイルを作成してみる
  5. Pugの書き方いろいろ
  6. Pugの便利機能
  7. gulpでPugをコンパイルする

Pugとは

PugはHTMLを書くためのテンプレートエンジンです。

Pug

CSSにおけるSassやStylusのようなもので、ざっくり言うとHTMLの作成を簡単にしてくれます。HTMLのようにタグで囲むことがない代わりに、改行やインデントなどで全体を構成していきます。

Pugのいいところ

Pugを使うと、いろいろと楽になります。

  • 記述を省略できる（タグで囲む必要なし、class,idを書かなくていい）
  • ファイル分割できる（一部をincludeで読み込んだり、見た目や管理がスッキリ）
  • 変数やループとかがあって便利

インストール

Pugを使うためには準備が必要ですが、簡単です。

Node.jsのインストール

Pugの公式サイトに「NODE TEMPLATE ENGINE」と書かれているように、PugはNode.jsで動いています。

Node.jsをインストールしていない人は公式サイトからダウンロードし、PCにインストールしてください。

Node.js

Pugのインストール

Node.jsをインストールできたら、Pugをインストールします。

以下コマンドをターミナルでたたくとPugがインストールされます。

npm i pug-cli -g

以下コマンドでバージョンが表示されたら、インストール完了です。

pug --version

Pugファイルを作成してみる

まず、index.pugを作成します。作る場所はどこでも大丈夫です。

index.pugに以下を書きます。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title Pugテスト
  body
    h1.sitettl Pugテストサイトタイトル
    main.main
      h2.content_ttl メインタイトル

冒頭で書いた通り、Pugはタグで囲んでないですね。

Pugの基本記法

Pugは基本的に以下ように書きます。

  • doctype htmlで宣言文
  • 改行＋インデントで要素の入れ子を作る
  • タグ名＋半角スペースでタグ内のテキスト

PugをHTMLにコンパイル

先ほど作ったPugファイルをターミナルを使って、HTMLファイルに書き出してみます。

ターミナルを開き、Pugファイルがあるディレクトリへ移動しておきます。

[例]

cd pugtest

Pugファイルがあるディレクトリへ移動した上で、以下コンパイルのコマンドをターミナルに入力します。

pug index.pug

すると同じディレクトリ内にindex.htmlが生成されます。

index.html
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><style src="css/style.css"></style><title>Pugテスト</title></head><body><h1 class="sitettl">Pugテストサイトタイトル</h1><main class="main"><h2 class="content_ttl">メインタイトル</h2></main></body></html>

横一直線で見づらいので、以下コマンドでコンパイルします。

pug index.pug --pretty

すると、見やすいHTMLを書き出してくれます。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <style src="css/style.css"></style>
    <title>Pugテスト</title>
  </head>
  <body>
    <h1 class="sitettl">Pugテストサイトタイトル</h1>
    <main class="main">
      <h2 class="content_ttl">メインタイトル</h2>
    </main>
  </body>
</html>

Pugの書き方いろいろ

gorilla2

タグが不要なこと以外にもPug特有の書き方はいろいろとあります。

改行せずに要素の入れ子をつくる

Pugは「: ＋ 半角スペース」で横並びに書いても、要素の入れ子を作ることができます。

例えばメニューで「nav > ul > li > a > span」という感じの構成の場合、
改行＋インデントを使うと縦に長くなって、逆に見づらくなる場合があります。

そんな時にこの書き方が使えます。

nav
  ul
    li: a(href="#") Top
    li: a(href="#") About
    li: a(href="#") Works
    li: a(href="#") Contact
    li: a(href="#"): span Links
コンパイル結果
<nav>
    <ul>
        <li><a href="#">Top</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#"><span>Contacts</span></a></li>
    </ul>
</nav>

idとclassの書き方

idは#、classは.でつなげて書きます。

いちいちclassやクォーテーションを書かなくていいですね。

section#top
  .content.inner
コンパイル結果
<section id="top">
    <div class="content inner"></div>
</section>

属性の書き方

hrefやsrcなどの属性はかっこ内に書きます。

// CSS
link(link="css/style.css")
 
// js
script(src="js/main.js")
 
// リンク
a(href="#") Top
 
// inputタグ
input(type="text" checked)
 
input(
  type="radio"
  name="hoge"
  checked
)

複数ある場合は、スペース横並びでも、改行でも大丈夫です。

改行

文章の改行をしたいとき、brタグを使うには以下のように書きます。

p
  |トップページのコンテンツ
  br
  |トップページのコンテンツ
コンパイル結果
<p>トップページのコンテンツ<br>トップページのコンテンツ</p>

コメント

Pugのコメントの書き方は2種類あります。
書き出したHTML内にコメントを残す方法と残さない方法です。

// HTMLで書き出されるコメント
 
//- HTMLで書き出されないコメント

Pugの便利機能

Pugを使うと記述を省略できる以外にも、便利な書き方があります。

include

記述の一部をパーツ化し、includeで必要な箇所に読み込むことができます。

ページ間の共通部分をパーツ化しておくことで、管理や修正がやりやすくなります。

例えば、以下のようなPugファイルがあったとします。

doctype
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title Pugテスト
  body
    header.header
      h1.sitettl Pugテストサイトタイトル
      nav
        ul
          li
            a(href="#") Top
          li
            a(href="#") About
          li
            a(href="#") Works
          li
            a(href="#") Contact
 
    main.main
      h2.content_ttl トップページタイトル
 
      p トップページのコンテンツ
 
    footer.footer
      small copyright

includeを使って書くとこのようになります。

index.pug

doctype
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title Pugテスト
  body
    include include/header.pug
 
    main.main
      h2.content_ttl トップページタイトル
 
      p
        |トップページのコンテンツ
        br
        |トップページのコンテンツ
 
      section#top
        .content.top
 
  footer.footer
      small copyright

トップページや下層ページでも同じ構成になりそうな、ヘッダーをincludeで読み込んでみました。

ヘッダーのPugファイルはincludeディレクトリ以下に置いています。

[header.pug]

header.header
  h1.sitettl Pugテストサイトタイトル
  nav
    ul
      li
        a(href="#") Top
      li
        a(href="#") About
      li
        a(href="#") Works
      li
        a(href="#") Contact

includeで読み込んでおくと、後にメニューの表記などが変更になった場合、
header.pugを修正すれば全てのページで変更されます。

変数が使える

「- var 変数名 = 変数の中身」で定義します。

例

- var title = "ゴリラでもわかるPug入門";

変数を使う場合は「#{変数名}」で使います。

header.header
  h1.sitettl #{title}

使いまわしそうなものは変数定義しておくと、後に変更があった場合に楽です。

ループ

同じ要素が続くときはループで繰り返すことができます。

for文を使う場合

section#top
  .content.top
  - for (var i = 0; i < 3; i++)
    .block
      h2(class="#{i}") 見出し
      p テキストテキスト
      a(href="#") ボタン
コンパイル結果
<div class="block">
    <h2 class="0">見出し</h2>
    <p>テキストテキスト</p><a href="#">ボタン</a>
</div>
<div class="block">
    <h2 class="1">見出し</h2>
    <p>テキストテキスト</p><a href="#">ボタン</a>
</div>
<div class="block">
    <h2 class="2">見出し</h2>
    <p>テキストテキスト</p><a href="#">ボタン</a>
</div>

単純な要素の繰り返しにはfor文が良さそうです。

#{i}と書けば連番をふることができます。

eachを使う場合

ul
  each val in ["Top", "About", "Works", "Contact"]
    li: a(href="#")= val

each文を使う繰り返しもあります。

コンパイル結果
<ul>
    <li><a href="#">Top</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Contact</a></li>
</ul>

gulpでPugをコンパイルする

gulpでPugをコンパイルする記事を書きました。

【Jade/Pug】gulpでJade / Pugをコンパイルする

さいごに

Pugは他にも条件文や、mixin、extendsなど便利な機能がまだまだあります。

ぜひお試しください！


See Also