JavaScriptのNumber（数値型）完全ガイド｜計算バグやNaNの罠を徹底回避

JavaScriptのNumberは、整数も小数も同じ「数値型」として扱うデータ型です。名前の通り「数値」を表しますが、JavaScriptの数値には初心者がつまずきやすい特徴があります。たとえば、"10"は見た目は数字でも文字列です。また、計算できない値はNaNになり、小数の計算では0.1 + 0.2がぴったり0.3にならないこともあります。

この記事では、Numberの基本、文字列から数値への変換、NaNの判定、BigIntとの違い、実務での注意点まで解説します。

JavaScriptのNumberとは？

Numberとは、JavaScriptで数値を表すデータ型です。

const age = 25;
const price = 1980;
const rate = 0.08;
const temperature = -3;

整数、小数、マイナスの値はすべてNumberとして扱われます。

typeofでNumberか確認する

値の型はtypeofで確認できます。

console.log(typeof 10);      // "number"
console.log(typeof 3.14);    // "number"
console.log(typeof -5);      // "number"

JavaScriptでは、整数用の型と小数用の型が分かれていません。どちらも基本的にはnumberです。

Numberと文字列の数字は別物

初心者がよくつまずくのが、数字に見える文字列です。

const count = 10;
const input = "10";

console.log(typeof count); // "number"
console.log(typeof input); // "string"

10と"10"は見た目が似ていますが、型が違います。

文字列のまま足すと連結になる

const input = "10";
console.log(input + 5); // "105"

+ 演算子は、計算する値に一つでも文字列型（string）が混ざっていると、足し算ではなく「文字列の連結」として動いてしまいます。

実務の罠：HTMLの input タグはすべて「文字列」になる

実務で特に注意が必要なのが、フォームからの入力値です。HTMLで <input type="number"> のように数値専用の入力欄を作ったとしても、JavaScript側でその値（value）を取得すると、裏では必ず文字列（string）型として扱われます。

そのため、画面上でユーザーが数字を入力してくれたからと安心していると、思わぬところで "10" + 5 = "105" というバグを引き起こす原因になります。

対策：計算前に必ず数値へ変換する
フォームから受け取った値を使って計算を行う場合は、以下のように Number() を使って明示的に数値型へ変換する処理を挟みましょう。

// フォームから取得した値（文字列の"10"）
const input = "10";

// 数値に変換してから計算する
const number = Number(input);
console.log(number + 5); // 15（正しく計算される）

文字列をNumberに変換する方法

文字列を数値に変換する方法はいくつかあります。

Number()で全体を数値に変換する

console.log(Number("123"));   // 123
console.log(Number("3.14"));  // 3.14
console.log(Number(""));      // 0
console.log(Number("abc"));   // NaN

Number()は、文字列全体を数値として変換しようとします。数値にできない文字が含まれているとNaNになります。

parseInt()で整数として取り出す

console.log(parseInt("120px", 10)); // 120
console.log(parseInt("3.14", 10));  // 3

parseInt() は、文字列の先頭から整数として読める部分を取り出します。CSSの 120px のような文字列から数値部分だけを抽出したいときに便利です。

重要：第2引数の「10」は省略しない！
parseInt(“120”, 10) の第2引数にある「10」は、「10進数として解析してください」という指定（基数）です。

これを省略すると、古いブラウザや特定の環境において、先頭に「0」がついた数字（例: 010）を「8進数」と誤認してしまい、計算結果が「8」になるような予期せぬバグを生む原因になります。トラブルを防ぎ、常に安全なコードを書くために、parseIntを使うときは必ず「, 10」をつける癖をつけておきましょう。

parseFloat()で小数を取り出す

console.log(parseFloat("3.14"));   // 3.14
console.log(parseFloat("12.5px")); // 12.5

小数を扱う場合はparseFloat()を使います。

方法	特徴	向いている場面
Number()	文字列全体を数値化する	入力値が純粋な数字のとき
parseInt()	整数部分を取り出す	10pxのような値から整数を取りたいとき
parseFloat()	小数を含めて取り出す	3.5や12.5pxを扱うとき

NaNとは？計算できない数値を表す値

NaNは「Not a Number」の略で、数値として扱おうとしたものの計算できなかった結果を表します。

console.log(Number("abc")); // NaN
console.log(10 * "abc");    // NaN

NaNは「数値ではない」という意味に見えますが、JavaScript上ではnumber型に分類されます。

