---
title: ループ
---

import { Callout } from 'fumadocs-ui/components/callout'
import { Tab, Tabs } from 'fumadocs-ui/components/tabs'
import { Image } from '@/components/ui/image'

ループブロックはブロックを繰り返し実行するコンテナです。コレクションを反復処理したり、固定回数の操作を繰り返したり、条件が満たされている間継続したりすることができます。

<Callout type="info">
  ループブロックは内部に他のブロックを保持するコンテナノードです。含まれるブロックは設定に基づいて複数回実行されます。
</Callout>

## 設定オプション

### ループタイプ

4種類のループから選択できます：

<Tabs items={['For ループ', 'ForEach ループ', 'While ループ', 'Do-While ループ']}>
  <Tab>
    **For ループ（反復回数）** - 固定回数実行する数値ループ：
    
    <div className="flex justify-center">
      <Image
        src="/static/blocks/loop-1.png"
        alt="反復回数を使用したFor ループ"
        width={500}
        height={400}
        className="my-6"
      />
    </div>
    
    特定の回数だけ操作を繰り返す必要がある場合に使用します。
    

    ```
    Example: Run 5 times
    - Iteration 1
    - Iteration 2
    - Iteration 3
    - Iteration 4
    - Iteration 5
    ```

  </Tab>
  <Tab>
    **ForEach ループ（コレクション）** - 配列やオブジェクト内の各アイテムを反復処理するコレクションベースのループ：
    
    <div className="flex justify-center">
      <Image
        src="/static/blocks/loop-2.png"
        alt="コレクションを使用したForEach ループ"
        width={500}
        height={400}
        className="my-6"
      />
    </div>
    
    アイテムのコレクションを処理する必要がある場合に使用します。
    

    ```
    Example: Process ["apple", "banana", "orange"]
    - Iteration 1: Process "apple"
    - Iteration 2: Process "banana"
    - Iteration 3: Process "orange"
    ```

  </Tab>
  <Tab>
    **While ループ（条件ベース）** - 条件が真と評価される間、実行を継続します：
    
    <div className="flex justify-center">
      <Image
        src="/static/blocks/loop-3.png"
        alt="条件付きWhile ループ"
        width={500}
        height={400}
        className="my-6"
      />
    </div>
    
    特定の条件が満たされるまでループする必要がある場合に使用します。条件は各反復の**前に**チェックされます。

    ```
    Example: While {"<variable.i>"} < 10
    - Check condition → Execute if true
    - Inside loop: Increment {"<variable.i>"}
    - Inside loop: Variables assigns i = {"<variable.i>"} + 1
    - Check condition → Execute if true
    - Check condition → Exit if false
    ```

  </Tab>
  <Tab>
    **Do-While ループ（条件ベース）** - 少なくとも1回実行し、その後条件が真である間継続します：
    
    <div className="flex justify-center">
      <Image
        src="/static/blocks/loop-4.png"
        alt="条件付きDo-While ループ"
        width={500}
        height={400}
        className="my-6"
      />
    </div>
    
    少なくとも1回実行し、その後条件が満たされるまでループする必要がある場合に使用します。条件は各反復の**後に**チェックされます。

    ```
    Example: Do-while {"<variable.i>"} < 10
    - Execute blocks
    - Inside loop: Increment {"<variable.i>"}
    - Inside loop: Variables assigns i = {"<variable.i>"} + 1
    - Check condition → Continue if true
    - Check condition → Exit if false
    ```

    少なくとも1回実行し、その後条件が満たされるまでループする必要がある場合に使用します。条件は各反復の**後に**チェックされます。

    ```
    Example: Do-While Loop
    - Execute first iteration
    - Check condition → Continue if true
    - Check condition → Exit if false
    ```

  </Tab>
</Tabs>

## ループの使い方

### ループの作成

1. ツールバーからループブロックをキャンバスにドラッグします
2. ループタイプとパラメータを設定します
3. 他のブロックをループコンテナ内にドラッグします
4. 必要に応じてブロックを接続します

### 結果へのアクセス

ループが完了すると、集計された結果にアクセスできます：

- **loop.results**: すべてのループ反復からの結果の配列

## 使用例

**API結果の処理** - ForEachループでAPIから取得した顧客レコードを処理

```javascript
// API結果を反復処理
forEach(customerRecord in apiResponse.data) {
  // 各顧客レコードを処理
  processCustomer(customerRecord);
  // 必要に応じてデータベースを更新
  updateDatabase(customerRecord.id, { processed: true });
}
```

**反復的なコンテンツ生成** - Forループで複数のコンテンツバリエーションを生成

