JQuery・JS

 <script>
        const categories = document.querySelectorAll('.category');

        categories.forEach((category) => {
            category.addEventListener('click', () => {
                const subcategoryList = category.querySelector('.subcategory-list');
                const isActive = subcategoryList.style.display === 'block';

                // すべてのサブカテゴリを非表示にする
                const allSubcategoryLists = document.querySelectorAll('.subcategory-list');
                allSubcategoryLists.forEach((subcategory) => {
                    subcategory.style.display = 'none';
                });

                // クリックした大カテゴリに関連付けられたサブカテゴリを表示/非表示にする
                subcategoryList.style.display = isActive ? 'none' : 'block';
            });
        });
    </script>

「const」は、JavaScriptで変数を宣言するためのキーワードの1つです。このキーワードを使用すると、変数を宣言する際にその値を一度設定したら再代入できない、つまり「定数」を宣言することができます。

「const」は特に、定数やプログラム内で変更されてはいけない値を表現するのに役立ちます。

一方で、「let」というキーワードは再代入可能な変数を宣言するために使用され、動的な値の格納に適しています。適切な変数の型を選択し、データを適切に管理するために「const」や「let」を使い分けることが重要です。

変数名を適切に選ぶことで、コードの可読性が向上し、他の開発者や自分自身がコードを理解しやすくなります。以下に、変数名とそれに関連するHTML要素の例を箇条書きで示します。

ボタンに関するHTML要素を取得する場合：
変数名: buttons
例: const buttons = document.querySelectorAll(‘button’);

アンカーリンクに関するHTML要素を取得する場合：
変数名: links
例: const links = document.querySelectorAll(‘a’);

段落要素（テキストコンテンツを含む）を取得する場合：
変数名: paragraphs 例: const paragraphs = document.querySelectorAll(‘p’);

フォーム関連の入力フィールドを取得する場合： 変数名: formInputs
例: const formInputs = document.querySelectorAll(‘input, select, textarea’);

メニューアイテムに関するHTML要素を取得する場合：
変数名: menuItems 例: const menuItems = document.querySelectorAll(‘.menu-item’);
画像要素を取得する場合： 変数名: images 例: const images = document.querySelectorAll(‘img’);

テーブルの行やセルを取得する場合：
変数名: tableRows, tableCells など
例: const tableRows = document.querySelectorAll(‘tr’);

ボタンに関するHTML要素を取得する場合：
変数名: buttons
例: const buttons = document.querySelectorAll(‘button’);

アンカーリンクに関するHTML要素を取得する場合：
変数名: links
例: const links = document.querySelectorAll(‘a’);

段落要素（テキストコンテンツを含む）を取得する場合：
変数名: paragraphs
例: const paragraphs = document.querySelectorAll(‘p’);

フォーム関連の入力フィールドを取得する場合：
変数名: formInputs
例: const formInputs = document.querySelectorAll(‘input, select, textarea’);

メニューアイテムに関するHTML要素を取得する場合：
変数名: menuItems
例: const menuItems = document.querySelectorAll(‘.menu-item’);

画像要素を取得する場合：
変数名: images
例: const images = document.querySelectorAll(‘img’);

テーブルの行やセルを取得する場合：
変数名: tableRows, tableCells など
例: const tableRows = document.querySelectorAll(‘tr’);

これらの例は、変数名を関連するHTML要素やコンテンツに合わせて適切に命名する一般的な原則を示しています。変数名はコード内で何を表すのかを明確に伝えるのに役立ちます。