導入
フロントエンド開発において、「円を描く」「要素を円軌道で動かす」「波のような動きを作る」といった実装に直面したことはありませんか？これらをCSSだけで解決しようとすると複雑になりがちですが、JavaScriptの Math.cos を活用すれば、数学的なアプローチで非常に滑らかかつ制御しやすいアニメーションを実装できます。今回は、三角関数の基礎から、実践的な活用術までを解説します。
基礎知識
Math.cos とは、JavaScriptの組み込みオブジェクトであるMathに含まれるメソッドで、指定したラジアン値の余弦（コサイン）を返します。
ここで重要なのは、引数に「度数法（0〜360度）」ではなく「弧度法（ラジアン）」を渡す必要があるという点です。
・180度 = Math.PI ラジアン
・360度 = 2 Math.PI ラジアン
この「Math.PI」を基準に計算することで、円周上の座標を算出することが可能になります。
実装/解決策
円軌道上の座標（x, y）を求めるには、以下の公式を使用します。
・x = 中心座標x + 半径 Math.cos(角度)
・y = 中心座標y + 半径 Math.sin(角度)
この公式をrequestAnimationFrameと組み合わせることで、要素を円形に回転させることができます。
サンプルプログラム
以下のコードは、HTML上の要素をブラウザの中心を軸にして円状に回転させるサンプルです。
// 対象の要素を取得
const element = document.getElementById('box');
let angle = 0; // 現在の角度（ラジアン）
function animate() {
// 半径を指定
const radius = 100;
// 中心座標
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
// Math.cosでx座標を、Math.sinでy座標を算出
const x = centerX + radius Math.cos(angle);
const y = centerY + radius Math.sin(angle);
// 要素に位置を適用
element.style.transform = `translate(${x}px, ${y}px)`;
// 角度を少しずつ進める（速度を調整）
angle += 0.02;
// 再帰的に呼び出し
requestAnimationFrame(animate);
}
// アニメーション開始
animate();
応用・注意点
1. パフォーマンスの注意点
アニメーション内でMath.cosを頻繁に計算する場合、ブラウザの描画負荷に注意が必要です。特に多数の要素を動かす場合は、CSSの「transform: rotate」や「motion path」で代用できないか検討しましょう。計算が複雑な場合は、計算済みの値を配列にキャッシュする手法も有効です。
2. 単位変換のミスに注意
「度数法で計算したいのにラジアンを渡してしまい、挙動がおかしい」というバグは非常によくあります。
度数からラジアンへの変換式は (degree Math.PI) / 180 です。この計算を挟むだけで、直感的な値で制御できるようになります。
Math.cosを使いこなすことで、単なる移動アニメーションを超えた、幾何学的で美しいUI表現が可能になります。ぜひ、次のプロジェクトで活用してみてください。