0Pricing
Sveltejs Academy · レッスン

destroy()クリーンアップ関数

アクションからdestroy関数を返し、イベントリスナーやオブザーバーをクリーンアップします。

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

クリーンアップの理由

アクションはリスナーやオブザーバーを追加することがよくあります。クリーンアップを行うと、要素がアンマウントされたときのメモリリークを防げます。

destroyを返す

アクションは、destroy()関数を持つオブジェクトを返せます。Svelteはアンマウント時にこの関数を呼び出します。

function listen(node) {
  function onClick() { /* ... */ }
  node.addEventListener("click", onClick);
  return { destroy() { node.removeEventListener("click", onClick); } };
}

リソースと組み合わせる

割り当てたもの（リスナー、オブザーバー、インターバルなど）は、destroyで解放してください。

冪等なdestroy

destroyは1回呼び出されます。それでも、アンマウントが繰り返された場合に備えて、防御的に記述してください。

updateとdestroyを組み合わせる

完全なライフサイクルに対応するには、両方を返してください。パラメータの変更に反応し、アンマウント時にクリーンアップできます。

オブザーバー

destroyでIntersectionObservers、ResizeObservers、MutationObserversを一時停止して切断してください。

アニメーションフレーム

保留中のrequestAnimationFrameループはキャンセルし、不要な処理を避けてください。

非同期クリーンアップ

destroyは同期処理にできます。非同期のクリーンアップが必要な場合は、fire-and-forgetでクリーンアップタスクを起動してください。

メモリプロファイリング

ブラウザーのメモリツールを使用して、アンマウント後にアクションが参照を解放していることを確認してください。

TypeScriptの型

戻り値の型は、svelte/actionにあるActionReturn<Params>です。

よくある間違い

destroyを返し忘れると、要素がなくなった後もリスナーがアタッチされたままになります。追加処理には必ず削除処理を組み合わせてください。

簡単な確認

destroyはいつ実行されますか。

まとめ

アクションから{ destroy }を返すと、アンマウント時にリスナーとオブザーバーをクリーンアップできます。

よくある質問

「destroy()クリーンアップ関数」レッスンは無料ですか？

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

「destroy()クリーンアップ関数」で何を学びますか？

アクションからdestroy関数を返し、イベントリスナーやオブザーバーをクリーンアップします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「destroy()クリーンアップ関数」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. use:ディレクティブ構文
  2. アクションのパラメーターと更新
  3. destroy()クリーンアップ関数
  4. 実践的なアクション：clickOutside、tooltip、autofocus
← Sveltejs Academyに戻る