> ## 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のループレンダリング機能の使い方を解説します。静的ループデータ、リモートデータソースのループ、ネストしたループなど、カスタムページで繰り返し表示を実現するシナリオと設定手順を紹介します。

| **機能**  | **Freeプラン** | **ベーシック版** | **プロフェッショナル版** | **専用版** |
| ------- | ----------- | ---------- | -------------- | ------- |
| カスタムページ | 非対応         | 非対応        | 対応             | 対応      |

## 1. 概要

YiDAでは、繰り返し表示が必要なシナリオ向けに、ループレンダリング設定を提供しています。

ループデータは配列構造である必要があります。文字列配列、数値配列、オブジェクト配列のいずれにも対応しています。

## 2. ユースケース

### シナリオ1：静的ループデータ

**ループデータ**に静的な配列を定義します。ループ本体の内部では、`this.item`で現在のループ値、`this.index`で現在のループインデックスにアクセスできます。**ループパラメータ**を編集することで、`item` / `index`を`content` / `idx`などのようにカスタマイズすることも可能です。

**ループデータ**を編集し、ループデータを入力します。

フォーム編集ページ。

必要な設定にループ変数をバインドします。

変数のバインド。

結果は以下のとおりです。

### シナリオ2：リモートデータソースのループ

リモートデータソースを作成します。

データソースをループ変数にバインドします。

続いて、ループ変数の値をコンポーネントにバインドします。

シナリオ1と比較すると、本シナリオではリモートデータソースの定義と、コンポーネントのループデータをそのデータソースにバインドするという2つの手順が追加されます。

結果は以下のとおりです。

### シナリオ3：ネストしたループ

リモートデータソースが以下のデータ構造を返すとします。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
[
  {
    type: 'タイトル1です',
    detail: [
      'コンテンツ1',
      'コンテンツ2',
      'コンテンツ3'
    ]
	},
  {
    type: 'タイトル1です',
    detail: [
      'コンテンツ1',
      'コンテンツ2',
      'コンテンツ3'
    ]
	},
  ...
]
```

2階層のネストしたループを実装でき、拡張してN階層（N \< Infinity）まで対応可能です。

2つのコンポーネントを組み合わせてネストしたループを適用する場合は、それらをコンテナコンポーネントで包みます。外側のループデータをコンテナコンポーネントに設定し、内側のループデータを内側のコンポーネント（本例ではTextコンポーネント）に設定します。

外側の設定はシナリオ2と同じ方法で行います。ポイントは内側の設定方法です。

お気付きかもしれませんが、外側のループ値は`this.item`を使用しているのに対し、内側では`this.content`を使用しています。これは意図的な設計であり（内側の**ループパラメータ**を編集して設定します）、内側の階層からも外側の値にアクセスできるようにするためです。両方で`this.item`を使用すると、内側の階層が外側を上書きしてしまいます。

結果は以下のとおりです。

## 3. 注意事項

### 3.1 ループ内での`this`の使用

ページビルダー全体を通じて、`this`には階層的なスコープがあります。現在のスコープが`this`、親スコープが`this.$super`、最上位のスコープが`this.$top`です。

たとえば、フォーム識別子が`'fooForm'`のフォームコンテナにループレンダリングを適用する場合、**ループ本体**の内部で`this.$('fooForm').getValue()`を使用すると、現在のループのフォームの値を取得できます。ループされたすべてのフォームの値を取得するには、`this.$super.$('fooForm').map(item => item.getValue())`を使用します。