JavaScriptの数値操作を応用した便利なTips集まとめ
先生と生徒の会話形式で理解しよう
生徒
「先生、JavaScriptで数値を扱うときに、ちょっと便利なテクニックとかあるんですか?」
先生
「もちろんあります。普段の計算や配列操作を少し工夫するだけで、コードが短くなったり、読みやすくなったりします。いくつか応用のTipsを紹介しますね。」
生徒
「わぁ、楽しみです。具体的にどんなことができるんですか?」
先生
「では、基本から少し高度な応用まで順番に見ていきましょう。」
1. Mathオブジェクトで便利に計算
JavaScriptにはMathという組み込みオブジェクトがあり、数値操作を簡単にできます。たとえば、四捨五入や乱数生成などです。
// 四捨五入
let num = 3.14159;
console.log(Math.round(num)); // 3
// 小数点以下切り上げ
console.log(Math.ceil(num)); // 4
// 小数点以下切り捨て
console.log(Math.floor(num)); // 3
// ランダムな整数を作る
let rand = Math.floor(Math.random() * 100);
console.log(rand); // 0〜99の整数
2. 数値を文字列に変換してフォーマット
数値を画面表示用に整えるとき、toFixed() や toLocaleString() が便利です。
let price = 1234567.89;
// 小数点以下2桁に丸める
console.log(price.toFixed(2)); // "1234567.89"
// 3桁ごとにカンマを入れる
console.log(price.toLocaleString()); // "1,234,567.89"
3. 配列を使った数値操作の応用
複数の数値をまとめて処理したいときは配列と map、reduce を組み合わせると便利です。
let scores = [80, 90, 70, 60];
// 全ての点数を10点加算
let newScores = scores.map(s => s + 10);
console.log(newScores); // [90, 100, 80, 70]
// 平均点を計算
let sum = scores.reduce((acc, val) => acc + val, 0);
let avg = sum / scores.length;
console.log(avg); // 75
4. 三項演算子で簡潔に条件分岐
数値に応じて処理を変えたいとき、三項演算子 condition ? value1 : value2 を使うと1行で書けます。
let score = 85;
let result = score >= 60 ? "合格" : "不合格";
console.log(result); // "合格"
5. 複数の数値を一度に交換するテクニック
2つの変数の値を簡単に入れ替えるには、分割代入(Destructuring)を使います。
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b); // 20 10
6. 数値の丸めや切り捨て・切り上げの応用
小数点を指定して丸めるとき、Mathオブジェクトを活用すると便利です。
let val = 12.3456;
// 小数点第2位で四捨五入
let rounded = Math.round(val * 100) / 100;
console.log(rounded); // 12.35
// 切り捨て
let floored = Math.floor(val * 100) / 100;
console.log(floored); // 12.34
7. ビット演算で高速に整数処理
数値が整数の場合、ビット演算を使うと高速に計算できます。たとえば小数点以下を切り捨てたいときに |0 を使う方法です。
let floatNum = 45.67;
let intNum = floatNum | 0;
console.log(intNum); // 45
8. ランダムな数値の便利な活用
乱数を生成して、ゲームやサンプルデータ作成に活用することができます。整数範囲を指定する関数を作ると便利です。
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandomInt(1, 10)); // 1〜10の整数
9. 数値操作の注意点
JavaScriptでは小数の計算で誤差が出ることがあります。たとえば 0.1 + 0.2 は 0.30000000000000004 になります。必要に応じて丸め処理や toFixed() を使うことが大切です。