テンプレート構文：繰り返し処理

テンプレート内で配列やオブジェクト、数値の範囲などを使って繰り返し処理を行いたい場合は、@for ディレクティブを使用します。

ループの中では、現在の要素やインデックスなどを使って動的にコンテンツを構築できます。

基本構文

配列、オブジェクト、範囲（range）など、反復可能な値であれば繰り返し処理ができます。

@for ( let 変数名 in 配列やオブジェクト )
  <!-- 繰り返し処理されるテンプレート -->
@endfor

配列の各要素を順に let で宣言した変数に代入してループできます。

繰り返し処理に使う変数名は、自由に定義できます。

@for ( let user in users )
  <div>{{ user.name }}</div>
@endfor

配列のインデックスを使いたい場合は、let で宣言した index と value のペアに代入してループできます。

こちらも、変数名は自由に定義できます。

@for ( let (index, value) in values )
  <div>{{index}}: {{ value }}</div>
@endfor

オブジェクトの各プロパティを let で宣言した変数に代入してループできます。

@for ( let value in object )
  <div>{{ value }}</div>
@endfor

オブジェクトのキーを使いたい場合は、let で宣言した key と value のペアに代入してループできます。

@for ( let (key, value) in object )
  <div>{{ key }}: {{ value }}</div>
@endfor

数値の範囲を指定してループできます。

@for ( let i in 1..5 )
  <div>{{ i }}</div>
@endfor

上記の例では、i は 1 から 4 までの値を順に取りながらループします。末尾の数値は含まれません。

範囲は昇順（1..5）だけでなく、4..0 のような降順にも対応しています。

@for では、配列・オブジェクト・数値範囲のリテラルだけでなく、式の評価結果 を使ってループすることもできます。

@for ( let word in "one,two,three"->split(',') )
  <div>{{ word }}</div>
@endfor

また、関数の戻り値が配列 であれば、そのままループできます。

@for ( let user in get_users() )
  <div>{{ user.name }}</div>
@endfor

@for は他の構文と柔軟に組み合わせて使えます。

@for ( let user in users )
  @if ( user.active )
    <li>{{ user.name }}</li>
  @endif
@endfor

まとめ