- eachディレクティブを使用したループ処理: Svelteでは、eachディレクティブを使用して繰り返し処理を行うことができます。以下は、eachディレクティブを使用したループ処理の例です。
<script>
let items = ['item1', 'item2', 'item3'];
// イテレータ関数
function iterate(item) {
console.log(item);
}
</script>
<ul>
{#each items as item}
<li>{item}</li>
{/each}
</ul>上記の例では、itemsという配列をeachディレクティブでループ処理しています。各要素はitemという名前で参照できます。ループ内では、itemを使用して必要な処理を行うことができます。
- ループ処理と条件分岐の組み合わせ: Svelteでは、ループ処理と条件分岐を組み合わせて使用することもできます。以下は、ループ処理と条件分岐の組み合わせの例です。
<script>
let items = [
{ name: 'item1', show: true },
{ name: 'item2', show: false },
{ name: 'item3', show: true }
];
</script>
<ul>
{#each items as item}
{#if item.show}
<li>{item.name}</li>
{/if}
{/each}
</ul>上記の例では、itemsという配列の各要素にはnameとshowというプロパティがあります。showがtrueの場合にのみ要素を表示します。
- インデックスの取得: ループ処理中に現在のインデックスを取得することもできます。以下は、インデックスの取得の例です。
<script>
let items = ['item1', 'item2', 'item3'];
</script>
<ul>
{#each items as item, index}
<li>{index + 1}: {item}</li>
{/each}
</ul>上記の例では、indexを使用して現在のインデックスを表示しています。インデックスは0から始まるため、表示する際に1を加算しています。
これらは、Svelteでループ処理を行うためのいくつかの方法の例です。必要に応じて、これらのコード例をカスタマイズして使用することができます。