はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptを使ってWebフォームの入力チェック（バリデーション）を実装しようとしている方、特にエラー表示の柔軟性を高めたいWeb開発初学者や中級者を対象としています。単一のエラーメッセージだけでなく、複数の種類のエラーを同時にユーザーに伝えたい場合に役立つ情報を提供します。

この記事を読むことで、HTML要素に複数のCSSクラスを効率的に追加・削除する方法、特にJavaScriptのclassListプロパティの基本的な使い方と、それをフォームエラー表示にどう応用できるかが具体的にわかります。結果として、よりユーザーフレンドリーで、保守しやすいフォームエラー表示を実装できるようになります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 * HTML/CSSの基本的な知識（要素、セレクタ、プロパティなど） * JavaScriptのDOM操作の基本的な知識（要素の取得、イベントリスナーなど）

フォームエラー表示におけるCSSクラスの役割と複数のクラスが必要な背景

Webアプリケーションにおけるフォームバリデーションは、ユーザー体験とデータ品質の両面で非常に重要です。ユーザーが誤った情報を入力した際、適切なフィードバックを提供することで、入力ミスを減らし、スムーズな利用を促すことができます。このフィードバックの一つが、エラー表示です。

一般的に、フォームのエラー表示にはCSSクラスが用いられます。例えば、入力フィールドが空だった場合にそのフィールドにerrorというクラスを追加し、CSSで赤枠やエラーメッセージを表示するといった手法がよく使われます。

Html

<input type="text" id="username" class="error">
<p class="error-message">ユーザー名は必須です。</p>

Css

.error {
    border: 1px solid red;
    background-color: #ffeaea;
}
.error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
}

しかし、エラーの種類が複数ある場合、単一のerrorクラスだけでは表現しきれないことがあります。例えば、以下のようなケースです。

  • 必須項目エラー: 「このフィールドは必須です」
  • フォーマットエラー: 「メールアドレスの形式が不正です」
  • 文字数制限エラー: 「8文字以上で入力してください」
  • 重複エラー: 「このユーザー名はすでに使用されています」

これらのエラーを、それぞれ異なるスタイルやメッセージで表示したい場合、単一のerrorクラスでは不十分になります。例えば、必須項目エラーは赤色の太字、フォーマットエラーは注意喚起の黄色、といった具合に視覚的に区別したいケースです。ここで、一つの要素に複数のCSSクラスを適用するという考え方が役立ちます。

例えば、ユーザー名が必須かつ8文字以下の両方の条件を満たさない場合、以下のように複数のエラークラスを適用できれば、より細やかな表示制御が可能になります。

Html

<input type="text" id="username" class="error error-required error-length-invalid">
<p class="error-message error-message-required">ユーザー名は必須です。</p>
<p class="error-message error-message-length">ユーザー名は8文字以上で入力してください。</p>

このように複数のクラスを適用することで、共通のエラー表示ルール（例: errorクラス）を適用しつつ、特定のエラーにのみ適用されるスタイル（例: error-required）を組み合わせることが可能になります。

JavaScriptでHTML要素に複数のCSSクラスを適用する具体的な方法

HTML要素に複数のCSSクラスを適用する方法はいくつかありますが、JavaScriptのclassListプロパティを使用するのが最も推奨される現代的な方法です。ここではその具体的な使い方を解説し、非推奨のclassNameプロパティについても触れます。

classListプロパティの基本

classListプロパティは、要素のクラス属性へのアクセスを提供する便利なメソッド群です。これを使えば、既存のクラスを上書きすることなく、安全かつ直感的にクラスの追加、削除、切り替え、確認を行うことができます。

element.classList.add(class1, class2, ...): クラスの追加

指定したクラスを要素に追加します。複数のクラスをカンマ区切りで同時に追加することも可能です。

Javascript

const myElement = document.getElementById('myElement');

// 単一のクラスを追加
myElement.classList.add('active'); // <div id="myElement" class="active"></div>