```javascript
// 5つのコンテンツバリエーションを生成
for (let i = 0; i < 5; i++) {
  // 各バリエーションに異なるトーンを使用
  const tone = tones[i];
  // AIを使用してコンテンツを生成
  const content = generateContent(prompt, { tone: tone });
  // 結果を保存
  variations.push(content);
}
```

**Whileループによるカウンター** - Whileループでカウンターを使用してアイテムを処理

```javascript
// カウンターを初期化
let counter = 0;

// 条件が満たされるまで処理を続ける
while (counter < items.length && !foundTarget) {
  // 現在のアイテムを処理
  const result = processItem(items[counter]);
  
  // 目標が見つかったかチェック
  if (result.isTarget) {
    foundTarget = true;
  }
  
  // カウンターを増加
  counter++;
}
```

## 高度な機能

### 制限事項

<Callout type="warning">
  コンテナブロック（ループと並列）は互いに入れ子にすることができません。つまり：
  - ループブロックを別のループブロック内に配置することはできません
  - 並列ブロックをループブロック内に配置することはできません
  - どのコンテナブロックも別のコンテナブロック内に配置することはできません
  
  多次元反復が必要な場合は、順次ループを使用するか、データを段階的に処理するようにワークフローを再構成することを検討してください。
</Callout>

<Callout type="info">
  ループは並列ではなく順次実行されます。同時実行が必要な場合は、代わりに並列ブロックを使用してください。
</Callout>

## 入力と出力

<Tabs items={['設定', '変数', '結果']}>
  <Tab>
    <ul className="list-disc space-y-2 pl-6">
      <li>
        <strong>ループタイプ</strong>：'for'、'forEach'、'while'、または'doWhile'から選択
      </li>
      <li>
        <strong>反復回数</strong>：実行する回数（forループ）
      </li>
      <li>
        <strong>コレクション</strong>：反復処理する配列またはオブジェクト（forEachループ）
      </li>
      <li>
        <strong>条件</strong>：評価するブール式（while/do-whileループ）
      </li>
    </ul>
  </Tab>
  <Tab>
    <ul className="list-disc space-y-2 pl-6">
      <li>
        <strong>loop.currentItem</strong>：現在処理中のアイテム
      </li>
      <li>
        <strong>loop.index</strong>：現在の反復番号（0ベース）
      </li>
      <li>
        <strong>loop.items</strong>：完全なコレクション（forEachループ）
      </li>
    </ul>
  </Tab>
  <Tab>
    <ul className="list-disc space-y-2 pl-6">
      <li>
        <strong>loop.results</strong>：すべての反復結果の配列
      </li>
      <li>
        <strong>構造</strong>：結果は反復順序を維持
      </li>
      <li>
        <strong>アクセス</strong>：ループ後のブロックで利用可能
      </li>
    </ul>
  </Tab>
</Tabs>

## 入力と出力

<Tabs items={['設定', '変数', '結果']}>
  <Tab>
    <ul className="list-disc space-y-2 pl-6">
      <li>
        <strong>ループタイプ</strong>: 'for'、'forEach'、'while'、または'doWhile'から選択
      </li>
      <li>
        <strong>反復回数</strong>: 実行する回数(forループ)
      </li>
      <li>
        <strong>コレクション</strong>: 反復処理する配列またはオブジェクト(forEachループ)
      </li>
      <li>
        <strong>条件</strong>: 評価するブール式(while/do-whileループ)
      </li>
    </ul>
  </Tab>
  <Tab>
    ループ**内**でのみ利用可能:
    <ul className="list-disc space-y-2 pl-6">
      <li>
        <strong>{"<loop.index>"}</strong>: 現在の反復番号(0始まり)
      </li>
      <li>
        <strong>{"<loop.currentItem>"}</strong>: 処理中の現在のアイテム(forEachのみ)
      </li>
      <li>
        <strong>{"<loop.items>"}</strong>: 完全なコレクション(forEachのみ)
      </li>
    </ul>
  </Tab>
  <Tab>
    <ul className="list-disc space-y-2 pl-6">
      <li>
        <strong>{"<blockname.results>"}</strong>: すべての反復結果の配列(ブロック名経由でアクセス)
      </li>
      <li>
        <strong>構造</strong>: 結果は反復順序を維持
      </li>
      <li>
        <strong>アクセス</strong>: ループ完了後のブロックで利用可能
      </li>
    </ul>
  </Tab>
</Tabs>

## ベストプラクティス

- **適切な制限を設定**: 実行時間が長くならないよう、反復回数を適切に保つ
- **コレクションにはForEachを使用**: 配列やオブジェクトを処理する場合は、Forループの代わりにForEachを使用
- **エラーを適切に処理**: 堅牢なワークフローのため、ループ内にエラー処理の追加を検討
