UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#289 JavaScriptでプロダウンメニューのScript部分を解説

記入日:2023-10-24 編集日:2023-10-24

JavaScriptでプロダウンメニューのScript部分を解説してみようと思います。

この記事を読むと(約5分)
JavaScriptでプロダウンメニューのScriptをイメージできます。

JavaScriptでプロダウンメニューのScript

// script.js
document.addEventListener("DOMContentLoaded", function() {
  let dropdowns = document.getElementsByClassName("dropdown");
  let i;

  for (i = 0; i < dropdowns.length; i++) {
    let openDropdown = dropdowns[i];
    openDropdown.addEventListener("click", function() {
      this.classList.toggle("active");
      let dropdownContent = this.getElementsByClassName("dropdown-content")[0];
      if (dropdownContent.style.display === "block") {
        dropdownContent.style.display = "none";
      } else {
        dropdownContent.style.display = "block";
      }
    });
  }
});

このコードは、HTML文書が完全に読み込まれた後に特定の動作を実行するJavaScriptのスクリプトです。 具体的には、ドロップダウンメニューを制御するためのコードです。

以下に、コードの各部分の解説をします:

1. document.addEventListener("DOMContentLoaded", function() {...});
この行は、HTML文書が完全に読み込まれた後に指定された関数が実行されるようにするためのものです。DOMContentLoaded イベントは、HTML文書の構造が読み込まれ、操作可能になった時に発生します。

2. let dropdowns = document.getElementsByClassName("dropdown");
dropdowns は、クラス名が "dropdown" である全ての要素を含むHTMLCollection(要素の集まり)を格納する変数です。これはドロップダウンメニューを制御するための要素を取得するために使用されます。

3. let i;
ループ変数 i を定義します。この変数は後でループの中で使用されます。

4. for (i = 0; i < dropdowns.length; i++) {...}
for ループが始まります。このループは dropdowns の要素を順番に処理します。

5. let openDropdown = dropdowns[i];
ループ内で、現在の要素を openDropdown という変数に格納します。これは後でクリックイベントのリスナー内で使用されます。

6. openDropdown.addEventListener("click", function() {...});
openDropdown 要素に対して、クリックイベントのリスナーを追加します。

7. this.classList.toggle("active");
クリックされた要素(openDropdown)のクラスリストから "active" クラスをトグル(追加または削除)します。これにより、要素の外観が変わります。

8. let dropdownContent = this.getElementsByClassName("dropdown-content")[0];
クリックされた要素内から、クラス名が "dropdown-content" である要素を取得し、dropdownContent 変数に格納します。

9. if (dropdownContent.style.display === "block") {...}
もし dropdownContent の表示スタイルが "block" であれば、以下のコードが実行されます。

10. dropdownContent.style.display = "none";
dropdownContent の表示スタイルを "none" に設定し、要素を非表示にします。

11. else {...}
それ以外の場合、以下のコードが実行されます。

12. dropdownContent.style.display = "block";
dropdownContent の表示スタイルを "block" に設定し、要素を表示します。

このコードは、クラス名が "dropdown" である要素をクリックすると、それに紐づく "dropdown-content" 要素の表示/非表示を切り替えるような動作を実現します。また、クリックされた要素自体に "active" クラスをトグルすることで、外観を変更することもできます。

以下はコメントを追加したコードです:

// script.js

// DOMの読み込み完了後に実行する
document.addEventListener("DOMContentLoaded", function() {

  // クラス名が "dropdown" のすべての要素を取得
  let dropdowns = document.getElementsByClassName("dropdown");

  // ループ用の変数 i を初期化
  let i;

  // "dropdown" クラスを持つすべての要素についてループ
  for (i = 0; i < dropdowns.length; i++) {

    // 現在のドロップダウン要素を取得
    let openDropdown = dropdowns[i];

    // ドロップダウン要素にクリックイベントリスナーを追加
    openDropdown.addEventListener("click", function() {

      // クリックされたドロップダウン要素の "active" クラスを切り替える
      this.classList.toggle("active");

      // クリックされたドロップダウン内の最初の "dropdown-content" クラスを持つ要素を取得
      let dropdownContent = this.getElementsByClassName("dropdown-content")[0];

      // 表示スタイルが "block" に設定されているかをチェック
      if (dropdownContent.style.display === "block") {

        // もし "block" なら、ドロップダウンコンテンツを非表示にする
        dropdownContent.style.display = "none";
      } else {

        // そうでなければ、ドロップダウンコンテンツを表示する
        dropdownContent.style.display = "block";
      }
    });
  }
});

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。