console.log(typeof NaN); // "number"

NaNの判定はNumber.isNaN()を使う

NaNは、自分自身とも等しくありません。

console.log(NaN === NaN); // false

そのため、判定にはNumber.isNaN()を使います。

const result = Number("abc");

if (Number.isNaN(result)) {
  console.log("数値に変換できません");
}

Infinityとは？無限大を表す値

Infinityは、JavaScriptで無限大を表す値です。

console.log(1 / 0);  // Infinity
console.log(-1 / 0); // -Infinity

通常のWeb制作で意図的に使う場面は多くありませんが、割り算や計算ロジックで出ることがあります。

ユーザー入力を使って割り算する場合は、0で割っていないか確認しましょう。

小数計算で起きる誤差に注意

JavaScriptでは、小数計算で誤差が出ることがあります。

console.log(0.1 + 0.2); // 0.30000000000000004

これはJavaScriptだけの問題ではなく、多くのプログラミング言語で起きる浮動小数点数の性質です。

金額計算では整数にして扱う

実務の現場で小数の誤差を避ける最もシンプルな方法は、「一度掛け算して整数にしてから計算し、最後に割り戻す」というアプローチです。

たとえば、ECサイトの税込み計算や、割り引き計算などで誤差を出したくない場合は以下のように記述します。

// 0.1 + 0.2 を誤差なく計算する例（10倍して整数にしてから足し、10で割る）
const result = (0.1 * 10 + 0.2 * 10) / 10;
console.log(result); // 0.3 (正確に表示される)

// 金額計算の例（10%の税込み計算）
const price = 1980;
const taxRate = 10; // 10%

// 100倍して整数にしてから計算し、最後に100で割る
const totalWithTax = (price * (100 + taxRate)) / 100;
console.log(totalWithTax); // 2178

画面表示だけなら toFixed() を使う方法も

もし、内部的な厳密な計算ではなく「単にユーザーの画面に小数点第1位までを綺麗に表示したいだけ」という場合は、数値を四捨五入して文字列に変換する toFixed() メソッドを使うのも手軽で便利です。

const sum = 0.1 + 0.2; // 0.30000000000000004

// 小数点第1位までで四捨五入して文字列にする
console.log(sum.toFixed(1)); // "0.3"

注意：toFixed() の戻り値は「文字列」
toFixed() を実行した後の値は、数値（Number）ではなく文字列（String）型になります。そのため、その後さらに足し算などの計算を続けたい場合は、先述の Number() を使って数値に戻すか、最初に紹介した「整数にしてから計算する」方法を選びましょう。

NumberとBigIntの違い

Numberは多くの数値処理に使えますが、安全に扱える整数の範囲には限界があります。

console.log(Number.MAX_SAFE_INTEGER);
// 9007199254740991

この範囲を超える大きな整数を正確に扱いたい場合は、BigIntを使います。

const id = 9007199254740993n;
console.log(typeof id); // "bigint"

ただし、NumberとBigIntはそのまま混ぜて計算できません。

const count = 10;
const bigCount = 20n;

// console.log(count + bigCount); // TypeError

通常のWeb制作ではNumberで十分な場面が多いですが、巨大なIDや高精度な整数を扱うときはBigIntを検討します。

Numberを使うときの実務チェックリスト

確認項目	よくあるミス	対策
フォーム入力	文字列のまま足し算する	Number()で変換する
数値変換	NaNに気づかない	Number.isNaN()で確認する
割り算	0で割ってInfinityになる	割る前に0チェックをする
小数計算	誤差が出る	丸め処理や整数化を検討する
巨大な整数	安全な整数範囲を超える	BigIntを使う

公式ドキュメントも確認する

Numberの仕様や関連メソッドを正確に確認したい場合は、公式ドキュメントも参考にしてください。

• MDN Web Docs: Number
• MDN Web Docs: Number.isNaN()
• MDN Web Docs: parseInt()

まとめ：NumberはJavaScriptの基本となる数値型

この記事では、JavaScriptのNumberについて解説しました。

Numberは、整数や小数を扱うJavaScriptの基本的な数値型です。

ただし、文字列の数字、NaN、Infinity、小数計算の誤差、安全な整数範囲など、実務でつまずきやすいポイントもあります。

フォーム入力や計算処理を扱うときは、値の型を確認し、必要に応じてNumber()やNumber.isNaN()を使いましょう。