> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# forループ

> Forループは、HubLでのオブジェクトのシーケンスに対する反復処理に使用できます。 

forループは、HubLでのオブジェクトのシーケンスに対する反復処理に使用できます。主に[ブログコンテンツ](/cms/start-building/building-blocks/templates/blog)をリスト形式でレンダリングする場合に使用されますが、他のシーケンス変数を並べ替える場合にも使用できます。

forループは、`{% for %}`文で始まり`{% endfor %}`文で終わります。`{% for %}`文では、シーケンス項目の名前に続き、`in`を使ってシーケンス名を指定します。`for`文の始まりから終わりまでの間のコードが、反復の度に出力されます。このコードには通常、各シーケンス項目の出力変数が含まれます。forループの基本構文は以下のとおりです。

```hubl theme={null}
{% for item in items %}
	{{ item }}
{% endfor %}
```

変数値のシーケンスをリストに出力する方法を以下の例に示します。

<CodeGroup>
  ```html example.html theme={null}
  {% set languages = ["HTML", "CSS", "Javascript", "Python", "Ruby", "PHP", "Java"] %}

  <h1>Languages</h1>;
  <ul>
  {% for language in languages %}
  <li>{{ language }}</li>
  {% endfor %}
  </ul>
  ```

  ```html example.html theme={null}
  <h1>Languages</h1>
  <ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
  <li>Python</li>
  <li>Ruby</li>
  <li>PHP</li>
  <li>Java</li>
  </ul>
  ```
</CodeGroup>

## ループプロパティー

ループの反復中に、[条件文](/cms/reference/hubl/if-statements)を使用してループの動作を定義できます。変数プロパティー`loop.index`によって、ループの現在の反復数（イテレーション）がカウントされます。他にも反復数をさまざまな方法でカウントするloop変数プロパティーがあります。これらのプロパティーについては以下に示します。

| 変数               | Description                           |
| ---------------- | ------------------------------------- |
| `loop.cycle`     | シーケンスリスト間を循環するヘルパー関数。後述の説明を参照してください。  |
| `loop.depth`     | 再帰ループでのレンダリングの現在の深さを示します。レベル1から開始します。 |
| `loop.depth0`    | 再帰ループでのレンダリングの現在の深さを示します。レベル0から開始します。 |
| `loop.first`     | この変数は、ループの最初の反復である場合にtrueとして評価されます。   |
| `loop.index`     | ループの現在の反復数。この変数はカウントを1から開始します。        |
| `loop.index0`    | ループの現在の反復数。この変数はカウントを0から開始します。        |
| `loop.last`      | この変数は、ループの最後の反復である場合にtrueとして評価されます。   |
| `loop.length`    | シーケンスの項目の数。                           |
| `loop.revindex`  | ループの終わりまでの反復数。1までカウントダウンします。          |
| `loop.revindex0` | ループの終わりまでの反復数。0までカウントダウンします。          |

さまざまなループ変数の使用例を以下にいくつか示します。以下の基本的な例では、`loop.index`を使用して、反復の度に出力されるカウントを行います。

<CodeGroup>
  ```html example.html theme={null}
  {% set loopy = ["Content", "Social", "Contacts", "Reports"] %}
  {% for app in loopy %}
  {{ loop.index }}. {{app}} <br>
  {% endfor %}
  ```

  ```html example.html theme={null}
  1. Content <br />
  2. Social <br />
  3. Contacts <br />
  4. Reports <br />
  ```
</CodeGroup>

次の例では、条件文を使用して、ループの長さが特定の数で`divisibleby`（割り切れる）かどうかをチェックします。次に、記事項目divの幅をレンダリングします。この例では標準のブログ記事ループを使用し、ループに6件の記事があると仮定しています。

<CodeGroup>
  ```html example.html theme={null}
  {% for content in contents %}
  {% if loop.length is divisibleby 4 %}
  <div style="width:25%">Post content</div>

  {% elif loop.length is divisibleby 3 %}
  <div style="width:33.33332%">Post content</div>

  {% else %}
  <div style="width:50%">Post content</div>

  {% endif %}
  {% endfor %}
  ```

  ```html example.html theme={null}
  <div style="width:33.33332%">Post content</div>
  <div style="width:33.33332%">Post content</div>
  <div style="width:33.33332%">Post content</div>
  <div style="width:33.33332%">Post content</div>
  <div style="width:33.33332%">Post content</div>
  <div style="width:33.33332%">Post content</div>
  <div style="width:33.33332%">Post content</div>
  ```
</CodeGroup>

