JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでNaNとInfinityを扱う方法｜実例コード付きでわかりやすく解説

JavaScriptにおけるNaNとInfinityとは

JavaScriptでは、数値計算の結果として特殊な値が返されることがあります。その代表が NaN（Not a Number） と Infinity（無限大） です。

NaN は「数値ではない」という意味を持つ特殊な値で、数値への変換に失敗した場合などに返されます。Infinity は無限大を表す値で、たとえばゼロによる除算の結果として得られます。

以下は、JavaScriptでNaNとInfinityを実装・確認するためのコード例です。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<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;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>NaN and Infinity in JavaScript</h1>
<div style="color: green;" class="result"></div>
<button class="btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、NaNとInfinityの例を確認できます
</h3>
<script>
    let btnEle = document.querySelector(".btn");
    let resEle = document.querySelector(".result");
    btnEle.addEventListener("click", () => {
        resEle.innerHTML = "9/0 = " + 9 / 0 + "<br>";
        resEle.innerHTML += 'Number("AJKL") = ' + Number("AJKL") + "<br>";
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptでNaNとInfinityを扱う方法｜実例コード付きでわかりやすく解説

「CLICK HERE」ボタンをクリックすると、以下のように計算結果が出力されます。

JavaScriptでNaNとInfinityを扱う方法｜実例コード付きでわかりやすく解説

コードの解説

このサンプルでは、ボタンがクリックされると次の2つの処理が実行されます。

  • 9 / 0：数値をゼロで割ると、結果は Infinity（無限大）になります。
  • Number("AJKL")：文字列「AJKL」は数値に変換できないため、結果は NaN となります。

補足：NaNとInfinityの判定方法

実務では、これらの特殊な値を適切に判定することが重要です。

  • NaN の判定には Number.isNaN() を使用します。なお、NaN === NaN は false になるため、比較演算子での判定はできません。
  • Infinity の判定には Number.isFinite() が便利です。有限の数値の場合のみ true を返します。

このように、NaNとInfinityはJavaScriptの数値操作において頻繁に登場する概念なので、挙動を正しく理解しておきましょう。

  1. ボタンクリックをトリガーに、JavaScript（jQuery）でフォーム送信時にアラートを表示する方法

    Webフォームを作成する際、「送信ボタンが押されたことをユーザーに知らせたい」という場面はよくあります。本記事では、jQueryのclick()メソッドを使って、ボタンクリックをトリガーにフォーム送信時のアラートを表示する方法を、具体的なコード例とともにわかりやすく解説します。 1. 送信ボタンのHTMLを用意する まずは、クリックイベントを設定する対象となるボタンを用意します。ここでは、id属性に「submitForm」を指定したシンプルな送信ボタンを使用します。 <button id="submitForm">Submit</button> この

  2. JavaScriptでボタンクリック時に名前を追加・削除する方法をわかりやすく解説

    要素を新しく作成するには add() メソッドを使用し、作成・追加済みの要素を削除するには remove() メソッドを使用します。本記事では、テキストボックスに入力した名前をボタンクリックでリストに追加し、各項目の「Remove Name」ボタンで削除できるシンプルなアプリを例に、その実装方法を解説します。 実装例（サンプルコード） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view