JavaScriptで座標から角度を計算したい場合、`Math.atan2()`関数を使用します。この記事では、`Math.atan2()`の使い方と実践的な例を詳しく解説します。

Math.atan2()とは

`Math.atan2()`は、2つの引数（y座標, x座標）から角度を計算するJavaScriptの標準関数です。返り値はラジアン（-π から π）で返されます。

Math.atan2(y, x)

基本的な使い方

// 基本的な使用例
const angle = Math.atan2(1, 1);  // 0.7853981633974483（約45度）

度数法（degree）への変換

`Math.atan2()`はラジアンを返すため、度数に変換する必要がある場合は以下のように計算します：

const radians = Math.atan2(1, 1);
const degrees = radians * (180 / Math.PI);  // 45度

実践的な使用例

マウスの方向を計算する

// マウスの方向を計算する例
document.addEventListener('mousemove', (e) => {
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;
    
    const deltaX = e.clientX - centerX;
    const deltaY = e.clientY - centerY;
    
    const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
    console.log(`マウスの角度: ${angle}度`);
});

要素を特定の方向に回転させる

function rotateElement(element, targetX, targetY) {
    const rect = element.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    
    const angle = Math.atan2(targetY - centerY, targetX - centerX);
    const degrees = angle * (180 / Math.PI);
    
    element.style.transform = `rotate(${degrees}deg)`;
}

よくある問題と解決策

角度が負の値になる

`Math.atan2()`は -π から π の範囲で値を返すため、時計回りで0-360度の値が必要な場合は以下のように変換します：

function getNormalizedDegrees(x, y) {
    let angle = Math.atan2(y, x) * (180 / Math.PI);
    if (angle < 0) {
        angle += 360;
    }
    return angle;
}

精度の問題

小数点以下の桁数を制限したい場合は、`toFixed()`メソッドを使用します：

const angle = Math.atan2(y, x) * (180 / Math.PI);
const roundedAngle = parseFloat(angle.toFixed(2));

まとめ

`Math.atan2()`は座標から角度を計算する強力な関数です。主なポイントは：

  • y座標とx座標から角度を計算できる
  • ラジアンで結果が返される
  • 度数への変換が必要な場合は計算が必要
  • マウスの追従や要素の回転など、様々な用途に活用できる

これらの知識を活用することで、ゲーム開発やインタラクティブなWebアプリケーションの開発に役立てることができます。