Pugの大きなメリットの一つは、繰り返し処理を使ってHTMLをカンタンに書けること。

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