JavaScriptで数値チェックをマスター!7つの方法とサンプルコード

JavaScriptで数値チェックを行うイメージ JS
この記事は約8分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで数値チェックを行う方法がマスターできるようになります。

初心者でも分かりやすいサンプルコード付きで解説し、応用例や注意点、カスタマイズ方法も紹介しています。

数値チェックとは

数値チェックは、入力されたデータが数値であることを確認する処理です。

数値チェックは、フォームの入力値チェックやデータ処理の前提条件として行われることが多く、不正なデータをシステムに入力させないために重要です。

JavaScriptでの数値チェック方法

JavaScriptで数値チェックを行う方法はいくつかあります。

下記に7つの方法とそれぞれのサンプルコードを示します。

○方法1:isNaN()関数を使う

isNaN()関数は、引数がNaN(Not-a-Number)であるかどうかをチェックする関数です。

const value = "123";
const isNumber = !isNaN(value);
console.log(isNumber); // true

○方法2:正規表現を使う

正規表現を使って数値チェックを行う方法です。

const value = "123";
const isNumber = /^\d+$/.test(value);
console.log(isNumber); // true

○方法3:Number()関数を使う

Number()関数を使って数値に変換できるかどうかをチェックします。

const value = "123";
const isNumber = !isNaN(Number(value));
console.log(isNumber); // true

○方法4:parseInt()とparseFloat()を使う

parseInt()やparseFloat()を使って数値に変換できるかどうかをチェックします。

const value = "123";
const isNumber = !isNaN(parseInt(value));
console.log(isNumber); // true

○方法5:typeof演算子を使う

typeof演算子を使って引数の型を調べ、数値であるかどうかをチェックします。

const value = 123;
const isNumber = typeof value === "number";
console.log(isNumber); // true

○方法6:自作関数を作成する

自分で数値チェック用の関数を作成してチェックを行います。

function isNumber(value) {
  return typeof value === "number" && !isNaN(value);
}

const value = 123;
console.log(isNumber(value)); // true

○方法7:ライブラリを利用する

数値チェックを行うライブラリを利用してチェックを行います。

ここでは、lodashライブラリを使用します。

import _ from 'lodash';

const value = "123";
const isNumber = _.isNumber(parseFloat(value));
console.log(isNumber); // true

応用例とサンプルコード

下記にJavaScriptで数値チェックを活用する3つの応用例とそれぞれのサンプルコードを示します。

○応用例1:フォーム入力値のバリデーション

フォームの入力値が数値であることを確認して、エラーメッセージを表示します。

function validateNumberInput(input) {
  if (isNaN(input.value)) {
    input.setCustomValidity('数値を入力してください。');
  } else {
    input.setCustomValidity('');
  }
}

const numberInput = document.getElementById('numberInput');
numberInput.addEventListener('input', () => {
  validateNumberInput(numberInput);
});

○応用例2:ユーザー入力値を元にグラフを描画

ユーザーが入力した数値をもとにグラフを描画します。

function drawGraph(data) {
  // グラフ描画処理
}

const graphData = [10, 20, 30];
if (graphData.every(value => !isNaN(value))) {
  drawGraph(graphData);
} else {
  console.error('数値以外のデータが含まれています。');
}

○応用例3:数値を範囲に応じて処理を振り分ける

入力された数値をもとに、それぞれの範囲に応じて異なる処理を行います。

function processNumber(value) {
  if (!isNaN(value)) {
    if (value < 10) {
      console.log('10未満です。');
    } else if (value < 20) {
      console.log('10以上20未満です。');
    } else {
      console.log('20以上です。');
    }
  } else {
    console.error('数値を入力してください。');
  }
}

const inputValue = 15;
processNumber(inputValue);

注意点と対処法

数値チェックを行う際には、下記の注意点とそれぞれの対処法を理解しておくことが重要です。

○注意点1:文字列と数値の混在

parseInt()やparseFloat()を使用して、文字列を数値に変換しチェックします。

○注意点2浮動小数点数の扱い

parseFloat()を使用して、浮動小数点数をチェックします。

○注意点3:数値が大きすぎる場合

数値の上限や下限を設定し、チェックを行います。

カスタマイズ方法

数値チェックをカスタマイズする方法として、下記の2つのサンプルコードを紹介します。

○数値の範囲指定

入力された数値が指定した範囲内にあるかどうかをチェックします。

function isInRange(value, min, max) {
  return !isNaN(value) && value >= min && value <= max;
}

const inputValue = 15;
const min = 10;
const max = 20;
console.log(isInRange(inputValue, min, max)); // true

○複数の条件を組み合わせる

入力された数値が指定した条件を満たすかどうかをチェックします。

function isValidNumber(value) {
  return !isNaN(value) && value >= 0 && value <= 100 && Number.isInteger(value);
}

const inputValue = 15;
console.log(isValidNumber(inputValue)); // true

○オプションを利用する

数値チェックのオプションを設定し、条件に応じてチェックを行います。

function isNumberWithOptions(value, options) {
  if (isNaN(value)) {
    return false;
  }

  if (options.integer && !Number.isInteger(value)) {
    return false;
  }

  if (options.min !== undefined && value < options.min) {
    return false;
  }

  if (options.max !== undefined && value > options.max) {
    return false;
  }

  return true;
}

const inputValue = 15;
const options = { integer: true, min: 0, max: 100 };
console.log(isNumberWithOptions(inputValue, options)); // true

まとめ

この記事では、JavaScriptで数値チェックを行う方法とその応用例、注意点、カスタマイズ方法を紹介しました。

サンプルコードを参考に、実践的な数値チェックを行えるようになりましょう。

また、注意点や対処法を理解して、より堅牢なコードを実現してください。