カテゴリ: JavaScript 更新日: 2025/11/27

JavaScriptの数値型(Number)の使い方と特徴まとめ

JavaScriptの数値型(Number)の使い方と特徴まとめ
JavaScriptの数値型(Number)の使い方と特徴まとめ

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

生徒

「先生、JavaScriptで数値を扱うときはどんな型が使われるんですか?」

先生

「JavaScriptでは、数値を扱うときは主にNumber型が使われます。整数や小数、どちらも同じ型です。」

生徒

「なるほど。Number型って他にどんな特徴がありますか?」

先生

「詳しく説明しますね。まずは基本的な使い方から見ていきましょう!」

1. Number型とは?

1. Number型とは?
1. Number型とは?

JavaScriptのNumber型は、整数や小数の数値を表すためのデータ型です。プログラミング初心者の方は「数字の箱」とイメージするとわかりやすいです。

例えば、let age = 25;let price = 1980.5; のように使います。


let age = 25;
let price = 1980.5;

どちらもNumber型の値として扱われます。

2. Number型の特徴

2. Number型の特徴
2. Number型の特徴
  • 整数でも小数でも同じNumber型で扱います。
  • 内部では64ビットの浮動小数点数(IEEE 754)という方式で数値を表現しています。
  • とても大きな数やとても小さな数も扱えますが、極端に大きい数は誤差が生じることがあります。
  • 計算で小数点以下の誤差が出やすい特徴があります(後で詳しく説明します)。

3. Number型の使い方の基本

3. Number型の使い方の基本
3. Number型の使い方の基本

基本的な四則演算(足し算・引き算・掛け算・割り算)は、Number型の値に対してそのまま使えます。


let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333333333333335

割り算では小数が出ることもあります。

4. 小数の計算で注意したいこと

4. 小数の計算で注意したいこと
4. 小数の計算で注意したいこと

JavaScriptのNumber型は浮動小数点数という形式で数値を扱うため、計算結果にごく小さな誤差が出ることがあります。例えば、


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

本当は「0.3」なのに、微妙に違う値が出てしまいます。これはコンピュータが二進数(0と1の組み合わせ)で計算するための仕様です。

もし誤差をなくしたい場合は、誤差を考慮した計算方法やライブラリを使うこともありますが、まずはこの性質を知っておくだけで大丈夫です。

5. 特殊な数値の扱い

5. 特殊な数値の扱い
5. 特殊な数値の扱い

JavaScriptのNumber型には、普通の数字のほかに特別な値もあります。

  • Infinity:無限大。例えば、0で割ろうとするとこの値になります。
  • -Infinity:負の無限大。
  • NaN(Not a Number):数字ではない値。計算が成立しないときに出ます。

console.log(1 / 0);    // Infinity
console.log(-1 / 0);   // -Infinity
console.log("文字" / 2); // NaN

プログラムでこれらが出たら、計算エラーや異常な状態があると理解しましょう。

6. 数値の比較

6. 数値の比較
6. 数値の比較

数値同士の比較も簡単にできます。


let x = 5;
let y = 10;

console.log(x > y);  // false
console.log(x < y);  // true
console.log(x === 5); // true

等しいかどうかは===を使うのが一般的です。これは「型も値も同じかどうか」を調べる演算子です。

7. Number型の便利なメソッドと定数

7. Number型の便利なメソッドと定数
7. Number型の便利なメソッドと定数

Number型には便利な定数やメソッドが用意されています。

  • Number.MAX_VALUE:JavaScriptで扱える最大の数。
  • Number.MIN_VALUE:JavaScriptで扱える最小の正の数。
  • Number.isNaN(value):値がNaNかどうかを調べる。
  • Number.isFinite(value):値が有限かどうかを調べる。

console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
console.log(Number.isNaN(NaN));      // true
console.log(Number.isFinite(100));   // true
console.log(Number.isFinite(Infinity)); // false

8. 覚えておきたいポイント

8. 覚えておきたいポイント
8. 覚えておきたいポイント
  • JavaScriptの数値はすべてNumber型で扱う。
  • 整数も小数も同じ型なので、計算がシンプル。
  • 計算時に浮動小数点の誤差が出ることがある。
  • InfinityNaNなどの特殊な値がある。
  • 便利な定数やメソッドで数値を扱いやすくできる。

まとめ

まとめ
まとめ

JavaScriptの数値型であるNumber型は、整数も小数も同じ形式で扱える非常に便利なデータ型です。日常的なプログラミングで必ず登場し、計算、比較、データ処理、画面表示などあらゆる場面で活用されます。ここでは、記事全体を振り返りながら、学んだ知識を整理しつつ、数値を安全かつ正確に扱うために押さえておきたい重要ポイントをより深く解説します。 JavaScriptのNumber型は浮動小数点数方式で処理されるため、小数の計算に誤差が出ることがあります。この誤差はプログラミング初心者がつまずきやすい部分で、たとえば「0.1 + 0.2 = 0.30000000000000004」となるような現象が有名です。また、InfinityNaNといった特殊な値も登場するため、エラーや異常値に気づくための基本的な見方も知る必要があります。 Number型には最大値や最小値、有限判定やNaN判定など多くの便利なプロパティやメソッドが備わっており、演算や検証の際に役立ちます。特にNumber.isNaN()Number.isFinite()は、正しい判定を行うために非常に重要であり、誤った計算や型比較を防ぐ助けとなります。 また、JavaScriptにおける数値の扱いはWebアプリケーションの表示、金額計算、フォーム入力データの検証など、実務的な場面で必須の知識となります。この記事で学んだ基礎を活かし、次に進む際には整数計算、小数処理、丸め関数、フォーマット処理なども理解していくと、より安全で正確なプログラムを作れるようになります。 ここでは最後に、Number型の性質を理解するためのサンプルコードをもう一度まとめとして掲載します。これらの動作を実際に確認することで、より深い理解が得られます。

サンプルプログラムまとめ


// 整数と小数の基本
let price = 1200.5;
let count = 3;
console.log(price * count);

// 小数計算の誤差
console.log(0.1 + 0.2);

// 特殊な値の確認
console.log(1 / 0);        // Infinity
console.log("文字列" / 10); // NaN

// 数値の比較
let x = 5;
let y = 10;
console.log(x < y);
console.log(x === 5);

// Numberの便利メソッド
console.log(Number.isFinite(100));
console.log(Number.isNaN(NaN));
先生と生徒の振り返り会話

生徒

「先生、Number型って整数と小数をひとつの型で扱えるから便利なんですね。でも誤差が出るのはちょっと怖いです…。」

先生

「そうですね。誤差はJavaScript固有の問題ではなく、コンピュータの仕組み上どうしても発生してしまう現象なんです。だから“出るものだ”と知っておけば慌てなくて済みますよ。」

生徒

「なるほど。Infinity や NaN も見たことはあったけど、意味までは理解していませんでした…。」

先生

「それらは計算が異常な状態になったことを教えてくれる大事なサインです。特に NaN は初心者がよく見落とすので、Number.isNaN()で正しく判定できるようにしておくと安心ですよ。」

生徒

「今日の内容でJavaScriptの数値の仕組みがかなりわかってきました!次は金額のフォーマットとか丸め処理も知りたいです!」

先生

「ええ、Number型を理解したあなたならきっとスムーズに学べます。次も一緒に頑張りましょう!」

カテゴリの一覧へ
新着記事
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
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう