Iteration

更新日: 2018-09-10

繰り返し処理

Pugはeachとwhileの2つのイテレーションが使えます。

Pugでは配列やオブジェクトに繰り返し構文を使って、簡単に処理することができます。

ul
  each val in [1, 2, 3, 4, 5]
    li= val

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</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です。したがって、変数や、関数の呼び出し結果など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>

また、eachの代わりにforを使うこともできます。 forはeachのエイリアスです。

whileを使って繰り返し処理をすることもできます。

- var n = 0;
ul
  while n < 4
    li= n++

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

このコンテンツはpugドキュメントを翻訳/改変したものです。