【リサイズオブザーバー】
Resize Observer とは？
最終更新:
💡 指定した要素のサイズ変化を、コールバックで受け取る
DOM要素などの指定した領域のサイズを観測し、変化をコールバックで報告するブラウザAPI。ウィンドウの大きさが変わらなくても、観測対象のサイズが変われば対応できる。位置や見た目の全変化を観測するものではなく、コールバック内でのサイズ変更が連鎖する場合にも注意が必要。
📌 このページのポイント
- observeで要素を登録し、サイズの報告を受け取る
- 既定は内容領域で、border-boxなども選べる
- ウィンドウの大きさが変わらない場合も使える
- CSS transformだけの変化は報告の対象ではない
ひよこ ウィンドウのリサイズイベントと何が違う？
ペンギン先生 個々の要素を登録して、そのサイズを観測できるよ。例えばサイドバーの開閉で隣の要素の幅が変われば、ウィンドウの大きさが同じでも報告を受け取れる。開閉という操作そのものではなく、観測した領域のサイズが対象なんだ。
ひよこ どんなときに使うの？
ペンギン先生 要素の幅や高さに合わせてグラフを描き直す場合などだよ。サイズを条件にCSSを切り替えるだけなら、コンテナクエリも選択肢になる。必要なのがJavaScriptでの処理なのか、CSSによる表示変更なのかを考えて選ぼう。
ひよこ 使い方は？
ペンギン先生 new ResizeObserver(callback)で作り、observe(element)で登録する。コールバックには報告された要素ごとの情報を含むentriesが渡るよ。entry.targetが対象で、contentRectやborderBoxSizeなどから領域の寸法を読める。unobserveで一つ、disconnectで全ての観測を解除できるんだ。
ひよこ 何の大きさを見るの？
ペンギン先生 既定は内容領域で、observeのboxにborder-boxを指定すれば、余白のpaddingと境界線を含む領域を観測できる。CSS transformで見た目だけを拡大しても、その変化だけでは報告されない。要素の全変化を観測するものではないんだ。
ひよこ コールバックでサイズを変えてもいい？
まとめ：ざっくりこれだけ覚えればOK！
「Resize Observer」って出てきたら「指定した要素のサイズ変化を、コールバックで受け取る」と思えばだいたいOK！
📖 おまけ：英語の意味
「Resize Observer」 ＝ サイズ変更を観測するもの
💬 resizeはサイズ変更、observerは観測するもの。対象を登録して報告を受けるAPIだよ。画面内に見えるかや、位置の変化を調べるAPIとは役割が違うんだ。