繰り返し

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>

Pug逆引きリファレンス一覧へ戻る