connectedCallbackとdisconnectedCallback
カスタム要素がDOMに追加または削除されたときにコードを実行します
「connectedCallbackとdisconnectedCallback」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
要素のライフサイクルコールバック
カスタム要素には、4つのライフサイクルフックがあります。connectedCallback、disconnectedCallback、attributeChangedCallback、adoptedCallback です。これらは、あらゆるコンポーネントモデルでよく知られているマウント、アンマウント、更新のタイミングに相当します。
挿入時にconnectedCallbackが実行される
connectedCallback は、要素がDOMツリーに挿入されるたびに実行されます。属性の読み取り、コンテンツの描画、イベントリスナーの登録、タイマーや購読の開始には、ここが適切な場所です。
class Timer extends HTMLElement {
connectedCallback() {
this.start = Date.now();
this.interval = setInterval(() => this.render(), 1000);
this.render();
}
render() {
this.textContent = Math.floor((Date.now() - this.start) / 1000) + "s";
}
}複数回実行されることがある
If the element is removed and re-inserted, connectedCallback fires again on each insertion. Idempotency matters — guard initialization that should only happen once with a flag, or do full setup every time and let disconnectedCallback tear down.
削除時に発火する disconnectedCallback
disconnectedCallback は要素が DOM から削除されたときに実行されます。ここでインターバルを停止し、fetch を中止し、ドキュメントレベルのリスナーを削除し、そうしなければリークするリソースを解放します。
disconnectedCallback() {
clearInterval(this.interval);
window.removeEventListener("resize", this.onResize);
}ガベージコレクションとリスナー
アクティブなインターバル、document リスナー、または未解決の Promise を持つ要素は、切断された後もガベージコレクションの対象になりません。connectedCallback で作成したすべてのサブスクリプションには、disconnectedCallback で必ずクリーンアップを対応させてください。
移動後の再接続
parentB.appendChild(element) で要素を移動すると、まず parentA から削除され、その後 parentB に挿入されます。ブラウザーは disconnectedCallback、続いて connectedCallback を発火させます。移動中には一時的な後始末とセットアップが発生することを想定してください。
初回接続のタイミング
HTML に直接記述された要素では、constructor の後、初期解析中に connectedCallback が発火します。この時点では属性の解析がすでに完了しているため、ここで this.getAttribute("name") を読み取ると、マークアップの値が返されます。
子要素はまだ解析されていない場合があります
HTML で子要素が宣言された要素では、connectedCallback が発火した時点で、子要素がまだ DOM に存在しない場合があります（パーサーが処理中のためです）。宣言された子要素にアクセスする必要がある場合は、MutationObserver を使用するか、requestAnimationFrame 内で子要素を読み取ってください。
adoptedCallback
adoptedCallback は、要素が新しいドキュメントに移動されたとき（通常は document.adoptNode を介して）に発火します。ほとんどのアプリで使うことはありません。主に iframe 間で移動するコンポーネントで重要になります。
AbortController との組み合わせ
すっきりしたパターンは、connectedCallback で AbortController を作成し、すべての addEventListener と fetch に { signal: this.controller.signal } を渡してから、disconnectedCallback で this.controller.abort() を呼び出し、すべてを一度に解除する方法です。
コンストラクターで重い処理を避ける
要素が document.createElement で作成され、挿入されない場合でも constructor は実行されます。constructor では初期プロパティ値の設定だけにとどめ、レンダリング、fetch、リスナーのアタッチは connectedCallback まで遅らせてください。
知識チェック
なぜサブスクリプションやタイマーは、要素の constructor ではなく connectedCallback でセットアップする必要があるのでしょうか。
まとめ
connectedCallback（挿入）と disconnectedCallback（削除）は、要素がアクティブな期間の両端に位置します。connectedCallback でリスナー、インターバル、fetch をセットアップし、disconnectedCallback で後始末してリークを防いでください。どちらも複数回発火する可能性があるため、AbortController を使うとクリーンアップをまとめて実行できます。
よくある質問
「connectedCallbackとdisconnectedCallback」レッスンは無料ですか？
はい。「connectedCallbackとdisconnectedCallback」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「connectedCallbackとdisconnectedCallback」で何を学びますか？
カスタム要素がDOMに追加または削除されたときにコードを実行します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「connectedCallbackとdisconnectedCallback」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- customElements.defineで要素を定義する
- connectedCallbackとdisconnectedCallback
- 監視対象属性とattributeChangedCallback
- 組み込み要素の拡張