JavaScript数値検証 IsNumeric() 解説

JavaScriptにおける数値検証 - IsNumeric()関数

JavaScriptでは、入力された値が数値であるかどうかを検証する際に、isNaN()関数やNumber.isInteger()関数などを利用することが一般的です。しかし、これらの関数では小数点を含む数値を適切に検出できない場合があります。そこで、小数点を含む数値も正しく検証するために、IsNumeric()関数を実装することが有効です。

IsNumeric()関数の実装例

function IsNumeric(value) {
  // 空白や改行を削除
  value = value.trim();

  // 数値パターンを正規表現で定義
  const numberPattern = /^[-+]?(?:\d+\.\d*|\.\d+|\d+)$/;

  // 正規表現にマッチするかチェック
  return numberPattern.test(value);
}

1. 空白や改行の削除
   入力値から不要な空白や改行を削除します。
2. 数値パターンの定義
   正規表現を使用して、数値の形式を定義します。
   • ^: 始めの文字からマッチさせることを示します。
   • [-+]?: オプションの符号（プラスまたはマイナス）を指定します。
   • (?:\d+\.\d*|\.\d+|\d+): 以下のいずれかのパターンにマッチします。
     • \d+\.\d*: 整数部分と小数部分を含む数値。
     • \.\d+: 小数部分のみの数値。
3. 正規表現にマッチするかチェック
   test()メソッドを使用して、入力値が定義された数値パターンにマッチするかを判定します。マッチすればtrueを、マッチしなければfalseを返します。

const inputValue = "123.45";

if (IsNumeric(inputValue)) {
  console.log("数値です");
} else {
  console.log("数値ではありません");
}

このコードでは、inputValueが数値であるかどうかをIsNumeric()関数で検証し、結果に応じてメッセージを表示します。

注意

• 正規表現は複雑になる場合があるため、可読性や保守性を考慮して適切に設計してください。
• IsNumeric()関数は、基本的な数値の検証には適していますが、より複雑な数値フォーマットや検証条件が必要な場合は、カスタムの検証ロジックを実装する必要があるかもしれません。

function IsNumeric(value) {
  // 空白や改行を削除
  value = value.trim();

  // 数値パターンを正規表現で定義
  const numberPattern = /^[-+]?(?:\d+\.\d*|\.\d+|\d+)$/;

  // 正規表現にマッチするかチェック
  return numberPattern.test(value);
}

const inputValue = "123.45";

if (IsNumeric(inputValue)) {
  console.log("数値です");
} else {
  console.log("数値ではありません");
}

組み込み関数を使用する

• Number.isFinite()関数
  この関数は、引数が有限の数の場合はtrueを返します。無限大やNaNは除外されます。

  function isNumeric(value) {
    return Number.isFinite(parseFloat(value));
  }
  

• isNaN()関数
  この関数は、引数が数値でない場合にtrueを返します。ただし、NaN（Not a Number）の判定に注意が必要です。

  function isNumeric(value) {
    return !isNaN(parseFloat(value));
  }
  

正規表現以外の方法を使用する

• try-catchブロック
  パースを試みてエラーが発生しない場合に数値と判断します。

  function isNumeric(value) {
    try {
      parseFloat(value);
      return true;
    } catch (error) {
      return false;
    }
  }
  

カスタム関数を使用する

• 独自の検証ロジックを実装することも可能です。例えば、数値の範囲や桁数などの条件を指定できます。

選択基準

• 柔軟性
  カスタム関数は特定の要件に合わせて柔軟に設計できます。
• 可読性
  正規表現は複雑になる場合があり、可読性が低下する可能性があります。
• 精度
  isNaN()とNumber.isFinite()はNaNや無限大を考慮しますが、parseFloat()はこれらの値を数値として扱います。
• 性能
  組み込み関数は一般的に高速です。

• 複数の方法を組み合わせて使用することも可能です。
• どの方法を選択するかは、プロジェクトの要件やパフォーマンス要件によって異なります。