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

Posted on 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の書き方いろいろ

タグが不要なこと以外にも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など便利な機能がまだまだあります。

ぜひお試しください！

Tweet
このエントリーをはてなブックマークに追加
Pocket

こちらの記事もどうぞ

One thought on “【Pug】ゴリラでもわかるJade改めPug入門”

  1. ピンバック: WindowsでExpress4(JavascriptのWEBフレームワーク)（２） - WordPressでフリーオリジナルフォント

Comments are closed.