はじめに

JavaScript でウェブページの要素を操作する際、特定の要素の位置やサイズを取得 したい場面は多くあります。例えば、

• スクロール時に特定の要素が画面内にあるか確認
• クリック位置に応じた要素の表示・非表示
• アニメーションや動的レイアウトの調整

このような場合に便利なのが、getBoundingClientRect() です。本記事では、このメソッドの基本的な使い方と応用例を解説します。

1. getBoundingClientRect() とは？

getBoundingClientRect() は、HTML 要素の位置とサイズを取得 するためのメソッドです。
返されるのは DOMRect オブジェクトで、以下の情報を取得できます。

1.1 基本的な使い方

JAVASCRIPT
const element = document.querySelector("#myElement");
const rect = element.getBoundingClientRect();

console.log(`X: ${rect.x}, Y: ${rect.y}`);
console.log(`幅: ${rect.width}, 高さ: ${rect.height}`);

これにより、要素の画面上での位置やサイズが取得できます。

2. スクロール位置を考慮した座標計算

getBoundingClientRect() の座標は ビューポート基準 であり、ページがスクロールすると値が変化します。
ページ全体の座標を求めるには、window.scrollX や window.scrollY を加算します。

JAVASCRIPT
const scrollX = window.scrollX || document.documentElement.scrollLeft;
const scrollY = window.scrollY || document.documentElement.scrollTop;

const absoluteX = rect.x + scrollX;
const absoluteY = rect.y + scrollY;

console.log(`ページ全体のX: ${absoluteX}, Y: ${absoluteY}`);

3. 画面内に要素があるか判定する

要素が画面内にあるかどうかを判定するには、getBoundingClientRect() の top や bottom の値を window.innerHeight と比較します。

JAVASCRIPT
function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= window.innerHeight &&
    rect.right <= window.innerWidth
  );
}

const targetElement = document.querySelector("#target");
console.log(isElementInViewport(targetElement)); // true または false

✅ このコードで、要素が画面内にあるかどうかを簡単にチェック可能！

4. window, document, getBoundingClientRect() の違い

5. まとめ

getBoundingClientRect() を使うと、要素の位置やサイズを簡単に取得でき、スクロールやアニメーションなどの動的な画面操作を実装しやすくなります。

✅ 学んだこと

• getBoundingClientRect() で要素の座標・サイズを取得
• スクロールを考慮するには window.scrollX や window.scrollY を加算
• isElementInViewport() で要素が画面内にあるか判定

このメソッドを活用し、よりインタラクティブなウェブページを作成しましょう。