【JavaScript】値を判定しよう！

今回は、JavaScriptで値を判定をする方法を説明していきます。まずは、テキストボックスに値を入力してみてください。

空文字チェック

const input = "　"; // 全角スペースのみ

if (input.trim() !== "") {
  console.log("✅ 数字または文字列が含まれています");
} else {
  console.log("❌ 空白です");
}

trim() は前後の空白（全角・半角）を除去します。上のコードでは "　" は trim() によって "" になるので、false 判定（❌）になります。

文字の長さチェック

const input = 'abcde ';

if (input.trim().length >= 5) {
  console.log("✅ 5文字以上です");
} else {
  console.log("❌ 5文字以下です");
}

文字の長さをチェックするにはlengthを使います。上のコードではスペースをtrim()で除去した後に文字数をカウントしています。判定は（✅）になります。

半角スペース、全角スペースチェック

const input = "abc def";

// 半角スペース || 全角スペース
if (input.includes(" ") || input.includes("　")) {
  console.log("❌ 全角または半角スペースが含まれています");
} else {
  console.log("✅ 全角または半角スペースが含まれていません");
}

includes()関数は「特定の値が含まれているかどうか」調べるときに使います。上のコードでは、半角スペースが含まれており、全角スペースは含まれていません。判定は（❌）になります。

半角文字、全角文字チェック

const input = "abc df 123";

// 半角文字 || 全角文字  
if (/[\x01-\x7E\uFF61-\uFF9F]/.test(input) || 
    /[^\x01-\x7E\uFF61-\uFF9F]/.test(input)) {
  console.log("✅ 半角文字が含まれています");
} else {
  console.log("❌ 半角文字は含まれていません");
}

test()関数は文字列が正規表現にマッチするかどうかを判定する時に使います。上のコードでは、半角文字が含まれているため判定は(✅)になります。

※正規表現の記号については、正規表現の基本記号を確認してください。

数字のみチェック

const input = "123456";

if (/^[0-9]+$/.test(input)) {
  console.log("✅ 入力は数字のみです");
} else {
  console.log("❌ 入力に数字以外が含まれています");
}

上のコードでは、正規表現で先頭から末尾まで全て数字のみかを判定しています。判定は(✅)になります。

カタカナのみチェック

const input = "カタカナ"; 

if (/^[\u30A0-\u30FF]+$/.test(input)) {
  console.log("✅ 入力はすべてカタカナです");
} else {
  console.log("❌ 入力にカタカナ以外の文字が含まれています");
}

上のコードでは、数字のみチェック同様の判定をしています。カタカナのUnicode範囲は \u30A0〜\u30FFで、判定は（✅）になります。

数字チェック(isNaN)

const input = "123";

if (!isNaN(input)) {
  console.log("✅ これは数値です");
} else {
  console.log("❌これは数値ではありません");
}

isNaN関数は引数が 「数値ではない」場合に true を返します。上のコードの判定は

isNaN("abc") → true（数値ではない）

isNaN("123") → false（数値に変換可能）

そのため、!isNaN(value) と書くことで「これは数値か？」という判定に使うことができます。

上のコードの判定は（✅）です。

※値が半角スペースでも全角スペースでもtrueになるので注意が必要です

正規表現の基本記号

サンプルコード

<input type="text" id="textInput" placeholder="文字を入力してください" size="40">
  <br>
  <button onclick="checkString()">判定する</button>

  function checkString() {
  	const input = document.getElementById("textInput").value;
  	const results = document.getElementById("results");
  	results.innerHTML = ""; // リセット

  	// 特定文字の禁止
  	const forbiddenChars = ['@', '#', '$', '`'];
  	const forbiddenPattern = new RegExp("[" + forbiddenChars.join('') + "]");

  	// 判定を追加する関数
  	function addResult(label, isOK) {
  		const div = document.createElement("div");
  		div.textContent = label + " → " + (isOK ? "✅ OK" : "❌ NG");
  		div.className = isOK ? "ok" : "ng";
  		results.appendChild(div);
  	}

  	// 各種判定
  	addResult("空文字チェック", input.trim() !== "");
  	addResult("5文字以上", input.length >= 5);
  	addResult("半角スペースを含む", input.includes(" "));
  	addResult("全角スペースを含む", input.includes("　"));
  	addResult("半角文字を含む", /[\x01-\x7E\uFF61-\uFF9F]/.test(input));
  	addResult("全角文字を含む", /[^\x01-\x7E\uFF61-\uFF9F]/.test(input));
  	addResult("数字のみ", /^[0-9]+$/.test(input));
  	addResult("カタカナのみ", /^[\u30A0-\u30FF]+$/.test(input));
        addResult("数字？（!isNaN）", !isNaN(input));
  	addResult("郵便番号形式（XXX-XXXX）", /^\d{3}-\d{4}$/.test(input));
  	addResult("電話番号形式（XXX-XXXX-XXXX）", /^\d{2,4}-\d{2,4}-\d{4}$/.test(input));
  	addResult("メールアドレス形式", /^[\w\.-]+@[\w\.-]+\.\w+$/.test(input));
  	addResult("特定記号（@, #, $, `, %）を含まない", !forbiddenPattern.test(input));
  }

  // 初回表示時にも判定を実行
  window.addEventListener("DOMContentLoaded", checkString);

まとめ

いかがでしたか？サンプルコードを使って動きを確認してみてください！