ResizeObserver の利用（DOM サイズ監視） — new ResizeObserver(cb).observe(el)
Web ページで「要素のサイズが変わったら処理をしたい」ときに便利なのが ResizeObserver です。
初心者は「ResizeObserver = 要素の幅や高さを監視する仕組み」と覚えると理解しやすいです。
基本の考え方
- 監視したい要素を指定する。
- ResizeObserver を作成し、コールバック関数を登録する。
- 要素のサイズが変わるたびにコールバックが呼ばれる。
基本のコード例
// 監視対象の要素
const box = document.querySelector("#box");
// コールバック関数
const callback = (entries) => {
entries.forEach(entry => {
const rect = entry.contentRect;
console.log(`幅: ${rect.width}, 高さ: ${rect.height}`);
});
};
// ResizeObserver を作成
const observer = new ResizeObserver(callback);
// 要素を監視開始
observer.observe(box);
entry.contentRect→ 要素のサイズ情報（width, height など）。observer.observe(el)→ 要素を監視開始。
よく使うテンプレート集
サイズ変化に応じてスタイル変更
const callback = (entries) => {
const rect = entries[0].contentRect;
if (rect.width > 300) {
box.style.backgroundColor = "lightgreen";
} else {
box.style.backgroundColor = "lightpink";
}
};
複数要素を監視
const boxes = document.querySelectorAll(".resize-target");
boxes.forEach(el => observer.observe(el));
監視を解除
observer.unobserve(box); // 特定要素の監視を解除
observer.disconnect(); // 全ての監視を解除
例題: テキストエリアのサイズに応じて文字数表示
<textarea id="editor"></textarea>
<div id="info"></div>
<script>
const editor = document.querySelector("#editor");
const info = document.querySelector("#info");
const callback = (entries) => {
const rect = entries[0].contentRect;
info.textContent = `幅: ${Math.round(rect.width)}px, 高さ: ${Math.round(rect.height)}px`;
};
const observer = new ResizeObserver(callback);
observer.observe(editor);
</script>
- 効果: テキストエリアのサイズを変えると、幅と高さがリアルタイムで表示される。
実務でのコツ
- レスポンシブ対応: 要素サイズに応じてレイアウトを変えるときに便利。
- グラフやキャンバス: サイズが変わったら再描画する処理に使える。
- パフォーマンス注意: サイズ変化が頻繁に起きる要素を監視しすぎると負荷がかかる。
練習問題（画像のサイズ監視）
const img = document.querySelector("#myImage");
const callback = (entries) => {
const rect = entries[0].contentRect;
console.log(`画像サイズ: ${rect.width} x ${rect.height}`);
};
const observer = new ResizeObserver(callback);
observer.observe(img);
直感的な指針
- ResizeObserver = 要素のサイズ変化を監視する仕組み。
- コールバックで幅や高さを取得できる。
- 監視解除も可能。
- 初心者は「背景色変更」「サイズ表示」「画像監視」で練習すると理解が深まる。
これを覚えれば「DOM 要素のサイズ変化に応じて処理を実行」できるようになり、レスポンシブな UI や動的なコンテンツを作るときに役立ちます。
