手動クリーンアップのための$effect.root
エフェクトルートを作成し、エフェクトを開始・停止するタイミングを制御します。
「手動クリーンアップのための$effect.root」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
コンポーネント外のエフェクト
$effect はコンポーネントのライフサイクル内でのみ動作します。アプリ全体のエフェクトには $effect.root を使用します。
ルートを作成する
$effect.root はティアダウン関数を返します。
const teardown = $effect.root(() => {
$effect(() => { /* ... */ });
});手動ライフサイクル
ルートエフェクトを停止するタイミングは自分で決めます。返されたティアダウン関数を呼び出してクリーンアップします。
ユースケース
バックグラウンドタスク、グローバルサブスクリプション、単一のコンポーネントを超えて動作するスクリプトなどに適しています。
ネストしたエフェクト
ルート内では、通常の $effect 呼び出しを宣言できます。
ストアの置き換え
$effect.root と $state を組み合わせると、モジュールレベルの多くのストアパターンを置き換えられます。
クリーンアップの構成
内部のエフェクトからクリーンアップ関数を返すことも、期待どおりに機能します。
テストのセットアップ
コンポーネント外でリアクティブなコードを実行するテストに役立ちます。
SSR への配慮
$effect.root は SSR に対応しており、サーバー上ではエフェクトは実行されません。
onMount/onDestroy との比較
$effect.root とティアダウンの組み合わせは、コンポーネントをまたぐエフェクトに対する現代的な代替手段です。
高度な API
上級者向けです。通常のアプリケーションコードでは、コンポーネント内で $effect を使用します。
クイックチェック
$effect.root はどのような場合に使用しますか？
まとめ
$effect.root はコンポーネントのスコープ外でエフェクトを実行します。返された関数を使うと、任意のタイミングでエフェクトをティアダウンできます。
よくある質問
「手動クリーンアップのための$effect.root」レッスンは無料ですか？
はい。「手動クリーンアップのための$effect.root」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「手動クリーンアップのための$effect.root」で何を学びますか？
エフェクトルートを作成し、エフェクトを開始・停止するタイミングを制御します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「手動クリーンアップのための$effect.root」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 非リアクティブな状態のための$state.raw
- 複雑な導出のための$derived.by
- 手動クリーンアップのための$effect.root
- Svelte 4から5への移行