// 複数のクラスを同時に追加
myElement.classList.add('highlight', 'border-red'); // <div id="myElement" class="active highlight border-red"></div>

element.classList.remove(class1, class2, ...): クラスの削除

指定したクラスを要素から削除します。add()と同様に、複数のクラスを同時に削除できます。

Javascript

myElement.classList.remove('active'); // <div id="myElement" class="highlight border-red"></div>
myElement.classList.remove('highlight', 'border-red'); // <div id="myElement" class=""></div>

element.classList.toggle(class, force): クラスの切り替え

指定したクラスが存在すれば削除し、存在しなければ追加します。2番目の引数forceをtrueにすると強制的に追加、falseにすると強制的に削除します。

Javascript

myElement.classList.toggle('active'); // activeクラスがなければ追加、あれば削除
myElement.classList.toggle('active', true); // activeクラスを強制的に追加
myElement.classList.toggle('active', false); // activeクラスを強制的に削除

element.classList.contains(class): クラスの有無を確認

指定したクラスが要素に存在するかどうかをtrue/falseで返します。

Javascript

myElement.classList.add('error');
console.log(myElement.classList.contains('error')); // true
console.log(myElement.classList.contains('active')); // false

フォームエラーに複数のクラスを適用する実践例

ここでは、classListプロパティを使って、フォームの入力フィールドに複数のエラークラスを動的に適用する具体的な例を示します。

まず、HTMLとCSSを準備します。

Html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フォームバリデーションと複数クラス</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="form-container">
        <h1>ユーザー登録</h1>
        <form id="registrationForm">
            <div class="form-group">
                <label for="username">ユーザー名:</label>
                <input type="text" id="username" name="username">
                <p id="usernameError" class="error-message"></p>
            </div>

            <div class="form-group">
                <label for="email">メールアドレス:</label>
                <input type="text" id="email" name="email">
                <p id="emailError" class="error-message"></p>
            </div>

            <button type="submit">登録</button>
        </form>
    </div>

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

Css

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.form-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"] {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

/* 共通のエラー表示スタイル */
.input-error {
    border-color: red;
    background-color: #ffeaea;
}

.error-message {
    color: red;
    font-size: 0.85em;
    margin-top: 5px;
    height: 1.2em; /* エラーメッセージがないときに要素が崩れないように */
    visibility: hidden; /* デフォルトでは非表示 */
}

/* 特定のエラーメッセージの種類に応じた表示 */
.error-message.show {
    visibility: visible;
}

/* エラーの種類に応じたスタイル（例） */
.error-input-required {
    /* 必須エラー時の追加スタイル */
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
}

.error-input-format {
    /* フォーマットエラー時の追加スタイル */
    border-width: 2px;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    width: 100%;
}

button:hover {
    background-color: #0056b3;
}

次にJavaScriptでバリデーションロジックを実装します。

