JavaScriptで正と負の無限大(Infinity)の値を出力する方法
JavaScriptで扱える数値には上限があり、その範囲を超えた演算結果は特別な値「Infinity」(正の無限大)または「-Infinity」(負の無限大)として出力されます。この記事では、実際に正と負の無限大の値を画面に出力するサンプルコードを紹介します。
JavaScriptにおける無限大(Infinity)とは
JavaScriptの数値型はIEEE 754で定められた倍精度浮動小数点数で、表現できる最大値は Number.MAX_VALUE(約1.79×10308)です。演算結果がこの最大値を超えると、エラーにはならずグローバルプロパティの Infinity が返されます。
- 正の方向で最大値を超える →
Infinity - 負の方向で下限を超える →
-Infinity - 0による除算(例:
1 / 0)→Infinityまたは-Infinity
正と負の無限大を出力するサンプルコード
以下のコードでは、最大値を大きく超える浮動小数点数を画面に表示し、ボタンをクリックするとそれぞれ「+1」「-1」の演算を行って無限大への変化を確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.num {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScriptのInfinityプロパティ</h1>
<div class="num">1.797693134862315E+10308</div>
<div class="num">-1.797693134862315E+10308</div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、表示中の数値に対してそれぞれ +1 / -1 の演算が行われます</h3>
<script>
let num1 = document.querySelectorAll(".num")[0];
let num2 = document.querySelectorAll(".num")[1];
document.querySelector(".Btn").addEventListener("click", () => {
num1.innerHTML = +num1.innerHTML + 1;
num2.innerHTML = +num2.innerHTML - 1;
});
</script>
</body>
</html>
実行結果
上記コードをブラウザで開くと、まず次のように2つの大きな数値が表示されます。

続いて「CLICK HERE」ボタンをクリックすると、1つ目の数値に1を加算した結果は最大値を超えるため Infinity となり、2つ目の数値から1を減算した結果は -Infinity として表示されます。

補足:Infinityを直接取得・判定する方法
大きな数値の演算を経由しなくても、次のようにして直接無限大の値を得ることができます。
console.log(Number.POSITIVE_INFINITY); // Infinity console.log(Number.NEGATIVE_INFINITY); // -Infinity console.log(1 / 0); // Infinity console.log(-1 / 0); // -Infinity
また、値が有限数かどうかを判定したい場合は Number.isFinite() が便利です。Infinity・-Infinity・NaN に対しては false を返し、通常の数値に対しては true を返します。
-
JavaScriptでページを印刷するにはどうすればよいですか?
JavaScriptでページを印刷するには、print()メソッドを使用します。このメソッドを呼び出すと、ブラウザの標準的な印刷ダイアログボックスが開き、どのプリンターを使用するか、部数はいくつにするかといった印刷オプションを簡単に設定できます。以下は、実際に印刷ダイアログが表示された様子の例です。サンプルコード次のコードを実行すると、ボタンをクリックするだけでページを印刷できる動作を確認できます。<!DOCTYPE html> <html> <body> &nb
-
JavaScriptでドキュメントの読み込み状態(readyState)を確認する方法
JavaScriptでドキュメント(ページ)の読み込みが完了しているかどうかを確認するには、document.readyStateプロパティを使用します。このプロパティは、現在のドキュメントの読み込み状況に応じて以下の3つの文字列を返します。loading … ドキュメントがまだ読み込み中の状態interactive … ドキュメントの解析は完了したが、画像などのサブリソースは still 読み込み中の状態complete … ドキュメントとすべてのサブリソースの読み込みが完了した状態以下は、ボタンをクリックしたタイミングでdocument.readyStateの値を判定し、ページの読み込み状