導入
フロントエンド開発において、数値計算は避けて通れません。特にレイアウトの計算、アニメーションの補間、あるいはグラフ描画において、数値の丸めや最大値・最小値の抽出は頻出する処理です。JavaScript標準の Math オブジェクトを適切に使いこなすことは、コードの可読性を高め、不要なバグを防ぐために非常に重要です。本記事では、実務で頻出する Math API のテクニックを解説します。
基礎知識
Math は、数値に対する数学的な定数と関数を提供する組み込みオブジェクトです。他のオブジェクトとは異なり、コンストラクタ（new Math()）を持つわけではなく、すべてのメソッドやプロパティは「静的（static）」です。つまり、Math.random() のように、常に「Math.プロパティ名」という形で呼び出します。計算結果は基本的に数値型（number）として返されます。
実装/解決策
実務で最もよく遭遇する課題は、「範囲の制御」と「精度の調整」です。
例えば、スライダーの値の正規化や、特定の範囲内でのランダム値生成などです。
・Math.min() / Math.max(): 複数の値から境界値を特定します。
・Math.floor() / Math.ceil() / Math.round(): 数値の切り捨て、切り上げ、四捨五入を行います。
・Math.clamp（自作関数）: 特定の範囲内に値を収める処理は、多くのライブラリで採用される必須テクニックです。
サンプルプログラム
以下のコードは、実務でよく利用する「値のクランプ（範囲制限）」と「ランダム整数生成」の実装例です。
// 1. 値を特定の範囲（min〜max）に収める関数
// UIのスクロール位置制限や、スライダーの値制限に便利です
const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
// 2. 指定範囲内のランダムな整数を取得する関数
// ランダムなID生成や、演出のウェイト設定などに使用します
const getRandomInt = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
// Math.random()は0以上1未満の浮動小数点を返すため、範囲を乗算します
return Math.floor(Math.random() (max - min + 1)) + min;
};
// 使用例
const userInputValue = 150;
const safeValue = clamp(userInputValue, 0, 100); // 100に制限される
console.log(safeValue);
const randomDelay = getRandomInt(500, 2000); // 500から2000の間の乱数
console.log(`次の処理まで ${randomDelay} ミリ秒待機します`);
応用・注意点
Math API を扱う上で、現場で特に注意すべき点が2つあります。
1. 浮動小数点数の誤差: JavaScriptの数値はIEEE 754形式であるため、0.1 + 0.2 が 0.30000000000000004 になるような誤差が発生します。通貨計算など、厳密な精度が必要な場合は Math.round() での補正や、ライブラリの利用を検討してください。
2. Math.random() のセキュリティ: Math.random() は暗号学的に安全な乱数ではありません。パスワード生成やセキュリティに関わるトークン生成には、必ず window.crypto.getRandomValues() を使用するようにしてください。
Math API は非常にシンプルですが、組み合わせることで複雑なロジックを簡潔に記述できます。ぜひ日々の開発で積極的に活用してみてください。