1. 導入
フロントエンド開発において、要素をアニメーションさせる際、単なる「等速移動」では機械的な印象を与えてしまいがちです。Math.sin関数を活用すると、自然界の揺らぎや波のような「緩急のある動き」をJavaScriptだけで簡単に実装できます。本記事では、Math.sinの基礎から、実務で使える応用テクニックまでを解説します。
2. 基礎知識
Math.sin(x)は、JavaScriptの標準的な組み込み関数であり、指定したラジアン値（x）の正弦（サイン）を返します。返り値は常に -1 から 1 の範囲に収まります。
この関数の最大の特徴は、「周期性」です。0から始まり、1まで上昇し、0に戻り、-1まで下降してまた0に戻るという挙動を繰り返します。この特性をアニメーションの「進行度」に掛け合わせることで、往復運動や波打つようなモーションを生成できます。
3. 実装/解決策
Math.sinをアニメーションに使う場合、時間の経過（requestAnimationFrameのタイムスタンプや経過時間）を引数に渡すのが一般的です。
1. 現在の時間を取得する。
2. 時間に対して係数を掛け、Math.sinに渡す（周期の調整）。
3. 結果（-1〜1）を、移動させたい距離やサイズに変換する。
4. サンプルプログラム
以下のコードは、要素を左右に滑らかに揺らす実装例です。CSSのアニメーションよりも細かな制御が必要な場合に最適です。
// HTML: <div id="box" style="width:50px; height:50px; background:red;"></div>
const box = document.getElementById('box');
let startTime = null;
function animate(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
// 1. 周期を調整（0.005を大きくすると速くなる）
// 2. Math.sinの結果は-1〜1なので、振幅（50px）を掛ける
const x = Math.sin(elapsed 0.005) 50;
// 3. 要素のスタイルを更新（transformでGPUアクセラレーションを有効化）
box.style.transform = `translateX(${x}px)`;
requestAnimationFrame(animate);
}
// アニメーション開始
requestAnimationFrame(animate);
5. 応用・注意点
実務でMath.sinを使用する際に注意すべきポイントは以下の3点です。
・パフォーマンスへの配慮
Math.sin自体は軽量ですが、毎フレームDOMのスタイルを直接書き換えると、ブラウザの再計算コストが発生します。必ずtransformプロパティを使用し、GPUを利用した描画を意識してください。
・「位相」のズレ
複数の要素を波打たせる場合、Math.sinの引数にオフセット（Math.sin(time + index)）を加えることで、美しいウェーブアニメーションが作れます。
・値の正規化
Math.sinの出力はマイナス値を含みます。もし「0から100の間で揺らしたい」という場合は、(Math.sin(t) + 1) / 2 と計算することで、出力を 0〜1 に正規化してから振幅を掛けるのが定石です。
Math.sinを理解すると、複雑なライブラリを導入しなくても、UIに有機的で心地よいリズムを生み出すことができます。ぜひ、ローディングスピナーやホバーアクションに取り入れてみてください。