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

Mutation Observer とは?

💡 DOMの変化を一つも見逃さない、ページ改変の検知スペシャリスト
📌 このページのポイント
Mutation Observer — DOMの変更を監視 DOMツリー div#app p(追加) span(属性変更) childList: true attributes: true / subtree: true MutationRecord type: childList addedNodes: [p] MutationRecord type: attributes attributeName: class 活用: ブラウザ拡張 / ウィジェット / アクセシビリティツール / SPA状態追跡
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ツリーに起きる「変異」を検知するという意味だよ
← 用語集にもどる