getboundingclientrectとは？初心者でもわかる使い方と実務活用ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

はじめに

ウェブページの表示領域と要素の関係を知りたいときに役立つのが getBoundingClientRect（実際のメソッド名は getBoundingClientRect です）です。getboundingclientrect というキーワードも概要解説でよく出てきますが、基本はこのメソッドが返す DOMRectReadOnly オブジェクトを使って、要素の位置と大きさを取得します。返される値は left, top, right, bottom, width, height, x, y などのプロパティを含み、すべてビューポートを基準とした座標です。

基本的な使い方

使い方はとてもシンプルです。対象の要素を取得し、getBoundingClientRect を呼び出します。例: const rect = element.getBoundingClientRect(); その後 rect.left や rect.top などの値を使って、要素の現在位置を判断します。これらの値はスクロールやリサイズの影響を受けることがあります。

プロパティと意味

プロパティ	説明
left	要素の左端の横座標（ビューポート基準）
top	要素の上端の縦座標
right	要素の右端の横座標
bottom	要素の下端の縦座標
x	left の別名として使われることが多い
y	top の別名として使われることが多い
width	要素の幅
height	要素の高さ

実務での活用例

ツールチップの位置決め、スクロール位置に応じたアニメーション、要素の衝突検知など、さまざまな場面で使えます。例えば、ホバー時にツールチップを正確な場所に表示したい場合、getBoundingClientRect の値を見て位置を調整します。

注意点

この値は ビューポート基準の座標なので、文書全体の座標ではありません。リフローを引き起こす可能性があるため、頻繁に呼び出すとパフォーマンスに影響することがあります。実務では requestAnimationFrame の中やイベントの末尾で計測するのが安全です。また、古いブラウザでは仕様が異なることがあるので、必要に応じて互換性チェックをしましょう。

注意点のまとめ

要素の描画が完了した後に測定すること、測定結果は表示・スクロールの変更で変化することを理解しておきましょう。

まとめ

getBoundingClientRect は、ウェブ開発で要素の位置と大きさをリアルタイムで知りたいときの基本ツールです。基本的な使い方を覚え、プロパティの意味を理解し、実務での活用例と注意点を押さえておくと、画面上の要素の挙動を正確にコントロールできます。

実際の案件では、アニメーションの開始タイミング、重なりの検知、スクロール到達の判定など、さまざまな場面で活躍します。本文の説明だけでなく、実践的な注意点として、 測定は再描画後に行う、レイアウトが変わる操作の前後に測定を入れる、よく使うプロパティの left/top/width/height をセットで参照する、などを心がけると良いです。

getboundingclientrectの同意語

getBoundingClientRect: 要素のビューポート相対矩形を取得するメソッド。返される値は左 (left)、上 (top)、右 (right)、下 (bottom)、幅 (width)、高さ (height) を含む DOMRect オブジェクトです。
DOMRect: getBoundingClientRect の戻り値として返される矩形情報を表す型。left/top/right/bottom などのプロパティを持ち、x, y も併せて表現します。
ClientRect: 古い仕様で用いられる同様の矩形情報を表す型の別名。現行は DOMRect の使用が推奨されます。
getClientRects: 要素の複数の矩形を配列として取得する API。通常、要素が複数の行で分割されている場合などに使われます。
Element.getBoundingClientRect: 要素オブジェクトのメソッドとして、同様に矩形情報を取得します（getBoundingClientRect のフル呼び出し形）。
ビューポート相対矩形を取得する: 要素の矩形情報をビューポートを基準に取得することを指す、自然な日本語の説明表現。

getboundingclientrectの対義語・反対語

BoundingClientRectを設定する（仮想の反対語）: 要素のサイズ・位置を取得するのではなく、設定・変更することを指す概念。実際にはこの名称の公式APIはありません。
要素のサイズ・位置を変更する: getBoundingClientRectが返す情報を参照するのではなく、width/height/left/topなどのCSSプロパティを使って要素のサイズと位置を変える操作を意味します。
CSSでサイズ・位置を決定する: getBoundingClientRectを使わず、CSSのスタイルでレイアウトを決める考え方の対比です。
レイアウト情報の参照より変更を優先する操作: 情報を読むこと（参照）より、実際にレイアウトを変える（変更）行為を指す抽象的な対義概念です。
情報を読み取る行為の反対としての変更操作: getBoundingClientRectが情報を取得する行為であるのに対し、情報を変更する行為を示す対語的な表現です。

getboundingclientrectの共起語

