導入: なぜMath.atanが必要なのか？
Web開発やゲーム制作をしていると、「マウスの方向にキャラクターを向けたい」「要素を特定の座標に向けて回転させたい」という場面に遭遇します。こうした「座標から角度を求める」計算は、手動で行うと非常に複雑です。JavaScriptに標準搭載されているMath.atanを使うことで、この難しい計算をわずか一行で解決し、表現の幅を大きく広げることができます。
基礎知識: Math.atanとは何か？
Math.atanは、数学でいう「逆正接（アークタンジェント）」を求めるための関数です。直角三角形において、「高さ ÷ 底辺」の比率を渡すと、対応する「角度（ラジアン）」を返してくれます。
ここで重要なのが「ラジアン」という単位です。私たちが普段使う「度（0〜360度）」とは異なり、コンピュータの計算では「円周率（π）」を基準とした値が使われます。180度は「Math.PI」という値に相当すると覚えておきましょう。
実装/解決策: 角度を求める手順
Math.atanを使う際のポイントは、引数に「高さ / 底辺」の結果を渡すことです。ただし、Math.atanには「座標の符号（プラスかマイナスか）を判別できない」という弱点があります。そのため、現場ではより高機能なMath.atan2を使うのが一般的です。Math.atan2は「高さ」と「底辺」を別々に引数として渡すだけで、全方位（360度）の角度を正しく算出してくれる非常に便利な関数です。
サンプルプログラム: マウスの方向に矢印を向ける
以下のコードをHTMLファイルとして保存し、ブラウザで開いてみてください。マウスを動かすと、画面中央の矢印がマウスを追いかけるように回転します。
応用・注意点: 現場で役立つ知識
1. Math.atan2を優先的に使う
前述の通り、通常のMath.atanは計算結果が「-90度から90度」の範囲に限定されてしまいます。全方位の計算が必要なUI構築では、必ずMath.atan2を使用してください。
2. 単位変換を忘れない
CSSのrotateプロパティは「deg（度）」を期待しますが、JavaScriptの計算結果は「ラジアン」です。結果をそのままCSSに代入しても動かないことが多いため、「ラジアン (180 / Math.PI)」という変換式をセットで覚えておきましょう。
3. 座標系に注意
Webの座標系は、左上が原点(0,0)で、下にいくほどY軸がプラスになります。数学のグラフとはY軸の正負が逆であることを意識すると、回転方向のバグに悩まされることがなくなります。