「小数点以下を切り捨てたい」「サイコロのようにランダムな数字を作りたい」「複数の数値から最大値を取りたい」——こうした数値の計算は、JavaScript の Math オブジェクトが担当します。Math は四捨五入・切り上げ・切り捨て・乱数・最大最小・累乗・平方根などをまとめた、数学計算用の組み込みオブジェクトです。この記事では、実務でよく使うメソッドを中心に、基本の使い方からランダムな整数を作る定番パターン、つまずきやすい点までコード例で解説します。
目次
Math オブジェクトとは
Math は、数値計算のためのメソッドや定数をまとめた組み込みオブジェクトです。他のオブジェクトと違って new でインスタンスを作る必要はなく、Math.round() のようにそのまま呼び出して使います。すべてのメソッドは数値を引数に取り、計算結果の数値を返します。
よく使うメソッドを先に一覧で見ておきましょう。それぞれの詳しい使い方は、このあと順番に説明します。
| メソッド | 説明 |
|---|---|
Math.round(x) | 四捨五入する |
Math.floor(x) | 小数点以下を切り捨てる(小さい方へ) |
Math.ceil(x) | 切り上げる(大きい方へ) |
Math.trunc(x) | 小数点以下を取り除く(0方向へ) |
Math.abs(x) | 絶対値(マイナスを取り除く) |
Math.max(...x) | 最大値を返す |
Math.min(...x) | 最小値を返す |
Math.random() | 0以上1未満のランダムな数を返す |
Math.pow(x, y) | xのy乗を返す |
Math.sqrt(x) | 平方根(ルート)を返す |
四捨五入・切り捨て・切り上げ
小数を整数にそろえるメソッドは3つあり、丸め方が違います。Math.round() は四捨五入、Math.floor() は切り捨て(より小さい整数へ)、Math.ceil() は切り上げ(より大きい整数へ)です。
Math.round(3.4); // 3(四捨五入)
Math.round(3.5); // 4
Math.floor(3.9); // 3(切り捨て)
Math.ceil(3.1); // 4(切り上げ)
マイナスの数では floor と ceil の動きに注意が必要です。Math.floor() は常に小さい方(数直線の左)へ丸めるため、Math.floor(-1.5) は -2 になります。一方、単純に小数部分だけを取り除きたいときは Math.trunc() を使います。こちらは符号に関わらず小数点以下を捨てるだけなので、Math.trunc(-1.5) は -1 です。
Math.floor(-1.5); // -2(小さい方へ)
Math.trunc(-1.5); // -1(小数を取り除くだけ)
Math.ceil(-1.5); // -1(大きい方へ)
小数第2位までに丸める
Math.round() は整数に丸めますが、金額や割合の表示では「小数第2位まで」のように桁を指定したいことがあります。その場合は、丸めたい桁の分だけ10倍してから丸め、最後に同じ数で割り戻すのが定番のテクニックです。
// 小数第2位までに四捨五入する
const price = 1234.5678;
const rounded = Math.round(price * 100) / 100;
console.log(rounded); // 1234.57
表示用に「必ず小数第2位まで(末尾の0も残す)」したいときは、丸めではなく toFixed() が便利です。ただし toFixed() は数値ではなく文字列を返すため、計算に使う値は Math で丸め、画面に表示する文言は toFixed()、と使い分けると分かりやすくなります。
絶対値・最大値・最小値
Math.abs() は絶対値(マイナスを取り除いた値)を返します。2点間の差の大きさを求めるときなどに使います。Math.max() と Math.min() は、渡した複数の数値の中から最大・最小を返します。
Math.abs(-8); // 8
Math.max(3, 1, 9, 5); // 9
Math.min(3, 1, 9, 5); // 1
Math.max() と Math.min() は引数を1つずつ受け取る仕様なので、配列をそのまま渡しても正しく動きません。配列から最大・最小を求めたいときは、スプレッド構文(...)で要素を展開して渡します。
const scores = [82, 95, 70, 88];
Math.max(scores); // NaN(配列のままでは計算できない)
Math.max(...scores); // 95(スプレッド構文で展開する)
Math.random() でランダムな数を作る
Math.random() は、0以上1未満のランダムな小数を返します(0 は含みますが 1 は含みません)。これ単体ではほとんど使わず、欲しい範囲に変換して利用します。
Math.random(); // 例: 0.5731042... (実行のたびに変わる)
たとえば「1〜6のサイコロ」のように整数のランダム値が欲しいときは、欲しい個数を掛けてから Math.floor() で切り捨て、必要なら下限を足します。最小値 min 以上、最大値 max 以下の整数を作る関数は、次のように書くのが定番です。
// min 以上 max 以下のランダムな整数を返す
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
randomInt(1, 6); // 1〜6 のいずれか(サイコロ)
randomInt(0, 99); // 0〜99 のいずれか
max - min + 1 の + 1 を忘れると、最大値が出なくなります。Math.random() は 1 未満なので、範囲の個数ぴったりを掛けることで、上限も含めた整数が均等に得られるようになっています。
累乗・平方根
Math.pow(x, y) は x の y 乗を返します。なお、現在のJavaScriptには累乗演算子 ** もあり、こちらの方が簡潔に書けます。Math.sqrt() は平方根(ルート)を返します。
Math.pow(2, 10); // 1024(2の10乗)
2 ** 10; // 1024(** 演算子でも同じ)
Math.sqrt(144); // 12(144の平方根)
NaN が返るときに確認すること
Math のメソッドが NaN(Not a Number=数値でない)を返すときは、渡している値が数値になっていないことがほとんどです。とくに、input から取得した値や JSON のデータは文字列になっていることが多く、文字列のまま計算しようとすると NaN になります。
対処は、計算の前に Number() や parseFloat() で数値へ変換しておくことです。また前述のとおり、Math.max([1, 2]) のように配列をそのまま渡しても NaN になります。スプレッド構文で展開する点とあわせて覚えておきましょう。
const input = "3.5"; // 文字列
Math.round(input); // 4(数字の文字列は変換される場合もある)
Math.round("abc"); // NaN(数値にできない)
// 安全のため明示的に数値へ変換しておく
Math.round(Number(input)); // 4
まとめ
Math オブジェクトは、数値の丸め・乱数・最大最小・累乗などをまとめて扱える便利な道具です。要点を整理します。
- 丸めは
round(四捨五入)・floor(切り捨て)・ceil(切り上げ)・trunc(小数を取り除く)。 - 桁を指定して丸めるときは、10のべき乗を掛けて丸め、割り戻す。
max・minに配列を渡すときはスプレッド構文(...)で展開する。- ランダムな整数は
Math.floor(Math.random() * (max - min + 1)) + min。 NaNが出たら、値が数値か(文字列・配列でないか)を確認する。
まずは Math.floor() と Math.random() を組み合わせたランダム整数のパターンを覚えておくと、ゲームや抽選、ダミーデータの生成など幅広い場面で役立ちます。