Pugを使えばhtmlマークアップを高速化でき、メンテナンスもしやすくなります。

include文を使うと、他のpugファイルはもちろん、javascriptやcssといった他の形式のファイルも読み込めます。ファイルを分割管理して、メンテナンスしやすくするのに便利です。

mixinでブロックをパーツ化して流用すればコード量を少なく、見通しを良くすることができます。

eachはjavascript感覚でかなり応用の利く繰り返し処理が可能、シンプルにループを回すだけならwhileですね。

それぞれの基本的な使い方を以下の順番で説明していきます。

  1. include
  2. mixin
  3. 繰り返し処理
    1. each
    2. while

Pugの基本的な構文はこちら。

Pugを使えばHTMLがサクサク書ける! 今回は最低限必要な基本の書き方をまとめました。コメントアウトやプレーンテキストの表記方法の違いも解説します。

include

include文を使って、他のPugファイルを読み込むことができます。

パーツごとに分割して管理できるので便利ですね。

//- index.pug
doctype html
html
  include includes/head.pug
  body
    h1 My Site
    p Welcome to my super lame site.
    include includes/foot.pug
//- includes/head.pug
head
  title My Site
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')
//- includes/foot.pug
footer#footer
  p Copyright (c) foobar
<!DOCTYPE html>
<html>

<head>
  <title>My Site</title>
  <script src="/javascripts/jquery.js"></script> 
  <script src="/javascripts/app.js"></script> 
</head>

<body>
  <h1>My Site</h1>
  <p>Welcome to my super lame site.</p>
  <footer id="footer">
    <p>Copyright (c) foobar</p>
  </footer>
</body>

</html>

拡張子の.pugは省略できるようです。

Pug以外のファイルもincludeできる

Pug以外のファイルは中のテキストがそのままインクルードされます。

//- index.pug
doctype html
html
  head
    style
      include style.css
  body
    h1 My Site
    p Welcome to my super lame site.
    script
      include script.js
/* style.css */
h1 {
  color: red;
}
// script.js
console.log('You are awesome');
<!DOCTYPE html>
<html>

<head>
  <style>
    /* style.css */
    h1 {
      color: red;
    }
  </style>
</head>
 
<body>
  <h1>My Site</h1>
  <p>Welcome to my super lame site.</p>
  <script>
    // script.js
    console.log('You are awesome');
  </script>
</body>

</html>

Includes – Pug

mixin

基本の形は、以下の通り。mixinを宣言したら、「+[mixin名]」で使用します。

mixin list
ul
li item1
li item2
li item3

+list
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

引数

引数を取ることができます。デフォルト値を設定することもできます。

mixin fruit(name, cat='fruit')
li(class=cat)= name
ul
+fruit('orange')
+fruit('banana')
+fruit('cabbage', 'vegetable')
<ul>
<li class="fruit">orange</li>
<li class="fruit">banana</li>
<li class="vegetable">cabbage</li>
</ul>

ブロック

mixinを宣言するときに「block」と書いた部分に、任意のブロックを入れることができます。

mixin article(title)
.article
.article-wrapper
h1= title
if block
block
else
p No content provided

+article('Hello world')

+article('Hello world')
p This is my
p Amazing article
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>No content provided</p>
</div>
</div>
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>This is my</p>
<p>Amazing article</p>
</div>
</div>

Rest Arguments

不特定数の引数を取って繰り返し処理することができます。

mixin list(id, ...items)
ul(id=id)
each item in items
li= item
+list('my-list', 'orange', 'banana', 'cabbage', 'cucumber')
<ul id="my-list">
<li>orange</li>
<li>banana</li>
<li>cabbage</li>
<li>cucumber</li>
</ul

Mixins – Pug

繰り返し処理

JavaScriptの「for」ももちろん使えますが、ここでは「each」と「while」の2つのメソッドを使って繰り返し処理する方法をご紹介します。

each

まずは最も単純な構文から。

ul
  each val in [1, 2, 3]
    li= val
<ul>
  <li>1</li> 
  <li>2</li>  
  <li>3</li>  
</ul>

インデックスを使う

ul
  each val, index in ['zero', 'one', 'two']
    li= index + ': ' + val
<ul>
  <li>0: zero</li> 
  <li>1: one</li>  
  <li>2: two</li> 
</ul>

インデックスにキーをあてる

オブジェクトのキーをインデックスとして扱います。

ul
  each val, index in {1:'one',2:'two',3:'three'}
    li= index + ': ' + val
<ul>
  <li>1: one</li>  
  <li>2: two</li>  
  <li>3: three</li>  
</ul>

JavaScriptと併せて使う

eachに使う配列やオブジェクトはただのJavaScriptなので、変数はもちろん、関数とかを入れたって大丈夫です。

- var values = [];
ul
  each val in values.length ? values : ['There are no values']
    li= val 
<ul>
  <li>There are no values</li>  
</ul> 

「else」で例外処理する

繰り返し処理する変数に値が入っていないときに実行するブロックを追加できます。

- var values = [];
ul
  each val in values
    li= val
  else
    li There are no values 
<ul>
  <li>There are no values</li>  
</ul>  

while

回数を回すだけのループなら「while」で。

- var n = 0;
ul
  while n < 4
    li= n++ 
<ul> 
  <li>0</li>  
  <li>1</li> 
  <li>2</li>  
  <li>3</li>  
</ul> 

Iteration – Pug