Resize Observerとは何ですか？

DOM要素のサイズ変化を非同期で監視できるブラウザAPI。ウィンドウのリサイズだけでなく、個々の要素のサイズ変更を効率的に検知してレスポンシブな処理を実現できる。

Resize Observerのポイントは？

個々のDOM要素のサイズ変化を非同期コールバックで検知できるAPI。window.onresizeでは検知できないコンテナ単位のサイズ変化を監視できる。コンテナクエリ的な動的レイアウト調整やグラフの再描画などに活用される

【リサイズオブザーバー】

💡 要素のサイズ変化を見逃さない、レイアウト調整の頼れる見張り番

📌 このページのポイント

Resize Observerのイメージ

ひよこ

ウィンドウのリサイズイベントとは何が違うの？

ペンギン先生

window.onresizeはブラウザウィンドウのサイズ変更しか検知できないんだ。Resize Observerは個々の要素を監視できるから、サイドバーの開閉やアコーディオンの展開で要素のサイズが変わったときも検知できるよ

ひよこ

たとえばどんなときに使うの？

ペンギン先生

グラフやチャートを描画しているコンテナのサイズが変わったときに再描画したり、テキストエリアの自動リサイズに連動してレイアウトを調整したりするのに使えるよ。コンテナクエリが普及する前は、Resize Observerが要素レベルのレスポンシブの主力だったんだ

ひよこ

使い方はIntersection Observerと似てるの？

ペンギン先生

そうだよ。new ResizeObserver(callback)で作って、observer.observe(element)で監視開始する形は同じパターンだね。コールバックにはcontentRect（要素のサイズ情報）やborderBoxSizeなどが渡されるんだ

ひよこ

パフォーマンスは大丈夫？たくさんの要素を監視しても平気？

ペンギン先生

ブラウザが内部的にバッチ処理してくれるから、個別にpollingするよりずっと効率的だよ。ただし、コールバック内でサイズを変更すると再度コールバックが発火する無限ループに注意が必要。ResizeObserverLoopErrorというエラーが出たら、このループを疑ってみてね

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

「Resize Observer」って出てきたら「要素のサイズ変化を監視するAPI」と思えればだいたいOK！

📖 おまけ：英語の意味

「Resize Observer」＝リサイズの監視者

💬 Resize（サイズ変更）をObserve（監視）するAPI。ウィンドウではなく個々の要素を監視できるのがポイントだよ