## ネストしたループ

ループを他のループでネストすることもできます。子forループは、親forループが反復される度に実行されます。以下の例では、親項目の`<ul>`の中でネストしている`<ul>`に子項目のリストが出力されます。

<CodeGroup>
  ```html example.html theme={null}
  {% set parents = ["Parent item 1", "Parent item 2", "Parent item 3"] %}
  {% set children = ["Child item 1", "Child item 2", "Child item 3"] %}
  <ul>
  {% for parent in parents %}
  <li>{{parent}}<ul>
  {% for child in children %}
  <li>{{child}}</li>
  {% endfor %}
  </ul>
  </li>
  {% endfor %}
  </ul>
  ```

  ```html example.html theme={null}
  <ul>
  <li>
  Parent item 1
  <ul>
  <li>Child item 1</li>
  <li>Child item 2</li>
  <li>Child item 3</li>
  </ul>
  </li>

  <li>
  Parent item 2
  <ul>
  <li>Child item 1</li>
  <li>Child item 2</li>
  <li>Child item 3</li>
  </ul>
  </li>

  <li>
  Parent item 3
  <ul>
  <li>Child item 1</li>
  <li>Child item 2</li>
  <li>Child item 3</li>
  </ul>
  </li>
  </ul>
  ```
</CodeGroup>

## cycle

反復の度に一連の文字列値を循環して出力するには、forループでcycleタグを使用します。この手法の実用例として、リスト内のブログ記事に適用するクラスを交互に切り替える処理が挙げられます。このタグは3つ以上の値に使用でき、ループの反復数がcycleの値よりも多い場合にcycleが繰り返されます。以下の例では、`odd`と`even`というクラスがリスト内の記事に適用されます（この例ではループに5件の記事が含まれていると仮定しています）。

カンマ区切りのcycle文字列値の間に**スペースがない**点に注意してください。

<CodeGroup>
  ```html example.html theme={null}
  {% for content in contents %}
  <div class="post-item {% cycle "odd","even" %}">Blog post content</div>
  {% endfor %}
  ```

  ```html example.html theme={null}
  <div class="post-item odd">Blog post content</div>
  <div class="post-item even">Blog post content</div>
  <div class="post-item odd">Blog post content</div>
  <div class="post-item even">Blog post content</div>
  <div class="post-item odd">Blog post content</div>
  ```
</CodeGroup>

## ループ内の変数

<Warning>
  ループ内で定義した変数は、そのループの範囲内に制限され、ループの外側から呼び出すことはできません。
</Warning>

ループ外で定義した変数をループ内から呼び出すことはできますが、その逆はできません。

## ループでのキーと値のペア

ループの対象にするディクショナリー（辞書型）にキーと値が含まれている場合、単純なforループで参照できるのは値に限られます。forループ内でキーと値の両方を参照するには、次のような形式のHubLを使用します。

<CodeGroup>
  ```text input.txt theme={null}
  {% set dict_var = {"name": "Cool Product", "price": "$20", "size":"XL"} %}
  {% for key, val in dict_var.items() %}
  {{ key }}: {{ val }}<br>
  {% endfor %}
  ```

  ```text output.txt theme={null}
  name: Cool Product <br />
  price: $20 <br />
  size: XL <br />
  ```
</CodeGroup>

## 設定した回数の反復

設定した回数だけを反復する処理は、HTMLやCSSを生成するときに便利です。この処理はrange関数を使用すると実現できます。

<CodeGroup>
  ```html example.html theme={null}
  {% for x in range(0,5) %}
  {{loop.index}}
  {% endfor %}
  ```

  ```text rendered output.txt theme={null}
  1 2 3 4 5
  ```
</CodeGroup>

## ループでHubLタグを使用する

ページにタグを追加すると、HubSpotにより、ラッパー側のHTMLに自動的に`id`が割り当てられます。このタグはタグの「name」ごとに固有です。特定のタグをforループ内で使用する場合に、固有のnameを設定することは現実的ではありません。タグに`unique_in_loop`パラメーターを追加して、固有idを生成してください。このパラメーターによってモジュール名に現在のループの反復数が追加されることで、項目が重複しなくなります。固有idは、HTMLの有効性に必要なだけでなく、[アクセシビリティー](/cms/best-practices/improve-existing-sites/accessibility)においても重要です。

```hubl theme={null}
{% for item in module.icon_field %}
	{% icon
		name="{{ item.name }}",
		style="{{ item.type }}",
		unicode="{{ item.unicode }}",
        unique_in_loop=True
	%}
{% endfor %}
```