0Pricing
JavaScript Academy · レッスン

ライフサイクルコールバック

接続、切断、属性変更のタイミングに処理を組み込みます。

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

要素のライフサイクル

カスタム要素には定義済みのライフサイクルがあります。ブラウザーは重要なタイミングで、クラスに定義された特別なメソッドを呼び出します。

  • connectedCallback — DOM に追加されたとき
  • disconnectedCallback — DOM から削除されたとき
  • attributeChangedCallback — 監視対象の属性が変更されたとき
  • adoptedCallback — 新しいドキュメントに移動されたとき

connectedCallback

connectedCallback は、要素がドキュメントに挿入されるたびに実行されます。コンテンツのレンダリング、データの取得、グローバルリスナーの登録に最適な場所です。

要素を移動すると、複数回実行されることがあります。

class StatusBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Online';
    console.log('badge added to page');
  }
}
customElements.define('status-badge', StatusBadge);

disconnectedCallback

disconnectedCallback は、要素が DOM から削除されたときに実行されます。グローバルリスナーの削除、タイマーのキャンセル、接続の切断などの後片付けに使用し、メモリリークを防いでください。

class ClockWidget extends HTMLElement {
  connectedCallback() {
    this.timer = setInterval(() => {
      this.textContent = new Date().toLocaleTimeString();
    }, 1000);
  }
  disconnectedCallback() {
    clearInterval(this.timer); // cleanup
  }
}
customElements.define('clock-widget', ClockWidget);

属性の監視

属性の変更に反応するには、名前の配列を返す static observedAttributes getter を使って、監視する属性を宣言する必要があります。

一覧に含まれる属性だけが attributeChangedCallback を実行します。

class AvatarImage extends HTMLElement {
  static get observedAttributes() {
    return ['src', 'alt'];
  }
}
customElements.define('avatar-image', AvatarImage);

attributeChangedCallback

監視対象の属性が追加、削除、変更されると、ブラウザーは attributeChangedCallback(name, oldValue, newValue) を呼び出します。属性とレンダリング結果を同期させるために使用してください。

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'src') {
      this.innerHTML = '<img src="' + newValue + '">';
    }
  }
}
customElements.define('avatar-image', AvatarImage);

コールバックの引数

attributeChangedCallback は 3 つの引数を受け取ります。

  • name — 変更された属性
  • oldValue — 変更前の値（新しく追加された場合は null）
  • newValue — 変更後の値（削除された場合は null）

古い値と新しい値を比較して、不要な処理を省略してください。

attributeChangedCallback(name, oldValue, newValue) {
  if (oldValue === newValue) return; // no real change
  console.log(name + ' changed to ' + newValue);
}

初期属性に対する呼び出し

要素がアップグレードされた時点ですでに監視対象の属性を持っている場合、connectedCallback の前に、属性ごとに attributeChangedCallback が 1 回実行されます。これにより、マークアップから自動的に初期化できます。

// <avatar-image src="a.png"></avatar-image>
// On upgrade: attributeChangedCallback('src', null, 'a.png')
// runs BEFORE connectedCallback.

プロパティの属性への反映

よく使われるパターンとして、属性の読み書きを行う JavaScript プロパティを公開する方法があります。これにより、使いやすい API を提供しながら同期状態を保てます。

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  get src() { return this.getAttribute('src'); }
  set src(value) { this.setAttribute('src', value); }
}
customElements.define('avatar-image', AvatarImage);

adoptedCallback

adoptedCallback は、要素があるドキュメントから別のドキュメントに移動されたときに実行されます（たとえば、document.adoptNode を使って iframe に移動した場合などです）。使用する機会はほとんどありませんが、これでライフサイクルのすべてがそろいます。

class PortableWidget extends HTMLElement {
  adoptedCallback() {
    console.log('moved to a new document');
  }
}
customElements.define('portable-widget', PortableWidget);

ライフサイクルの順序

HTML に直接記述された要素では、一般的に次の順序になります。

  • constructor
  • attributeChangedCallback（存在する監視対象属性ごとに 1 回）
  • connectedCallback

その後、削除されると disconnectedCallback が実行されます。

すべてを組み合わせる

完全な要素では、すべての要素を組み合わせます。属性を監視し、接続時にレンダリングし、属性の変更時に同期し、切断時に後片付けを行います。

class GreetUser extends HTMLElement {
  static get observedAttributes() { return ['name']; }
  connectedCallback() { this.render(); }
  attributeChangedCallback() { this.render(); }
  render() {
    const name = this.getAttribute('name') || 'Guest';
    this.textContent = 'Hello, ' + name;
  }
}
customElements.define('greet-user', GreetUser);

簡単な確認

ライフサイクルコールバックについて、理解度を確認しましょう。

まとめ

カスタム要素のライフサイクルを学びました。

  • connectedCallback は挿入時に実行されます。ここでレンダリングします。
  • disconnectedCallback は削除時に実行されます。ここで後片付けを行います。
  • observedAttributes で監視する属性を宣言します。
  • attributeChangedCallback(name, old, new) で変更に反応します。
  • adoptedCallback でドキュメント間の移動を処理します。

次は、Shadow DOM を使ってスタイルとマークアップをカプセル化します。

よくある質問

「ライフサイクルコールバック」レッスンは無料ですか？

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

「ライフサイクルコールバック」で何を学びますか？

接続、切断、属性変更のタイミングに処理を組み込みます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ライフサイクルコールバック」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. カスタム要素を定義する
  2. ライフサイクルコールバック
  3. Shadow DOM とカプセル化
  4. テンプレートとスロット
← JavaScript Academyに戻る