はじめに
この記事を読めば、JavaScriptで数値チェックを行う方法がマスターできるようになります。
初心者でも分かりやすいサンプルコード付きで解説し、応用例や注意点、カスタマイズ方法も紹介しています。
数値チェックとは
数値チェックは、入力されたデータが数値であることを確認する処理です。
数値チェックは、フォームの入力値チェックやデータ処理の前提条件として行われることが多く、不正なデータをシステムに入力させないために重要です。
JavaScriptでの数値チェック方法
JavaScriptで数値チェックを行う方法はいくつかあります。
下記に７つの方法とそれぞれのサンプルコードを示します。
○方法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で数値チェックを行う方法とその応用例、注意点、カスタマイズ方法を紹介しました。
サンプルコードを参考に、実践的な数値チェックを行えるようになりましょう。
また、注意点や対処法を理解して、より堅牢なコードを実現してください。
