JavaScript | 基礎構文：データ型 – Number

JavaScript
スポンサーリンク

JavaScript入門：Number（数値型）とは

JavaScriptの数値は「整数も小数も同じ型（Number）」で扱います。計算、比較、書式化、文字列からの変換など、Numberの基礎を押さえるとデータ処理がスムーズになります。

Numberの基本と書き方

  • 単一の数値型: JavaScriptの数値はすべて Number（倍精度浮動小数点）。整数と小数の型は分かれていません。
  • 数値リテラル: そのまま書くだけでOK。小数、負数、指数表現にも対応します。
  • 代表的な例:
let a = 42;        // 整数
let b = -7;        // 負の数
let c = 3.14;      // 小数
let d = 1e6;       // 指数表現（1000000）
let e = 0.5e-3;    // 0.0005
JavaScript
  • 基本演算: + - * / %（足し算、引き算、掛け算、割り算、剰余）
console.log(5 + 3);   // 8
console.log(10 - 4);  // 6
console.log(6 * 7);   // 42
console.log(9 / 2);   // 4.5
console.log(7 % 3);   // 1（余り）
JavaScript

特殊な値とチェック関数

  • Infinity: 無限大。ゼロ除算などで発生します。
console.log(1 / 0);       // Infinity
console.log(-1 / 0);      // -Infinity
JavaScript
  • NaN（Not-a-Number）: 数値にできない結果。計算の途中でも発生します。
console.log(Number("abc")); // NaN
console.log(0 / 0);         // NaN
JavaScript
  • 厳密な判定に使う関数:
    • Number.isNaN(x): x が本当に NaN か
    • Number.isFinite(x): x が有限の数か（Infinity/NaN を除外）
console.log(Number.isNaN(NaN));        // true
console.log(Number.isNaN("NaN"));      // false（文字列はNaNではない）
console.log(Number.isFinite(100));     // true
console.log(Number.isFinite(Infinity));// false
JavaScript
  • グローバル isNaN の注意: 暗黙の変換を行うため、初心者は Number.isNaN を使うのが安全。

浮動小数点の誤差と安全な整数

  • 小数の誤差: 2進数で表現するため、十進小数が正確に表せないことがあります。
console.log(0.1 + 0.2);         // 0.30000000000000004（誤差）
console.log(0.1 + 0.2 === 0.3); // false
JavaScript
  • 誤差対策の例:
    • 丸める: 小数点以下を揃える
const sum = 0.1 + 0.2;
const fixed = Number(sum.toFixed(2)); // "0.30" → 0.3 に変換
console.log(fixed === 0.3); // true
JavaScript
  • 整数化して計算: 金額などでは「100倍して整数で計算→最後に戻す」方法が有効
const total = (10 + 20) / 100;  // 0.3（整数で計算）
JavaScript
  • 安全な整数範囲: Number で正確に扱える整数は ±9,007,199,254,740,991 まで
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991
JavaScript
  • BigIntとの違い（参考）: より大きい整数が必要なら BigInt（末尾に n）を使います。Number と直接混ぜて演算はできません。
const big = 9007199254740993n; // BigInt
// 1 + big; // TypeError（型が違う）
JavaScript

数値への変換・解析・書式化

  • 文字列から数値へ:
    • Number(str): 全体を数値にできれば変換、ダメなら NaN
    • parseInt(str, 10): 先頭から整数部分のみ
    • parseFloat(str): 小数まで読む
console.log(Number("123"));     // 123
console.log(Number("12px"));    // NaN
console.log(parseInt("12px",10));// 12
console.log(parseFloat("3.14rad"));// 3.14
JavaScript
  • 単項+で素早く変換:
console.log(+"456");    // 456
console.log(+true);     // 1
console.log(+"abc");    // NaN
JavaScript
  • 数値の文字列化・桁揃え:
    • toString(radix): 文字列へ（基数を指定可）
    • toFixed(digits): 小数点以下を指定して文字列出力（四捨五入）
    • toLocaleString(): 3桁区切りやロケール対応のフォーマット
const n = 255;
console.log(n.toString(16));        // "ff"（16進表現）
console.log((3.14159).toFixed(2));  // "3.14"
console.log((1000000).toLocaleString("ja-JP")); // "1,000,000"
JavaScript
  • Mathオブジェクトの主な関数:
console.log(Math.round(2.6)); // 3（四捨五入）
console.log(Math.floor(2.6)); // 2（切り捨て）
console.log(Math.ceil(2.1));  // 3（切り上げ）
console.log(Math.sqrt(16));   // 4（平方根）
console.log(Math.random());   // 0以上1未満の乱数
JavaScript

よくある落とし穴と回避策

  • 落とし穴: 小数誤差で比較がズレる
    • 回避策: toFixed で丸める、許容誤差で比較する
const approxEqual = (x, y, eps = Number.EPSILON) => Math.abs(x - y) < eps;
console.log(approxEqual(0.1 + 0.2, 0.3)); // true（ほぼ等しい）
JavaScript
  • 落とし穴:parseInt("08") が基数推測で誤解（古い仕様）
    • 回避策: いつも第2引数に 10 を渡す
parseInt("08", 10); // 8（安全）
JavaScript
  • 落とし穴:isNaN("abc") が true（暗黙変換）
    • 回避策: 代わりに Number.isNaN(Number("abc")) を使う

ミニ練習

  • 問1: 乱数で1〜6のサイコロ値を作って出力せよ。
const dice = Math.floor(Math.random() * 6) + 1;
console.log(dice);
JavaScript
  • 問2: "1200.50円" から金額 1200.5 を取り出せ。
const price = parseFloat("1200.50円");
console.log(price); // 1200.5
JavaScript
  • 問3: 0.1 + 0.2 を小数第2位で丸めて 0.3 にせよ。
const sum = 0.1 + 0.2;
const rounded = Number(sum.toFixed(2));
console.log(rounded); // 0.3
JavaScript
  • 問4: 1000000 を日本向け書式で "1,000,000" にせよ。
console.log((1000000).toLocaleString("ja-JP"));
JavaScript

まとめ

  • Numberは1種類の数値型で、整数・小数・指数表現を扱える。
  • Infinity/NaN に注意し、判定は Number.isFinite と Number.isNaN を使う。
  • 小数誤差 は丸めや許容誤差で対処。安全な整数の上限も理解しておく。
  • 変換・書式化 は Number/parseInt/parseFloat、toFixed/toLocaleString、Math を使い分ける。

この基礎を押さえれば、数値計算や表示のトラブルが激減します。次は「文字列→数値→表示」の往復を練習して、精度や見た目を意識したコードを書いてみましょう。

スポンサーリンク
タイトルとURLをコピーしました