JavaScriptで要素の表示非表示を制御する方法：クラスの追加と削除

Posted on by

ウェブ開発において、ユーザーインターフェース（UI）の動的な制御は非常に重要です。特に、ユーザーのアクションに応じてコンテンツを表示したり非表示にしたりすることは、ユーザーエクスペリエンスを向上させるための基本的なテクニックです。本記事では、JavaScriptを用いて特定の条件に基づいて要素の表示非表示を制御する方法について、具体的な例を交えて詳しく解説します。

基本的な概念

まず、要素の表示非表示を制御するための基本的な方法について説明します。CSS（Cascading Style Sheets）を使って、要素の表示状態を制御することができます。最も一般的な方法は、displayプロパティを使うことです。このプロパティには、要素の表示状態を決定するいくつかの値があります。

  • block: 要素をブロック要素として表示します。
  • none: 要素を表示しません（非表示）。
  • inline: 要素をインライン要素として表示します。

JavaScriptによる表示非表示の制御

JavaScriptを使って要素の表示非表示を制御するには、対象の要素のstyleプロパティにアクセスし、displayプロパティの値を変更します。例えば、以下のようにすることができます。

document.getElementById('myElement').style.display = 'none'; // 要素を非表示にする
document.getElementById('myElement').style.display = 'block'; // 要素を表示する

クラスの追加と削除による制御

上記の方法も有効ですが、より柔軟な方法として、クラスの追加と削除を使うことができます。これにより、CSSであらかじめ定義したスタイルを適用することができ、コードの再利用性が向上します。

CSSでスタイルを定義する

まず、CSSで表示非表示のスタイルを定義します。例えば、以下のようにします。

.hidden {
    display: none;
}

.visible {
    display: block;
}

JavaScriptでクラスを追加または削除する

次に、JavaScriptでクラスを追加または削除するコードを書きます。以下のように、classListプロパティを使ってクラスを操作することができます。

var element = document.getElementById('myElement');

element.classList.add('visible'); // クラスを追加して表示
element.classList.remove('hidden'); // クラスを削除して表示

element.classList.add('hidden'); // クラスを追加して非表示
element.classList.remove('visible'); // クラスを削除して非表示

実際の例：特定のテキストに基づく表示非表示の制御

具体的な例として、特定のテキストコンテンツに基づいて要素の表示非表示を制御する方法を紹介します。この例では、ユーザーの選択に応じてコンテンツを表示または非表示にします。

HTML構造

まず、HTML構造を定義します。以下の例では、ユーザーが選択したオプションに応じてコンテンツを表示または非表示にします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クラスの追加削除</title>
    <style>
        .visible {
            display: block;
        }
        .hidden {
            display: none;
        }
        #contact_method_wrapper {
            display: none; /* 初期状態では非表示 */
        }
    </style>
</head>
<body>
    <div id="contact_method_wrapper01">ご住所に郵送</div>
    <!-- <div id="contact_method_wrapper01">メールで受け取る</div> -->
    <div id="contact_method_wrapper">
        <p>これは表示されるべきコンテンツです。</p>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var contactMethod = document.getElementById("contact_method_wrapper01").textContent;
            var wrapper = document.getElementById("contact_method_wrapper");
            if (contactMethod === "ご住所に郵送") {
                wrapper.classList.add("visible");
                wrapper.classList.remove("hidden");
            } else if (contactMethod === "メールで受け取る") {
                wrapper.classList.remove("visible");
                wrapper.classList.add("hidden");
            } else {
                wrapper.classList.remove("visible");
                wrapper.classList.add("hidden");
            }
        });
    </script>
</body>
</html>

詳細な解説

このコードでは、以下の手順で要素の表示非表示を制御しています。

  1. HTMLの構造: HTMLには、テキストコンテンツを含む要素と表示非表示を制御する要素が含まれています。初期状態では、#contact_method_wrapperは非表示に設定されています。
  2. CSSスタイル: .visibleと.hiddenクラスを定義し、それぞれ表示状態を制御します。
  3. JavaScriptの実装: ページが読み込まれたときに実行されるスクリプトが含まれています。DOMContentLoadedイベントリスナーを使って、ページが完全に読み込まれたときにスクリプトが実行されるようにしています。
  4. 条件に基づくクラスの追加と削除: #contact_method_wrapper01のテキストコンテンツを取得し、その内容に応じて#contact_method_wrapperにクラスを追加または削除します。

応用例

この方法を応用することで、さまざまなシナリオで要素の表示非表示を制御することができます。例えば、フォームの入力に応じて追加の入力フィールドを表示したり、ユーザーのアクションに応じて異なるコンテンツを表示することができます。

例：フォームの動的な表示非表示

例えば、ユーザーが「その他」を選択した場合に追加の入力フィールドを表示するフォームを考えてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>動的フォーム</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <form>
        <label for="reason">理由を選択してください:</label>
        <select id="reason" name="reason">
            <option value="option1">理由1</option>
            <option value="option2">理由2</option>
            <option value="other">その他</option>
        </select>
        <div id="other_reason_wrapper" class="hidden">
            <label for="other_reason">その他の理由を入力してください:</label>
            <input type="text" id="other_reason" name="other_reason">
        </div>
    </form>

    <script>
        document.getElementById("reason").addEventListener("change", function() {
            var selectedValue = this.value;
            var otherReasonWrapper = document.getElementById("other_reason_wrapper");
            if (selectedValue === "other") {
                otherReasonWrapper.classList.remove("hidden");
            } else {
                otherReasonWrapper.classList.add("hidden");
            }
        });
    </script>
</body>
</html>

このコードでは、以下のように動作します。

  1. ユーザーがドロップダウンメニューから選択を行います。
  2. 選択された値が「その他」である場合、#other_reason_wrapperのクラスからhiddenを削除して表示します。
  3. それ以外の場合、#other_reason_wrapperにhiddenクラスを追加して非表示にします。

まとめ

JavaScriptを使って要素の表示非表示を制御する方法は、ユーザーエクスペリエンスを向上させるために非常に有効です。特に、クラスの追加と削除を使うことで、コードの再利用性が高まり、保守性が向上します。本記事で紹介した方法を参考に、自分のプロジェクトに応用してみてください。具体的な例を通じて、基本的な概念から応用例までを理解することで、より効果的なUIを実現できるでしょう。