> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# ループレンダリング

> YiDA の「ループデータ」設定で配列変数をバインディングし、類似コンポーネントを一括レンダリングする方法を解説します。ループアイテムのデータアクセス方法も紹介し、効率的な UI 構築を支援します。

ループレンダリングが必要なシナリオでは、React の以下のようなアプローチと同様に、YiDA は **ループデータ** 設定オプションを提供します。変数をバインディングすることで、ループレンダリングを簡単に実装できます。

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
function NameList() {
  const names = [{
    name: 'Jack'
  }, {
    name: 'Rose'
  }];
	return (
  	<div>
    {
      names.map((item, index) => (
        <span>{ `No.${index}: ${item.name}` }</span>
      ))
    }
    </div>
  );
}
```

## 設定

ループデータには配列構造が必要です。文字列配列、数値配列、オブジェクト配列のいずれも利用できます。プレミアム属性の「ループデータ」設定からループを構成します。

ループデータのバインディング方法は、次の 2 つです。

* **静的設定** - レンダリング対象の静的な配列データを設定します。
* **変数バインディング** - 変数をバインディングし、グローバル変数またはリモート API からループデータを取得します。

ループ設定が完了すると、ループ本体内のコンポーネントは、注入される次の 2 つのコンテキストを通じてループデータの内部構造にアクセスできます。

* **this.item** - 現在のレコードのループデータを取得します。
* **this.index** - 現在のレコードのループインデックスを取得します（0 から始まります）。

ネストされたループのシナリオでは、次のように反復変数名とインデックス変数名をカスタマイズし、コンテキスト注入変数の情報を指定することで、競合を回避できます。

<Tip>
  ループデータが設定されているコンポーネントは、アウトラインツリーに小さなループアイコンが表示され、ループデータが設定済みであることを示します。
</Tip>

## ユースケース

簡単な例を用いて、ループデータを使って学生リストを表示する方法を説明します。

* 学生情報を保存するグローバル変数を作成します。以下のとおりです。

* コンテナコンポーネントをページにドラッグし、ループデータをバインディングします。以下のとおりです。

* 2 つのテキストコンポーネントをコンテナに配置し、学生の名前 (name) と年齢 (age) をバインディングします。以下のとおりです。

* 右上のプレビューボタンをクリックすると、ループレンダリングの効果を確認できます。以下のとおりです。

* 学生の趣味も配列であることがわかります。これをレンダリングするにはネストされたループが必要です。もう 1 つのテキストコンポーネントをコンテナにドラッグし、趣味をループレンダリングします。（テキストコンポーネントが外側のループのコンテンツにも同時にアクセスできるように、テキストコンポーネントにカスタムの反復変数名とインデックス変数名を設定します。）

* 次に、テキストの content 属性に変数をバインディングし、両方のループのコンテンツを表示します。以下のとおりです。

* 最後にプレビューボタンをクリックすると、以下のプレビュー効果を確認できます。