DOMRect: getBoundingClientRect が返す矩形情報を格納するオブジェクト。左・上・右・下の座標や幅・高さ、x/y などのプロパティを持つ。
DOMRectReadOnly: DOMRect の読み取り専用版。値を変更できない型で、主に型定義として用いられる。
Element: getBoundingClientRect を呼び出せる DOM の要素。Element は DOM の基本的な要素インターフェース。
left: 矩形の左端の横方向座標。ビューポート基準で測られることが多い。
top: 矩形の上端の縦方向座標。ビューポート基準。
right: 矩形の右端の横方向座標。
bottom: 矩形の下端の縦方向座標。
x: 矩形の左上の x 座標。left の別名として使われることが多い。
y: 矩形の左上の y 座標。top の別名として使われることが多い。
width: 矩形の横幅。
height: 矩形の縦幅。
getClientRects: 複数の DOMRect を返すメソッド。主に複数の行にまたがるテキスト領域で使われる。
offsetTop: 要素のドキュメント内での垂直方向のオフセット。
offsetLeft: 要素のドキュメント内での水平方向のオフセット。
WebAPI: Web API の総称。ブラウザが提供する標準的な機能セット。
JavaScript: この API を利用して値を取得・操作するプログラミング言語。
ビューポート: ブラウザの表示領域。getBoundingClientRect の座標系はこの基準で表現される。
レイアウト: ウェブページの配置・サイズ計算の過程。getBoundingClientRect の値はレイアウト後の情報。
矩形: 左上の座標と幅・高さで表される四角形の領域。
ブラウザ: この API が動作する実行環境。Chrome/Firefox/Safari などのブラウザ。

getboundingclientrectの関連用語

getBoundingClientRect: 要素のビューポートに対する境界矩形を返すメソッド。返り値はDOMRect/DOMRectReadOnlyオブジェクトで、左(left)、上(top)、右(right)、下(bottom)などの座標と、幅(width)、高さ(height)を含む。
DOMRect: getBoundingClientRectが返す境界矩形を表すオブジェクト。x/y/left/top/right/bottom/width/heightなどのプロパティを持つ。
DOMRectReadOnly: DOMRectの読み取り専用版。getBoundingClientRectの返却値として使われる。
getClientRects: 要素の各ラインボックスを表す矩形のリストを返す。主にインライン要素の改行時の矩形を取り扱う。
DOMRectList: getClientRectsの返り値のコレクションを表すオブジェクト。
left: 矩形の左端のX座標。ビューポートの左端を原点とする。
top: 矩形の上端のY座標。ビューポートの上端を原点とする。
right: 矩形の右端のX座標。
bottom: 矩形の下端のY座標。
width: 矩形の横幅（境界ボックスの幅、ピクセル）。
height: 矩形の縦幅（境界ボックスの高さ、ピクセル）。
x: leftの別名。現代のブラウザではleftと同じ値を返す。
y: topの別名。現代のブラウザではtopと同じ値を返す。
viewport: ビューポート。表示領域のこと。getBoundingClientRectの基準点となる座標系。
CSSOM View: 要素の境界矩形が参照する座標系や関連仕様を定義するCSSOM Viewモジュールのこと。
transform: CSSのtransformが適用されている場合、getBoundingClientRectの結果に変形後のサイズと位置が反映される。
scrollX: 水平方向のスクロール量。ビューポート原点の移動量を表す。
scrollY: 垂直方向のスクロール量。ビューポート原点の移動量を表す。
innerWidth: ビューポートの横幅。スクロールバーを含む場合がある。
innerHeight: ビューポートの高さ。スクロールバーを含む場合がある。
visualViewport: 実際に表示領域として使われる視覚的ビューポート。ズームやモバイル環境で変化することがある。
offsetLeft: 要素の左端が、オフセット祖先基準でどの位置にあるかを表す値（getBoundingClientRectとは別の測定値）。
offsetTop: 要素の上端が、オフセット祖先基準でどの位置にあるかを表す値。
offsetWidth: 要素の幅。パディング・ボーダー・スクロールバーを含み、マージンは含まない。
offsetHeight: 要素の高さ。パディング・ボーダー・スクロールバーを含み、マージンは含まない。
clientWidth: 要素の内部幅。パディングを含み、ボーダーは含まない。
clientHeight: 要素の内部高度。パディングを含み、ボーダーは含まない。
IntersectionObserver: 要素がビューポート内に入ったり出たりするタイミングを検知するAPI。getBoundingClientRectの値を使って判定されることが多い。
reflow / layout thrashing: getBoundingClientRectの値を頻繁に取得するとレイアウトの再計算が発生し、パフォーマンス低下につながる可能性がある。最小化が推奨される。
devicePixelRatio: デバイスの物理ピクセルとCSSピクセルの比率。getBoundingClientRectの値はCSSピクセル単位で返され、dPRの影響を考慮する場面がある。