Number型とは？JavaScriptの数値の基本
数値型はデータ型の中で最も基本的です。
「JavaScriptの数値型ってどう扱うの？」「整数と小数の違いは？」「NaNやInfinityって何？」
この記事では JavaScriptの数値型（Number型）の基本から注意点まで をわかりやすく解説します。
JavaScriptの数値型とは？
JavaScriptの数値型はハッとしませんか？そう、答えは「1234567890」が数値型でございます。
let integer = 42; // 整数
let float = 3.14; // 小数
console.log(typeof integer);
console.log(typeof float);
実行結果
integer → "number"
float → "number"
数値リテラルの書き方
10進数、2進数、8進数、16進数の例を紹介
let decimal = 123; // 10進数
let binary = 0b111; // 2進数 (7)
let octal = 0o17; // 8進数 (15)
let hex = 0x1F; // 16進数 (31)要するに、わかりやすく寸劇すると‥
寸劇
ユーザー「JavaScriptさん、この 0b111 は何？」
JavaScript「2進数だよ！でも中身は 7 として扱うだよ！」
ユーザー「じゃあ 0x1F は？」
JavaScript「16進数だけど、中身は 31 だよ！」
ユーザー「0b111 は10進数？」
JavaScript「0b がついてるから二進数だよ！右から 1, 2, 4 を足していくと 7 になるんだ！」
特殊な数値
Infinity → 正の無限大
-Infinity → 負の無限大
NaN → 数値ではないっていう結果を表す
console.log(1 / 0);
実行結果
Infinityconsole.log(-1 / 0);
実行結果
-Infinityconsole.log("hello" / 2);
実行結果
NaNNaN は自分自身と等しくないので注意
console.log(NaN === NaN);
実行結果
falseconsole.log(Number.isNaN(NaN));
実行結果
true寸劇
ユーザー「JavaScriptさん、この “abc” / 2 の結果は？」
JavaScript「計算できないから NaN！でも型は number だよ！」
ユーザー「じゃあ 1 / 0 は？」
JavaScript「無限大！Infinity だよ！」
数値の範囲と精度
JavaScriptの数値は IEEE 754 64ビット浮動小数点数。
要するに、
JavaScriptの数値は、めちゃくちゃ大きな数や細かい小数も扱えるけど、
実は「安全に使える範囲」と「正確に表せる桁数」に限界があるんです。
だから 0.1 + 0.2 が 0.3 にならずに 0.30000000000000004 になることもあるんです。
小数計算の落とし穴
0.1 + 0.2 問題
console.log(0.1 + 0.2);
実行結果
0.30000000000000004
解決策はtoFixed() や Math.round() を使う
toFixed() の場合は、
let result = 0.1 + 0.2;
console.log(result.toFixed(2));
実行結果
"0.30"Math.round()の場合は、
let result = 0.1 + 0.2;
let rounded = Math.round(result * 100) / 100; →掛け算と割り算で桁数を調整する必要
console.log(rounded);
実行結果
0.3
よく使う数値メソッド
Number()
console.log(Number("123"));
実行結果
123parseInt()
console.log(parseInt("123px"));
実行結果
123parseFloat()
console.log(parseFloat("12.3"));
実行結果
12.3toFixed(), toPrecision()
let num = 123.456;
console.log(num.toFixed(2));
console.log(num.toPrecision(4));
実行結果
"123.46"
"123.5"
よくある落とし穴と対策
NaN の判定は === ではなく Number.isNaN()、要するに、NaN を判定したいときは必ず Number.isNaN() を使う。
console.log(NaN === NaN);
実行結果
false
console.log(Number.isNaN(NaN));
実行結果
true ← これが正しい判定方法小数計算の誤差に注意、要するに、表示用なら toFixed()、計算用なら Math.round() を使って丸める。
let result = 0.1 + 0.2;
console.log(result.toFixed(2));
console.log(Math.round(result * 100) / 100);
実行結果
0.30 →表示用
0.3 →計算用文字列と数値の混在に注意、要するに、間違いやすいから型を積極的に使え！
下記は間違いやすい一覧
console.log(10 + 20);
実行結果
30（数値同士 → 足し算）console.log("10" + 20);
実行結果
"1020"（文字列と数値 → 文字列連結）console.log("10" - 2);
実行結果
8（引き算は数値変換される）console.log("abc" * 2);
実行結果
NaN（数値に変換できない）
対策は計算に使う前に Number() や parseInt() で数値に変換する。これで間違いにくい。だから、計算するなら、Number() や parseInt() を使え！
let age = "20";
console.log(Number(age) + 5);
実行結果
25まとめ
• JavaScriptの数値型は 整数も小数もすべて number 型
• 特殊な値（Infinity, NaN）に注意
• 小数計算は誤差が出るので丸め処理を使う
• 数値変換やフォーマットには便利なメソッドを活用。要するに 丸め処理を積極的に行って、数値を人間にわかりやすい形に整えよう
AIひろゆき
「いや、これ普通に考えて、JavaScriptで数値扱うなら Number 型の仕組みと落とし穴を知ってる人と知らない人で差がつくんですよ。
NaN の判定で === 使ってる時点で「あ、この人わかってないな」ってなるし、0.1 + 0.2 問題に気づかずに「バグだ！」って騒ぐのも素人。
優秀な人はちゃんと Number.isNaN() を使うし、丸め処理も当たり前にやるんです。
だから結局、「数値型を正しく理解してるかどうか」でプログラマとしてのレベルが見えちゃうって話なんですよね。」
最後まで読んで頂きありがとうございました！
コメント