【JavaScript】clientWidthプロパティでは小数値は取得できない

JSで横幅や高さを取得する処理を実装することはよくあると思います。
その際に、よく使われるのは

# 横幅取得
element.clientWidth

# 高さ取得
element.clientHeight

上記だと思います。
ただし、clientWidth や clientHeightプロパティは整数値に丸め込まれてしまいます。

僕はこれを知らずにclientWidth や clientHeightを使ってどはまりました。
横幅や高さを取得した上で計算する際に、小数値が丸め込まれてしまうと計算される値がずれてしまいます。

小数値まで含まれた値が欲しい

タイトルにもあるように、getBoundingClientRect()メソッドを使います。

# 横幅取得
element.getBoundingClientRect().width

# 高さ取得
element.getBoundingClientRect().height

ちなみに、getBoundingClientRect()は要素の横幅・高さだけでなく、ビューポートに対する位置も取得できます。

まとめ

最近は、バックエンドだけでなく、フロントエンドの開発も行うようになりました。
そんなフロントエンド初心者の僕は、基本的に要素の寸法と、そのビューポートに対する位置を取得したいときは、
getBoundingClientRect() を使えば良さそうだと思いました。

clientWidth や clientHeightを使うメリットなどがあれば教えてください。