監視対象属性とattributeChangedCallback
カスタム要素でHTML属性の変更に対応します
「監視対象属性とattributeChangedCallback」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
属性の変更への反応
HTML 要素は属性を介して状態を公開します。<my-card name="A"> が name="B" になったことに反応するには、監視する属性のリストを宣言し、クラスに attributeChangedCallback を実装します。
static observedAttributes
静的 getter を使って、対象となる属性を宣言します：static get observedAttributes() { return ["name", "open"]; }。このリストに含まれる属性だけがコールバックを発火させ、その他の属性はパフォーマンスのため無視されます。
class MyCard extends HTMLElement {
static get observedAttributes() { return ["name", "open"]; }
}コールバックのシグネチャ
attributeChangedCallback(name, oldValue, newValue) は、監視対象の属性が変更されるたびに発火します。3つのパラメーターはすべて文字列です（属性が存在しない場合は null です）。これらを使って内部状態を更新し、再レンダリングしてください。
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
if (name === "name") this.render();
if (name === "open") this.toggle(newValue !== null);
}初期属性でも発火する
要素がアップグレードされた時点で存在する監視対象の属性ごとに、コールバックが1回発火します。そのため、attributeChangedCallback でレンダリングすれば、connectedCallback に初期レンダリングとそれ以降のレンダリングの別経路を用意する必要がありません。
プロパティと属性の反映
ブール属性では、プロパティを属性に、また属性をプロパティに相互反映してください。element.open = true を設定すると open 属性が設定され、属性を削除するとプロパティがクリアされるようにします。これは <details> のような組み込み要素の動作と一致します。
get open() { return this.hasAttribute("open"); }
set open(value) {
if (value) this.setAttribute("open", "");
else this.removeAttribute("open");
}無限ループを避ける
attributeChangedCallback が自身の監視対象である属性を設定すると、無限ループに陥る可能性があります。コールバックの先頭で必ず if (oldValue === newValue) return; によるガードを行い、コールバック内で監視対象の属性を変更することは避けてください。
ブール属性
HTML の慣例では、ブール属性は存在することで「設定」され、存在しないことで「未設定」になります。値は無視されるため、disabled="false" でも無効状態です。存在を確認するには hasAttribute を使い、文字列を比較しないでください。
属性内の JSON
属性は文字列です。構造化データを渡すには、マークアップ内で JSON.stringify を使って JSON 化し、attributeChangedCallback で解析します：<my-chart data-points='[1,2,3]'>。大きなペイロードの場合は、代わりに JS のプロパティ代入でデータを渡すことをおすすめします。
MutationObserver との比較
MutationObserver で属性の変更を監視することもできますが、observedAttributes + attributeChangedCallback のほうが高速です（Observer のセットアップが不要です）。また宣言的であり（監視対象の名前のリストがクラス上で確認できます）、Web Components の慣用的な方法です。
パフォーマンス：レンダリングをまとめる
複数の属性が短時間に連続して変更されると、複数回のコールバックと複数回のレンダリングが発生します。queueMicrotask または requestAnimationFrame を使ってまとめると、属性がいくつ変更されても、実際のレンダリングをマイクロタスクまたはフレームごとに1回だけ実行できます。
よくある落とし穴
属性を observedAttributes に追加し忘れると、その属性に対するコールバックが暗黙的に無効になります。コンポーネントが setAttribute の呼び出しに反応しない場合、最初に確認すべきなのは static observedAttributes リストです。
知識チェック
コールバック内で監視対象の属性を設定し、attributeChangedCallback を間接的に呼び出すと、どうなりますか。
まとめ
static observedAttributes getter を使って追跡する属性を宣言します。attributeChangedCallback(name, oldValue, newValue) は初期解析時を含め、変更のたびに発火します。ブール状態ではプロパティを属性に反映し、無限ループを防ぎ、パフォーマンスのため requestAnimationFrame でレンダリングをまとめてください。
よくある質問
「監視対象属性とattributeChangedCallback」レッスンは無料ですか？
はい。「監視対象属性とattributeChangedCallback」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「監視対象属性とattributeChangedCallback」で何を学びますか？
カスタム要素でHTML属性の変更に対応します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「監視対象属性とattributeChangedCallback」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- customElements.defineで要素を定義する
- connectedCallbackとdisconnectedCallback
- 監視対象属性とattributeChangedCallback
- 組み込み要素の拡張