Mutation Observerとは何ですか？

DOMツリーの変更（要素の追加・削除・属性の変化など）を非同期で監視できるブラウザAPI。動的に変化するページの状態をリアルタイムに追跡できる。

Mutation Observerのポイントは？

DOM要素の追加・削除・属性変更・テキスト変更を非同期コールバックで検知できる。廃止されたMutation Eventsの代替として設計された高パフォーマンスなAPI。ブラウザ拡張やウィジェット、アクセシビリティツールなどで広く使われている

【ミューテーションオブザーバー】

💡 DOMの変化を一つも見逃さない、ページ改変の検知スペシャリスト

📌 このページのポイント

Mutation Observerのイメージ

ひよこ

DOMの変更を監視するって、どういうときに必要なの？

ペンギン先生

たとえばブラウザ拡張でページの内容が変わったら何か処理したいとか、サードパーティのスクリプトが勝手にDOMを書き換えたことを検知したいときに使うんだ。チャットアプリで新しいメッセージ要素が追加されたら通知する、なんて用途もあるよ

ひよこ

昔はMutation Eventsっていうのがあったんだよね？

ペンギン先生

そうだよ。DOMNodeInsertedやDOMAttrModifiedなどのイベントがあったけど、同期的に発火するからパフォーマンスがひどかったんだ。Mutation Observerは変更をバッチにまとめて非同期で通知するから、圧倒的に効率的なんだよ

ひよこ

どんな変更を監視できるの？

ペンギン先生

childListオプションで子要素の追加・削除、attributesで属性の変更、characterDataでテキストノードの変更を監視できるよ。subtreeをtrueにすれば、対象要素の子孫すべてを再帰的に監視することもできるんだ

ひよこ

監視しすぎるとパフォーマンスに影響はないの？

ペンギン先生

subtreeをtrueにして大きなDOM ツリー全体を監視すると、変更記録（MutationRecord）が大量に生成される可能性はあるね。監視範囲は必要最小限に絞るのがベストプラクティスだよ。不要になったらdisconnect()で監視を解除するのも忘れずにね

まとめ：ざっくりこれだけ覚えればOK！

「Mutation Observer」って出てきたら「DOMの変更を監視するAPI」と思えればだいたいOK！

📖 おまけ：英語の意味

「Mutation Observer」＝変異の監視者

💬 Mutation（変異・変化）をObserve（監視）するAPI。DOMツリーに起きる「変異」を検知するという意味だよ