【JavaScript】文字列の大文字・小文字変換と入力値の正規化テクニック

2026年1月24日

概要

ユーザーが入力したメールアドレスの照合や、検索キーワードのフィルタリングにおいて、アルファベットの大文字・小文字（”Admin” と “admin” など）を区別せずに扱う「正規化」は必須の処理です。

本記事では、文字列のケース（大文字・小文字）を変換する基本メソッドと、それらを活用した「表記ゆれ」を無視する入力バリデーションの実装方法を解説します。

仕様（入出力）

入力: ユーザー名入力フィールドへのテキスト入力。
出力: 特定の禁止文字列（例: “admin”）が含まれている場合の警告メッセージ。
動作:
- 入力された文字列をリアルタイムで「すべて小文字」に変換して判定を行う。
- 入力値に “Admin”, “ADMIN”, “AdMiN” などが含まれていれば、一律して警告を表示する。

基本の使い方

JavaScriptのStringオブジェクトには、ケース変換を行う以下の標準メソッドが用意されています。元の文字列は変更されず、変換された新しい文字列が返されます。

メソッド名	意味	戻り値	使用例	結果
`toLowerCase()`	全て小文字に変換	文字列	`"TEST".toLowerCase()`	`"test"`
`toUpperCase()`	全て大文字に変換	文字列	`"test".toUpperCase()`	`"TEST"`

const email = "User@Example.com";

// 小文字に統一して比較しやすくする（正規化）
console.log(email.toLowerCase()); // "user@example.com"

コード全文（HTML / JavaScript）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Case Insensitive Validation</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .input-group { margin-bottom: 15px; }
        input[type="text"] { padding: 8px; width: 100%; max-width: 300px; font-size: 16px; }
        .warning-message {
            color: #d32f2f;
            font-weight: bold;
            font-size: 0.9em;
            margin-top: 5px;
            display: none; /* 初期状態は非表示 */
        }
        .warning-message.visible { display: block; }
    </style>
</head>
<body>

    <div class="input-group">
        <label for="usernameInput">ユーザー名登録 (※ "admin" は使用できません)</label><br>
        <input type="text" id="usernameInput" placeholder="ユーザー名を入力...">
        <div id="warningText" class="warning-message">
            警告: "admin" を含むユーザー名は使用できません。
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

JavaScript

/**
 * HTML要素の参照を取得
 */
const nameInput = document.querySelector('#usernameInput');
const warningMessage = document.querySelector('#warningText');

/**
 * 禁止ワードの設定（比較のため小文字で定義）
 */
const FORBIDDEN_KEYWORD = 'admin';

/**
 * 入力値を検証する関数
 */
const validateInput = () => {
    // 1. 入力値を取得
    const rawValue = nameInput.value;

    // 2. 入力値を「小文字」に変換して正規化する
    // これにより "Admin" も "ADMIN" も "admin" として扱われる
    const normalizedValue = rawValue.toLowerCase();

    // 3. 禁止ワードが含まれているか判定
    const hasForbiddenWord = normalizedValue.includes(FORBIDDEN_KEYWORD);

    // 4. 結果に応じて警告の表示/非表示を切り替え
    if (hasForbiddenWord) {
        warningMessage.classList.add('visible');
    } else {
        warningMessage.classList.remove('visible');
    }
};

// 入力イベント（input）でリアルタイムに検証を実行
nameInput.addEventListener('input', validateInput);

カスタムポイント

複数キーワードの対応:禁止ワードを配列（['admin', 'root', 'master']）で持ち、some() メソッドなどを組み合わせてチェックすることで、複数のNGワードに対応可能です。
視覚的なフィードバック:警告メッセージを出すだけでなく、入力欄の枠線を赤くする（input 要素に .error クラスを付与する）などのUI改善が有効です。

注意点

破壊的変更ではない:toLowerCase() などを実行しても、元の変数の中身は変わりません。必ず const lower = str.toLowerCase(); のように戻り値を受け取って使用してください。
ロケールの考慮:トルコ語など一部の言語では、大文字・小文字の変換規則が特殊な場合があります（I の小文字が ı になる等）。多言語対応が厳密に必要なアプリケーションでは toLocaleLowerCase() の使用を検討してください。
全角文字の扱い:これらのメソッドは基本的に半角アルファベットが対象ですが、全角の「Ａ」を「ａ」に変換する機能も多くのブラウザでサポートされています。ただし、厳密な全角・半角変換が必要な場合は専用の変換ロジックが別途必要です。

応用

先頭文字だけを大文字にする（キャピタライズ）

CSSの text-transform: capitalize; と同様の処理をデータとして保存するためにJavaScriptで行う例です。

const capitalize = (str) => {
    if (!str) return '';
    // 先頭1文字を大文字 + 2文字目以降を小文字
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
};

console.log(capitalize("javaSCRIPT")); // "Javascript"

まとめ

ユーザー入力を扱う際、大文字と小文字の揺らぎを吸収する「正規化」は、検索機能やバリデーションにおいて避けて通れない工程です。toLowerCase() や toUpperCase() を適切に使用してデータを統一フォーマットに変換することで、比較ロジックをシンプルに保ち、予期せぬ不一致バグを防ぐ堅牢なアプリケーションを構築できます。

よかったらシェアしてね！