0Pricing
Sveltejs Academy · レッスン

インデックスとキーを使った{#each}

配列やオブジェクトをループし、インデックスとキーの値にアクセスします。

「インデックスとキーを使った{#each}」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

each ブロック

{#each list as item} は配列を反復処理し、要素ごとにマークアップを1回ずつレンダリングします。

{#each colors as color}
  <li>{color}</li>
{/each}

分割代入

テンプレートを読みやすくするために、項目の構造をインラインで分割代入できます。

{#each users as { id, name }}
  <li>{name}</li>
{/each}

インデックス変数

0 始まりのインデックス用に、2つ目のバインディングを追加します。

{#each items as item, i}
  <li>{i + 1}. {item}</li>
{/each}

キー付き each

項目の後に (item.id) というキーを指定すると、更新時に Svelte が項目を対応付けられます。

{#each todos as todo (todo.id)}
  <Todo {todo} />
{/each}

キーが重要な理由

キーがないと、並べ替えや絞り込みの際に Svelte が項目を取り違え、子コンポーネントの状態がリセットされることがあります。キーによって DOM ノードが安定します。

else ブロック

反復処理の本体の後に {:else} を置くと、リストが空の場合にレンダリングされます。

{#each items as item}
  <li>{item}</li>
{:else}
  <li>No items yet.</li>
{/each}

オブジェクトの反復処理

オブジェクトを反復処理するには、まず entries に変換します。

{#each Object.entries(map) as [key, value]}
  <li>{key}: {value}</li>
{/each}

Set と Map

[...set] または [...map] でラップして反復処理します。

ネストした each

2次元データには、{#each} ブロックをネストします。

{#each rows as row}
  {#each row as cell}<td>{cell}</td>{/each}
{/each}

閉じタグ

必ず {/each} で閉じてください。閉じタグの位置が正しくないとコンパイルエラーになります。

パフォーマンスのヒント

頻繁に変化するリストにはキーを使用してください。並べ替えの計算量を O(n^2) ではなく O(n) にできます。

確認問題

each における (item.id) の役割は何ですか？

復習

{#each} は配列を反復処理し、インデックスとキーのバインディングに対応します。また、空の状態を {:else} で表示できます。

よくある質問

「インデックスとキーを使った{#each}」レッスンは無料ですか？

はい。「インデックスとキーを使った{#each}」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「インデックスとキーを使った{#each}」で何を学びますか？

配列やオブジェクトをループし、インデックスとキーの値にアクセスします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「インデックスとキーを使った{#each}」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. {#if} {#else if} {#else}
  2. インデックスとキーを使った{#each}
  3. 再レンダリングを強制する{#key}
  4. ネストした{#each}とキー付き更新
← Sveltejs Academyに戻る