Javascript

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const registrationForm = document.getElementById('registrationForm');
    const usernameInput = document.getElementById('username');
    const emailInput = document.getElementById('email');
    const usernameError = document.getElementById('usernameError');
    const emailError = document.getElementById('emailError');

    // エラーメッセージを表示・非表示にするヘルパー関数
    function showError(inputElement, errorElement, message, errorTypeClasses = []) {
        inputElement.classList.add('input-error'); // 共通のエラークラス
        inputElement.classList.add(...errorTypeClasses.map(type => `error-input-${type}`)); // 型に応じたクラス

        errorElement.textContent = message;
        errorElement.classList.add('show');
    }

    function clearError(inputElement, errorElement) {
        inputElement.classList.remove('input-error', 'error-input-required', 'error-input-format'); // すべてのエラークラスを削除
        errorElement.textContent = '';
        errorElement.classList.remove('show');
    }

    // バリデーション関数
    function validateInput(inputElement, errorElement) {
        let isValid = true;
        let errorMessage = '';
        let errorClasses = [];

        clearError(inputElement, errorElement); // 一度全てのエラーをクリア

        // 必須チェック
        if (inputElement.value.trim() === '') {
            errorMessage += `${inputElement.previousElementSibling.textContent.replace(':', '')}は必須です。\n`;
            errorClasses.push('required');
            isValid = false;
        }

        // メールアドレス形式チェック (emailInputのみ)
        if (inputElement.id === 'email') {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (inputElement.value.trim() !== '' && !emailRegex.test(inputElement.value)) {
                errorMessage += 'メールアドレスの形式が不正です。\n';
                errorClasses.push('format');
                isValid = false;
            }
        }

        // エラーがあれば表示
        if (!isValid) {
            showError(inputElement, errorElement, errorMessage.trim(), errorClasses);
        }

        return isValid;
    }

    // フォーム送信時のバリデーション
    registrationForm.addEventListener('submit', (event) => {
        event.preventDefault(); // デフォルトの送信を防止

        const isUsernameValid = validateInput(usernameInput, usernameError);
        const isEmailValid = validateInput(emailInput, emailError);

        if (isUsernameValid && isEmailValid) {
            alert('フォームが正常に送信されました！');
            // ここでフォームデータをサーバーに送信するなどの処理
            registrationForm.reset(); // フォームをリセット
        } else {
            console.log('入力エラーがあります。');
        }
    });

    // 入力時にリアルタイムでエラーをクリア
    usernameInput.addEventListener('input', () => {
        clearError(usernameInput, usernameError);
    });
    emailInput.addEventListener('input', () => {
        clearError(emailInput, emailError);
    });

    // フォーカスが外れた時にバリデーション
    usernameInput.addEventListener('blur', () => {
        validateInput(usernameInput, usernameError);
    });
    emailInput.addEventListener('blur', () => {
        validateInput(emailInput, emailError);
    });
});

この例では、showError関数内でinputElement.classList.add(...errorTypeClasses.map(type => 'error-input-${type}'));のようにスプレッド構文とmapを使って、複数のエラータイプに応じたクラスをまとめて追加しています。clearError関数では、考えられる全てのエラークラスをremove()メソッドに渡して一括で削除しています。

動作確認

  1. ユーザー名を空のまま送信すると、username入力欄にはinput-errorとerror-input-requiredの2つのクラスが適用されます。
  2. メールアドレスを空のまま送信すると、email入力欄にはinput-errorとerror-input-requiredが適用されます。
  3. メールアドレスに「abc」のような不正な形式を入力して送信すると、input-errorとerror-input-formatが適用されます。
  4. メールアドレスを空のままにして、さらに不正な形式の文字を入れた場合（このコードでは必須チェックが優先されますが、ロジックを工夫すれば両方のエラーを出すことも可能です。例ではメッセージを連結しています）。

このように、classList.add()に複数の引数を渡すことで、一つのDOM操作で複数のクラスを追加することが可能です。これにより、CSSでよりきめ細やかなエラー表示を実装できます。

classNameプロパティとの比較と注意点

classListプロパティが登場する以前は、classNameプロパティを使って要素のクラスを操作するのが一般的でした。

Javascript

const myElement = document.getElementById('myElement');

// クラスを追加する場合 (既存のクラスを考慮する必要がある)
myElement.className += ' new-class'; // スペース区切りで追加

// クラスを削除する場合 (文字列操作が複雑になる)
myElement.className = myElement.className.replace('old-class', '').trim();

// クラスを上書きする場合
myElement.className = 'another-class'; // これが最も危険。既存のクラスが全て消える

classNameは要素のclass属性の文字列全体を操作するため、以下の問題点があります。

  • 既存のクラスを上書きしてしまうリスク: 誤ってmyElement.className = 'error';としてしまうと、元々あったクラス（例: activeやhighlightなど）がすべて消えてしまい、意図しないスタイル崩壊を引き起こす可能性があります。
  • 複数のクラス操作が複雑: 複数のクラスを追加・削除するには、文字列の連結や正規表現を使った置換など、煩雑な文字列操作が必要になります。特に、スペースの扱いを誤ると不具合の原因になります。
  • 可読性の低下: コードが読みにくくなり、デバッグも困難になります。

