$effect：副作用
リアクティブな依存先が変化するたびに再実行される副作用を実行します。
「$effect：副作用」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
副作用用のルーン
リアクティブな変更に応答する副作用には、$effect(() => { ... })を使用します。
$effect(() => {
console.log("count is", count);
});自動追跡
Svelteはコールバック内の依存関係を自動的に追跡します。
クリーンアップ関数
次回の実行前または破棄時にクリーンアップする関数を返します。
$effect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
});マウント後に実行
エフェクトはコンポーネントのマウント後に実行され、依存関係が変更されるたびに再実行されます。
SSRでは実行されない
$effectのコールバックはSSR中には実行されません。ブラウザー専用のロジックに使用します。
マウント前のエフェクト
$effect.preはDOMの更新前に実行されます。計測して適用するパターンに便利です。
ルートエフェクト
$effect.rootは高度な用途向けに、コンポーネントのライフサイクル外でエフェクトを作成します。
onMountとの比較
onMountは1回だけ実行されますが、$effectは依存関係の変更時に再実行されます。多くの場合、$effectでonMountとリアクティブパターンの両方を置き換えられます。
状態の設定を避ける
エフェクト内でリアクティブな状態を変更すると、ループが発生する可能性があります。計算値には$derivedを使用してください。
追跡されない読み取り
エフェクト内で依存関係を登録せずに値を読み取るには、untrack() を使用します。
実際のユースケース
ログ出力、localStorage との同期、サードパーティーライブラリとの統合、DOM の手動調整などです。
クイックチェック
エフェクトをどのようにクリーンアップしますか？
まとめ
$effect は副作用を処理し、依存関係を追跡し、返り値の関数によるクリーンアップをサポートします。
よくある質問
「$effect：副作用」レッスンは無料ですか？
はい。「$effect：副作用」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「$effect：副作用」で何を学びますか？
リアクティブな依存先が変化するたびに再実行される副作用を実行します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「$effect：副作用」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。