0Pricing
Sveltejs Academy · レッスン

ネストした{#each}とキー付き更新

ネストしたリストを扱い、キー付きeachブロックでDOMを効率的に更新します。

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

2次元データ

{#each} ブロックをネストして、表、グリッド、ツリーをレンダリングします。

{#each rows as row, i}
  <tr>
    {#each row as cell, j}
      <td>{cell}</td>
    {/each}
  </tr>
{/each}

各レベルのキー

効率的に更新するため、すべてのレベルにキーを追加します。

{#each rows as row (row.id)}
  {#each row.cells as cell (cell.id)}
    ...
  {/each}
{/each}

ツリー構造

ツリー状のデータには、再帰に対応したコンポーネントまたは each ブロックを使用します。

インデックスをキーにしない

配列のインデックスをキーにすると、途中に項目を挿入または削除したときに正しく動作しません。安定した id を使用してください。

可変データの落とし穴

外側の参照を再代入せずにネストした配列を変更すると、リアクティブ性が壊れます。トップレベルで再代入してください。

rows = rows.map(r => r.id === id ? {...r, name} : r);

フィルタリングと並べ替え

フィルタリングや並べ替えでは、必ず新しい配列を返してください。配列をその場で変更しても更新は発生しません。

sorted = [...items].sort();

パフォーマンス

キーを使うと、項目の追加、削除、移動を O(n) で処理でき、完全な再レンダリングを避けられます。

リストの並べ替え

キーがあれば、並べ替えのアニメーションも簡単です。animate:flip と組み合わせてください。

内部での条件付きレンダリング

each の内部に {#if} ブロックを組み込み、表示する項目を細かく制御できます。

項目ごとのコンポーネント

複雑な項目には子コンポーネントを使用して、ループ本体を小さく保ちます。

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

ページネーションのパターン

長いリストでは、数千個のノードをレンダリングするのではなく、ページネーションまたは仮想化を使用します。

確認問題

キーにはインデックスより安定した ID を使うほうがよいのはなぜですか？

復習

2次元データには each ブロックをネストし、安定した ID で各レベルにキーを付け、更新を発生させるためにコレクションを必ず再代入します。

よくある質問

「ネストした{#each}とキー付き更新」レッスンは無料ですか？

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

「ネストした{#each}とキー付き更新」で何を学びますか？

ネストしたリストを扱い、キー付きeachブロックでDOMを効率的に更新します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ネストした{#each}とキー付き更新」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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