繰り返し
Pugで条件分岐を行うには、いくつか種類があります。
for文
ある数字の範囲を繰り返すには、forを使用します。
たとえば、1から10までの範囲を繰り返したい場合などです。
基本的にはJavaScriptのfor文と同じです。
構文
- for (初期化, 往復前の式（条件式）, 往復後の式)
繰り返す処理サンプルコード
次の例では1から5までの範囲を繰り返して、li要素を5つ出力します。
Pug
ul
- for (var n = 1; n <= 5; n++)
li(class="item-" + n)="アイテム" + nコンパイル後
<ul>
<li class="item-1">アイテム1</li>
<li class="item-2">アイテム2</li>
<li class="item-3">アイテム3</li>
<li class="item-4">アイテム4</li>
<li class="item-5">アイテム5</li>
</ul>次の例では0から2までの範囲を繰り返して、配列に一致する値をli要素と一緒に出力します。
Pug
- list = ['Apple', 'Orange', 'Banana']
ul
- for (var i = 0; i < 3; i++)
li=list[i]コンパイル後
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>for文はタグ名: -forのようにタグにコロンとスペースを付けることで行とインデントを少なくし短く書くことができます。
Pug
ul: - for (var n = 1; n <= 5; n++)
li(class="item-" + n)="アイテム" + nコンパイル後
<ul>
<li class="item-1">アイテム1</li>
<li class="item-2">アイテム2</li>
<li class="item-3">アイテム3</li>
<li class="item-4">アイテム4</li>
<li class="item-5">アイテム5</li>
</ul>each文
配列や連装配列を繰り返すには、eachを使用します。
構文
each 値を格納する変数名 in 配列または連装配列
繰り返す処理each 値を格納する変数名, インデックス番号またはキーを格納する変数名 in 配列または連装配列
繰り返す処理サンプルコード
次の例は配列を繰り返して、li要素を配列の値と一緒に出力します。
Pug
- foo = ['Apple', 'Orange', 'Banana']
ul
each val in foo
li=valコンパイル後
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>次の例は配列を繰り返して、li要素を配列の値とインデックス番号と一緒に出力します。
Pug
- foo = ['Apple', 'Orange', 'Banana']
ul
each val, index in foo
li="[" + index + "] " + valコンパイル後
<ul>
<li>[0] Apple</li>
<li>[1] Orange</li>
<li>[2] Banana</li>
</ul>次の例は連想配列を繰り返して、li要素を連想配列の値と一緒に出力します。
Pug
-
var foo = {
apple: 'リンゴ',
orange: 'オレンジ',
banana: 'バナナ'
}
ul
each val in list
li=valコンパイル後
<ul>
<li>リンゴ</li>
<li>オレンジ</li>
<li>バナナ</li>
</ul>each文はタグ名: eachのようにタグにコロンとスペースを付けることで行とインデントを少なくし短く書くことができます。
Pug
- foo = ['Apple', 'Orange', 'Banana']
ul: each val in foo
li=valコンパイル後
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>while文
条件に応じてを繰り返すには、while文を使用します。
構文
while 条件式
繰り返す処理サンプルコード
Pug
- var count = 0
ul
while count < 3
li=val
- count++コンパイル後
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>繰り返しを離脱
繰り返しを離脱するには、breakを使用します。
構文
- breakサンプルコード
Pug
- var count = 0
ul
while true
li=count
if count == 2
- break
- count++コンパイル後
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>次の繰り返し処理へスキップ
次の繰り返し処理へスキップするには、continueを使用します。
構文
- continueサンプルコード
Pug
ul
- for (var i = 0; i < 3; i++)
if i == 1
- continue
li=iコンパイル後
<ul>
<li>0</li>
<li>2</li>
</ul>