forループ

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

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

{% for item in items %} {{ item }} {% endfor %}
変数値のシーケンスをリストに出力する方法を以下の例に示します。
{% set languages = ["HTML", "CSS", "Javascript", "Python", "Ruby", "PHP", "Java"] %} <h1>Languages</h1>; <ul> {% for language in languages %} <li>{{ language }}</li> {% endfor %} </ul><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>

ループプロパティー

ループの反復中に、条件文を使用してループの動作を定義できます。変数プロパティー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を使用して、反復の度に出力されるカウントを行います。

{% set loopy = ["Content", "Social", "Contacts", "Reports"] %} {% for app in loopy %} {{ loop.index }}. {{app}} <br> {% endfor %}1. Content <br> 2. Social <br> 3. Contacts <br> 4. Reports <br>

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

{% 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 %}<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>

ネストしたループ

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

{% 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><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>

cycle

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

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

{% for content in contents %} <div class="post-item {% cycle "odd","even" %}">Blog post content</div> {% endfor %}<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>

ループ内の変数

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

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

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

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

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

設定した回数の反復

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

{% for x in range(0,5) %} {{loop.index}} {% endfor %}1 2 3 4 5

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

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

{% for item in module.icon_field %} {% icon name="{{ item.name }}", style="{{ item.type }}", unicode="{{ item.unicode }}", unique_in_loop=True %} {% endfor %}
参考になりましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。