導入
Web開発やデータ可視化、あるいはゲーム開発において、図形計算やベクトルの操作が必要になる場面は少なくありません。その際、角度を求めるために欠かせないのが「逆三角関数」です。今回は、JavaScriptの標準ライブラリであるMath.acosについて解説します。このAPIを理解することで、二つのベクトル間の角度を算出したり、三角関数を用いた複雑なアニメーションを実装したりする際の課題をスマートに解決できるようになります。
基礎知識
Math.acosは、引数として指定した数値の「逆余弦（アークコサイン）」を返す関数です。数学におけるacos(x)は、cos(θ) = x となるような角度θ（ラジアン）を求める計算を指します。
重要なポイントは、戻り値が「ラジアン（弧度法）」である点と、引数の範囲です。
・引数：-1から1の間の数値。この範囲外を指定するとNaN（Not a Number）が返されます。
・戻り値：0からπ（約3.14）の範囲の数値（ラジアン）。
度数法（0〜360度）で扱いたい場合は、ラジアンに「180 / Math.PI」を掛ける変換が必要であることを覚えておきましょう。
実装/解決策
Math.acosを利用して二つのベクトル間の角度を求める場合、以下の手順を踏みます。
1. 二つのベクトルのドット積（内積）を求める。
2. それぞれのベクトルの大きさを求める。
3. 内積をベクトルの大きさの積で割る。
4. その結果に対してMath.acosを適用する。
この手順により、幾何学的な計算をコード上で正確に再現することが可能です。
サンプルプログラム
以下のコードは、二つのベクトル間の角度を度数法で算出する例です。そのままコピーしてコンソールで実行可能です。
// 二つのベクトルの角度を計算する関数
function getAngleBetweenVectors(v1, v2) {
// 内積を計算
const dotProduct = v1.x v2.x + v1.y v2.y;
// 各ベクトルの長さを計算
const mag1 = Math.sqrt(v1.x 2 + v1.y 2);
const mag2 = Math.sqrt(v2.x 2 + v2.y 2);
// cosθ = (A・B) / (|A| |B|)
const cosTheta = dotProduct / (mag1 mag2);
// Math.acosでラジアンを取得
const radian = Math.acos(cosTheta);
// ラジアンを度に変換して返す
return radian (180 / Math.PI);
}
const vectorA = { x: 1, y: 0 };
const vectorB = { x: 0, y: 1 };
console.log("二つのベクトルの角度は: " + getAngleBetweenVectors(vectorA, vectorB) + "度");
応用・注意点
現場でMath.acosを扱う際に最も陥りやすいバグは、浮動小数点数の誤差です。例えば、計算結果が本来「1.0」になるべきところで、わずかな誤差により「1.0000000000000002」のような値になってしまうことがあります。この場合、Math.acosは範囲外とみなしてNaNを返してしまいます。
これを回避するために、引数を「Math.max(-1, Math.min(1, 値))」のようにして、必ず-1から1の範囲に収めるクランプ（固定）処理を行うのが、堅牢なフロントエンド実装のための鉄則です。この一手間を加えるだけで、意図しないNaNの発生を未然に防ぐことができます。