カテゴリ: JavaScript 更新日: 2025/12/16

JavaScriptの数値操作を応用した便利なTips集まとめ

JavaScriptの数値操作を応用した便利なTips集まとめ
JavaScriptの数値操作を応用した便利なTips集まとめ

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで数値を扱うときに、ちょっと便利なテクニックとかあるんですか?」

先生

「もちろんあります。普段の計算や配列操作を少し工夫するだけで、コードが短くなったり、読みやすくなったりします。いくつか応用のTipsを紹介しますね。」

生徒

「わぁ、楽しみです。具体的にどんなことができるんですか?」

先生

「では、基本から少し高度な応用まで順番に見ていきましょう。」

1. Mathオブジェクトで便利に計算

1. Mathオブジェクトで便利に計算
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. 数値を文字列に変換してフォーマット

2. 数値を文字列に変換してフォーマット
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. 配列を使った数値操作の応用

3. 配列を使った数値操作の応用
3. 配列を使った数値操作の応用

複数の数値をまとめて処理したいときは配列と mapreduce を組み合わせると便利です。


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. 三項演算子で簡潔に条件分岐

4. 三項演算子で簡潔に条件分岐
4. 三項演算子で簡潔に条件分岐

数値に応じて処理を変えたいとき、三項演算子 condition ? value1 : value2 を使うと1行で書けます。


let score = 85;
let result = score >= 60 ? "合格" : "不合格";
console.log(result); // "合格"

5. 複数の数値を一度に交換するテクニック

5. 複数の数値を一度に交換するテクニック
5. 複数の数値を一度に交換するテクニック

2つの変数の値を簡単に入れ替えるには、分割代入(Destructuring)を使います。


let a = 10;
let b = 20;

[a, b] = [b, a];
console.log(a, b); // 20 10

6. 数値の丸めや切り捨て・切り上げの応用

6. 数値の丸めや切り捨て・切り上げの応用
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. ビット演算で高速に整数処理

7. ビット演算で高速に整数処理
7. ビット演算で高速に整数処理

数値が整数の場合、ビット演算を使うと高速に計算できます。たとえば小数点以下を切り捨てたいときに |0 を使う方法です。


let floatNum = 45.67;
let intNum = floatNum | 0;
console.log(intNum); // 45

8. ランダムな数値の便利な活用

8. ランダムな数値の便利な活用
8. ランダムな数値の便利な活用

乱数を生成して、ゲームやサンプルデータ作成に活用することができます。整数範囲を指定する関数を作ると便利です。


function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomInt(1, 10)); // 1〜10の整数

9. 数値操作の注意点

9. 数値操作の注意点
9. 数値操作の注意点

JavaScriptでは小数の計算で誤差が出ることがあります。たとえば 0.1 + 0.20.30000000000000004 になります。必要に応じて丸め処理や toFixed() を使うことが大切です。

カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう