0Pricing
Sveltejs Academy · レッスン

再レンダリングを強制する{#key}

値が変化したときにコンポーネントを破棄して再作成するため、keyブロックを使用します。

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

key ブロック

{#key expr} は、expr が変化するたびに内容を破棄して再作成します。コンポーネントを新しい状態から始めたい場合に便利です。

アニメーションを再開する

アニメーションする要素を {#key} で囲むと、キーが変わるたびにトランジションを再生できます。

{#key id}
  <div in:fade>{message}</div>
{/key}

コンポーネントの状態をリセットする

内部状態を持つ子コンポーネントを {#key id} で囲むと、id が変わったときにその状態を完全にリセットできます。

{#key currentUser.id}
  <UserProfile user={currentUser} />
{/key}

each のキーとの違い

{#key} ブロックは単一の要素にキーを付けます。一方、{#each ... (key)} はリスト内の項目にキーを付けます。

使用する場面

すべてのフィールドを手動で消去せずに、複雑な内部状態をリセットしたい場合に使用します。

パフォーマンスコスト

キーが変わるたびに、サブツリーは破棄されて再構築されます。キーが頻繁に変わる場合は、大きなツリー全体を囲まないでください。

閉じタグ

{/key} で閉じます。

一般的な用途

アニメーションの再開、非制御入力のリセット、別のエンティティへのルーティング時の新しいデータ取得の強制などに使用します。

代替方法：bind:this

ref を使って命令的に状態をリセットできる場合もあります。宣言的にリセットする場合は、{#key} のほうが簡潔です。

トランジションとの組み合わせ

トランジションと組み合わせると、根本的な変更が起きたことを滑らかな視覚効果で示せます。

些細な変更には使わない

リアクティブなコンテンツだけを {#key} で囲まないでください。Svelte がすでに効率よく更新します。

確認問題

x が変化すると、{#key x} は何をしますか？

復習

{#key} は式が変化するたびに完全な破棄と再構築を強制します。状態のリセットやアニメーションの再生に便利です。

よくある質問

「再レンダリングを強制する{#key}」レッスンは無料ですか？

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

「再レンダリングを強制する{#key}」で何を学びますか？

値が変化したときにコンポーネントを破棄して再作成するため、keyブロックを使用します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「再レンダリングを強制する{#key}」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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