1. 導入
フロントエンド開発において、マウスの位置に合わせて要素を回転させたり、二点間の角度を算出したりする演出は頻繁に求められます。単純な三角関数（Math.atan）を使うと、象限の判定やゼロ除算の考慮が必要になり、実装が煩雑になりがちです。本記事で解説する Math.atan2 は、それらの課題を一撃で解決する非常に強力なAPIです。座標から角度を求める必要があるすべてのフロントエンドエンジニアにとって、必須の知識となります。
2. 基礎知識
一般的な Math.atan(y / x) は、引数として「傾き（y/x）」を取ります。しかし、これでは「x=0」の時のエラー（ゼロ除算）が発生するほか、角度が180度の範囲（-π/2 ～ π/2）に制限されるという問題があります。
一方、Math.atan2(y, x) は、xとyの座標を個別に受け取ることで、全方位（-π ～ π ラジアン）の角度を正確に算出します。返り値は「正のX軸から指定した点までの角度」となります。これにより、象限を意識することなく、あらゆる位置関係での角度計算が可能になります。
3. 実装/解決策
Math.atan2 を使う際の手順は非常にシンプルです。
1. 回転させたい中心点（基準点）を定義する。
2. マウス座標やターゲット座標から中心点の差分（dy, dx）を算出する。
3. Math.atan2(dy, dx) を実行する。
4. 返り値はラジアンなので、必要に応じて 180 / Math.PI を掛けて度に変換する。
4. サンプルプログラム
マウスの位置に向かって要素（矢印など）を回転させる実用的なコード例です。
// マウスの移動イベントで角度を計算する例
window.addEventListener('mousemove', (event) => {
const element = document.querySelector('#arrow');
const rect = element.getBoundingClientRect();
// 要素の中心座標を取得
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
// 差分（dy, dx）を計算
const dy = event.clientY - centerY;
const dx = event.clientX - centerX;
// Math.atan2でラジアンを取得
const radians = Math.atan2(dy, dx);
// 度数法（Degree）に変換
const degrees = radians (180 / Math.PI);
// CSSのtransformで回転を適用
element.style.transform = `rotate(${degrees}deg)`;
});
5. 応用・注意点
現場で活用する際の重要な注意点が2つあります。
一つ目は 座標系の違い です。CSSやCanvasの座標系は、Y軸が下向きにプラスになります。そのため、一般的な数学のグラフ（Y軸が上向き）とは回転方向が逆転して見えることがあります。必要に応じて degrees + 90 などのオフセットを調整してください。
二つ目は パフォーマンス です。マウス移動イベント（mousemove）は非常に高頻度で発火します。計算自体は軽量ですが、DOMの書き換え（styleの更新）がボトルネックになる場合は、requestAnimationFrame を使用して描画更新を最適化することをお勧めします。また、atan2は非常に便利ですが、あくまで「あるベクトルがどの方向を向いているか」を計算するものであることを意識し、ベクトル演算の基礎として使いこなしてください。