【CSS Modules】atan2()関数の使い方
atan2()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
atan2()関数は、CSSの数学関数の一つで、2つの引数から角度を計算する関数です。具体的には、原点からの相対的なy座標とx座標を受け取り、その点が存在する方向を示す角度をラジアン単位で返します。引数はy座標が先、x座標が後の順で指定します。
この関数は、通常のatan()関数とは異なり、2つの引数（yとx）の符号を個別に考慮します。これにより、座標がどの象限（右上、左上、左下、右下）にあるかに関わらず、-πラジアンからπラジアン（-180度から180度）の範囲で正確な角度を計算できるという大きな利点があります。たとえば、atan(y/x)ではxが負の場合に正しく扱えないことがありますが、atan2(y, x)はこのような問題を解決します。
CSSでの主な用途としては、calc()関数内で利用され、動的なスタイリングを実現する場面で活躍します。例えば、JavaScriptで取得した要素の相対位置に基づいて、その要素を適切な角度に回転させるtransform: rotate()プロパティの値を計算したり、要素間の方向を示すグラデーションの角度を決定したりする場合に非常に便利です。デザイナーが意図した複雑なレイアウトやアニメーションを実現するための強力なツールとなります。
返される値は常にラジアン単位であるため、度数法（deg）で角度を指定するCSSプロパティで使用する場合は、calc()関数内で* 180 / piのように変換する必要があります。
構文(syntax)
1atan2(1, 1)
引数(parameters)
y: <number> | <angle>, x: <number> | <angle>
- y: <number> | <angle>: y座標を指定する数値または角度
- x: <number> | <angle>: x座標を指定する数値または角度
戻り値(return)
atan2()関数は、2つの引数（x座標とy座標）から、原点からその点へのベクトルがx軸の正の方向となす角度をラジアン単位で返します。