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

Mutation Observer とは？

最終更新: 2026年10月4日

💡 ページの変化を、必要な範囲でまとめて知らせる

設定した範囲のDOMの変更を監視し、変更記録をまとめてコールバックへ通知するブラウザーAPI。子ノードの追加・削除、属性、文字データなどを選んで監視できる。通知は変更の瞬間に同期実行されるものではなく、マイクロタスクとして処理される。

📌 このページのポイント

childList・attributesとsubtreeを有効にした例。監視の設定に合う変更記録だけがコールバックへ渡されます。

ひよこ

ページの変化を知りたいときに使う？

ペンギン先生

そうだよ。たとえばチャットのメッセージ一覧へ要素が追加されたことを検知できる。画面の見た目すべてではなく、設定したDOMの変更を観察するAPIなんだ。

ひよこ

変更した瞬間に呼ばれるの？

ペンギン先生

変更記録をため、マイクロタスクでまとめてコールバックへ渡すよ。DOMを書き換えたその場で同期的に実行するものではないんだ。

ひよこ

どんな変更を選べる？

ペンギン先生

childListは子ノードの追加・削除、attributesは属性、characterDataは文字データの変更だよ。subtreeをtrueにすれば子孫も対象になる。どこを、何について監視するかを決めよう。

ひよこ

たとえば色が変わると分かる？

ペンギン先生

class属性の変更を監視していれば、その変更は分かるよ。でもCSSの規則や画面幅が変わっただけなら、DOMが変わるとは限らない。すべての見た目の変化を通知する仕組みではないね。

ひよこ

監視を続けると重くなる？

ペンギン先生

広い範囲や多くの変更を対象にすると、記録やコールバックの処理が増えるよ。必要な範囲に絞り、使い終わったらdisconnect()で停止しよう。通知前の記録も必要なら、停止する前にtakeRecords()で取り出すんだ。

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

「Mutation Observer」って出てきたら「指定したDOMの変更を、まとめて知らせるAPI」と思えばだいたいOK！

📖 おまけ：英語の意味

「MutationObserver」＝ DOMの変更を監視するもの

💬 Mutationは変更、Observerは観察するもの。JavaScriptのAPI名は、間に空白を入れないMutationObserverだよ。

参考資料