これらの理由から、現在ではclassListプロパティを使用することが強く推奨されています。classListは、クラスのリストをオブジェクトとして扱い、それぞれのクラスを個別に操作できるため、安全で直感的、かつ効率的なクラス操作が可能です。

ハマった点やエラー解決

フォームバリデーションで複数のクラスを扱う際に、よく遭遇する問題とその解決策について説明します。

  1. 既存のクラスが消えてしまう:

    • 現象: エラークラスを追加した途端、要素に元々あったはずのスタイル（例：ボタンの基本スタイル）が消えてしまう。
    • 原因: element.className = 'error';のようにclassNameプロパティを直接上書きしてしまっている。
    • 解決策: 必ずelement.classList.add('error');のようにclassListプロパティのメソッドを使用する。既存のクラスを保持しつつ、新しいクラスを追加できる。

  2. 特定のCSSルールが適用されない、あるいは意図しないスタイルになる:

    • 現象: JavaScriptでクラスは追加されているが、期待するスタイルが適用されない、または別のスタイルが適用される。
    • 原因:
      • CSSのセレクタの特異度（specificity）の問題：より特異度の高いセレクタが優先されている。
      • CSSの記述順序：後から読み込まれたスタイルが前のスタイルを上書きしている。
      • クラス名のスペルミス：JavaScriptで追加したクラス名とCSSで定義したクラス名が一致していない。
    • 解決策:
      • ブラウザの開発者ツール（ElementsタブとStylesタブ）を使って、要素に適用されているCSSルールを確認する。どのセレクタが優先されているか、なぜそのスタイルが適用されているかを確認できる。
      • 必要に応じてCSSセレクタの特異度を調整する（例: より具体的なセレクタにする、!importantは避ける）。
      • クラス名のスペルを確認する。

  3. エラーが解消された後も、エラー表示が消えない:

    • 現象: ユーザーが正しい値を入力し直したのに、入力フィールドの赤枠やエラーメッセージが残り続ける。
    • 原因: エラーが解消された際に、JavaScriptで追加したエラークラスを削除する処理を忘れている。
    • 解決策: バリデーションが成功した場合、または入力内容が変更された（inputイベントなど）際に、対応するエラークラス（input-error, error-input-requiredなど）とエラーメッセージの表示クラス（showなど）を確実に削除するロジックを追加する。clearError関数のようなものを準備し、適切なタイミングで呼び出すのが効果的です。

これらの問題は、開発者ツールを活用し、CSSの適用状況やJavaScriptによるDOM操作の結果を常に確認しながらデバッグすることで、迅速に解決できます。

まとめ

本記事では、JavaScriptでWebフォームの入力エラーを表示する際に、HTML要素に複数のCSSクラスを適用する方法について解説しました。

  • フォームエラー表示の重要性: ユーザー体験向上のために、入力ミスに対して明確かつ具体的なフィードバックを提供することが不可欠です。
  • 複数のCSSクラスのメリット: 必須、フォーマット、文字数など、エラーの種類に応じて異なるスタイルやメッセージを柔軟に表示できるため、よりきめ細やかなUIを実現できます。
  • classListプロパティの活用: JavaScriptのclassList.add(), classList.remove(), classList.toggle()などのメソッドを使用することで、既存のクラスを上書きすることなく、安全かつ効率的に複数のクラスを追加・削除できます。非推奨のclassNameプロパティと比較し、その優位性を示しました。

この記事を通して、読者の皆さんが柔軟で保守しやすいフォームエラー表示を実装できるようになり、Webアプリケーションの品質向上に貢献できれば幸いです。

今後は、より高度なバリデーションライブラリの利用方法や、ユーザー体験を最大化するためのエラーメッセージのUX/UI設計についても記事にする予定です。

参考資料