【初心者向け】TypeScriptの「isNaN」関数：サンプルコードで理解を深める

TypeScriptにおける isNaN 関数の型制約と注意点

TypeScriptにおける isNaN 関数は、数値型以外の値を受け付けないという制約があります。これは、isNaN 関数が数値型であることを前提に内部処理を行うためです。この制約は、予期しない動作や型エラーを引き起こす可能性があるため、注意が必要です。

isNaN 関数の型制約

isNaN 関数は、以下の型シグネチャを持ちます。

function isNaN(number: number): boolean;

この型シグネチャから分かるように、isNaN 関数は number 型の引数のみを受け付けます。つまり、文字列型、boolean 型、null 型などの値を渡すと、型エラーが発生します。

isNaN 関数は、引数として渡された値が NaN (Not a Number) であるかどうかを判定します。NaN は、数値演算のエラーを表す特殊な値です。

isNaN 関数を使用する際の注意点

isNaN 関数を使用する際には、以下の点に注意する必要があります。

• 数値かどうかを判定したい場合は、typeof 演算子を使用する。
• isNaN 関数は NaN であるかどうかのみを判定し、数値かどうかを判定するわけではないことに注意する。
• 引数が数値型であることを確認する。

代替手段

isNaN 関数を使用する代わりに、以下の方法で数値かどうかを判定することができます。

• Number.isNaN() 関数を使用する (TypeScript 2.4 以降)
• typeof 演算子を使用する

// typeof 演算子を使用する
function isNumber(value: any): boolean {
  return typeof value === 'number';
}

// Number.isNaN() 関数を使用する
function isNumber2(value: any): boolean {
  return Number.isNaN(value);
}

function isNumberUsingIsNaN(value: any): boolean {
  return isNaN(value);
}

console.log(isNumberUsingIsNaN(123)); // true
console.log(isNumberUsingIsNaN('abc')); // false
console.log(isNumberUsingIsNaN(NaN)); // true

例2：typeof 演算子を使用した数値判定

function isNumberUsingTypeof(value: any): boolean {
  return typeof value === 'number';
}

console.log(isNumberUsingTypeof(123)); // true
console.log(isNumberUsingTypeof('abc')); // false
console.log(isNumberUsingTypeof(NaN)); // false

function isNumberUsingNumberIsNaN(value: any): boolean {
  return Number.isNaN(value);
}

console.log(isNumberUsingNumberIsNaN(123)); // false
console.log(isNumberUsingNumberIsNaN('abc')); // true
console.log(isNumberUsingNumberIsNaN(NaN)); // true

• 例3では、Number.isNaN() 関数を使用して数値かどうかを判定しています。この関数は、TypeScript 2.4以降で導入されたものであり、isNaN 関数よりも精度が高いという特徴があります。
• 例2では、typeof 演算子を使用して、値の型が numberかどうかを判定しています。この方法は、NaN を除いた数値を判定するのに適しています。
• 例1では、isNaN 関数を使用して数値かどうかを判定しています。しかし、NaN 自体が数値であるため、true と判定されてしまいます。

注意事項

• TypeScriptのバージョンによって、Number.isNaN() 関数が利用できない場合があります。
• 上記のコードはあくまで例であり、実際の用途に合わせて適宜修正する必要があります。

最もシンプルな方法は、typeof 演算子を使用して値の型が 'number' かどうかを判定する方法です。

function isNumberUsingTypeof(value) {
  return typeof value === 'number';
}

console.log(isNumberUsingTypeof(123)); // true
console.log(isNumberUsingTypeof('abc')); // false
console.log(isNumberUsingTypeof(NaN)); // false

利点

• 軽量で処理速度が速い
• シンプルで分かりやすい

注意点

• 型変換の影響を受けやすい。例えば、文字列の "123" を数値に変換すると true と判定されてしまいます。
• NaN 自体は数値型ではないため、この方法では false と判定されてしまいます。

Number.isNaN() 関数

Number.isNaN() 関数は、ES6 で導入された新しい関数で、isNaN 関数よりも精度が高い点が特徴です。NaN も含めて、数値かどうかを正確に判定することができます。

function isNumberUsingNumberIsNaN(value) {
  return Number.isNaN(value);
}

console.log(isNumberUsingNumberIsNaN(123)); // false
console.log(isNumberUsingNumberIsNaN('abc')); // true
console.log(isNumberUsingNumberIsNaN(NaN)); // true

• 型変換の影響を受けにくい
• NaN も含めて、数値かどうかを正確に判定できる

• ES6 以降の環境でのみ利用可能

有限性チェック

isFinite() 関数は、引数が有限な数かどうかを判定する関数です。有限な数とは、Infinity や -Infinity を除いたすべての数値を指します。この関数を用いることで、NaN を除いた数値かどうかを判定することができます。

function isNumberUsingIsFinite(value) {
  return isFinite(value) && !isNaN(value);
}

console.log(isNumberUsingIsFinite(123)); // true
console.log(isNumberUsingIsFinite('abc')); // false
console.log(isNumberUsingIsFinite(NaN)); // false
console.log(isNumberUsingIsFinite(Infinity)); // false

• NaN と Infinity 、-Infinity を除いた数値を判定できる

• 判定対象が整数のみの場合は Number.isInteger() 関数の方が効率的

オブジェクトとの比較

JavaScript では、すべての数値は Number オブジェクトのプロパティとして存在します。そのため、オブジェクトとの比較を利用することで、NaN を含めた数値かどうかを判定することができます。

function isNumberUsingObjectComparison(value) {
  return typeof value === 'number' || value instanceof Number;
}

console.log(isNumberUsingObjectComparison(123)); // true
console.log(isNumberUsingObjectComparison('abc')); // false
console.log(isNumberUsingObjectComparison(NaN)); // true
console.log(isNumberUsingObjectComparison(Infinity)); // true

正規表現

正規表現を使用して、数値形式の文字列かどうかを判定する方法もあります。ただし、正規表現は複雑で処理速度が遅いため、他の方法に比べて効率が悪くなります。

function isNumberUsingRegExp(value) {
  return /^-?\d+(\.\d+)?$/.test(value);
}

console.log(isNumberUsingRegExp(123)); // true
console.log(isNumberUsingRegExp('abc')); // false
console.log(isNumberUsingRegExp(NaN)); // false
console.log(isNumberUsingRegExp('123.45')); // true

• 小数点を含む数値も判定できる

• エッジケースに対する網羅性が難しい
• 正規表現は複雑で処理速度が遅い

それぞれの方法には、利点と注意点があります。状況に合わせて適切な方法を選択することが重要です。

• [JavaScriptで値が数値かどうかチェックする