0Pricing
Sveltejs Academy · レッスン

onDestroy：クリーンアップ

コンポーネントの削除時に、タイマーの解除や購読解除などの後処理を実行します。

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

onDestroy の目的

onDestroy はコンポーネントが DOM から削除されるときに実行されます。リスナー、タイマー、サブスクリプションの解除に使用します。

インポートして呼び出す

svelte からインポートし、コールバックを渡します。

<script>
  import { onDestroy } from "svelte";
  onDestroy(() => console.log("bye"));
</script>

クリーンアップのパターン

タイマーをキャンセルし、fetch を中止し、ストアの購読を解除します。

onDestroy(() => clearInterval(id));

複数の onDestroy

必要な回数だけ呼び出せます。それぞれのクリーンアップが実行されます。

サーバーでも実行される

onMount とは異なり、onDestroy は SSR の破棄処理中にサーバーでも実行されます。

onMount と組み合わせる

onMount でセットアップし、onDestroy で破棄するのが一般的なパターンです。

onMount から返すだけにする

onMount から関数を返す方法は、単純なクリーンアップでは onDestroy と同等です。コードも同じ場所にまとめられます。

destroy で副作用を避ける

クリーンアップは同期的かつ短時間で完了するようにしてください。時間のかかる非同期処理は、画面遷移前に完了しない可能性があります。

ストアの自動購読解除

$store の省略記法を使うと、Svelte が destroy 時に自動で購読を解除するため、手動で onDestroy を使う必要はありません。

メモリリーク

クリーンアップのし忘れは、SPA でメモリリークが発生する最大の原因です。グローバルに追加したリスナーは必ず解除してください。

ページとコンポーネント

ルートが変わるとページコンポーネントが破棄され、onDestroyが実行されます。ページ単位のクリーンアップにも使用してください。

クイックチェック

セットアップと後処理を結び付ける最も簡単な方法は何でしょうか。

まとめ

コンポーネントがアンマウントされるとonDestroyが実行されます。リスナーやタイマーのクリーンアップには、これを使用してください（またはonMountの戻り値を使用してください）。

よくある質問

「onDestroy：クリーンアップ」レッスンは無料ですか？

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

「onDestroy：クリーンアップ」で何を学びますか？

コンポーネントの削除時に、タイマーの解除や購読解除などの後処理を実行します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「onDestroy：クリーンアップ」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. onMount：レンダリング後の処理
  2. onDestroy：クリーンアップ
  3. beforeUpdateとafterUpdate
  4. tick()：DOM更新を待機する
← Sveltejs Academyに戻る