40代高卒者が製造業からIT転職する【jQueryを使おう】

programming
DMM WEBCAMP

こんにちは、フローです。

今回は、ハンバーガーメニューで使うjQuery（ジェイクエリ）を使用して、

メニューが、開いたり閉じたりする機能を作っていきましょう。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【ハンバーガーメニュー3】

実装してみよう

WEBページで、

動的なサイトを作るのに必須アイテムが、jQuery（ジェイクエリ）です。

まずはどうやったら使えるようになるのかですが、非常に簡単です。

HTMLの記述の中の、

</body>の直前に、jQueryを実行させるためのCDNを埋め込むだけです。

<!DOCTYPE html>
<html lang="ja">

<head>
  必要なものを記述
</head>

<body>
  <header>
      <div class="hamburger">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </nav>
  </header>
  <main>
     色々あって
  </main>
  <footer>
    ちょろちょろ書いて
  </footer>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="main.js"></script>
</body>

</html>

このHTMLの

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

この部分です。</body >の直前に書くのが一般的な書き方です。

<script src="main.js"></script>

この部分は、ハンバーガーメニューに必要な、

jQueryの記述を書いて入れておく

“main.js”ファイルの読み込みをする為の記述です。

ファイルの中身を書いてみよう

さっそく、”main.js”の中身を見ていきましょう。

$(document).ready(function() {
  $('.hamburger').click(function() {
    $(this).toggleClass('active');
    $('.nav-list').toggleClass('show');
  });
});

$(window).resize(function() {
  if ($(window).width() > 768) {
    $('.nav-list').removeClass('show');
    $('.hamburger').removeClass('active');
  }
});

この記述は、ハンバーガーメニューを実装するためのものです。以下、1行づつ解説します。

1行目: $(document).ready(function() {

初期化処理を表します。

HTMLのドキュメントの読み込みが完了した後に実行されます。

このように、HTMLのドキュメントの読み込みが完了してからjQueryを使用することで、

jQueryが正常に動作することが保証されます。

2行目: $(‘.hamburger’).click(function(){

CSSクラス、

「hamburger」を持つをクリックしたときに実行する処理を記述しています。

「$(‘.hamburger’)」は、

CSSクラス「hamburger」を持つ要素を選択するjQueryのセレクタです。

「click」メソッドは、要素をクリックしたときに実行する処理を記述するものです。

3行目: $(this).toggleClass(‘active’);

クリックされた「hamburger」に

「active」クラスをトグル（切り替え）する処理を記述しています。

「$(this)」は、クリックされた「hamburger」要素を表します。「toggleClass」メソッドは、

対象の要素にCSSクラスを追加または削除するものです。

この行では、「hamburger」に

「active」クラスが追加されている場合は削除され、そうでない場合は追加されます。

4行目: $(‘.navlist’).toggleClass(‘show’);

CSSクラス「nav-list」を持つ要素に

「show」クラスをトグル（切り替え）する処理を記述しています。

「$(‘.nav-list’)」は、

CSSクラス「nav-list」を持つ要素を選択するjQueryのセレクタです。

「toggleClass」メソッドは、

対象の要素にCSSクラスを追加または削除するものです。

この行では、「nav-list」に

「show」クラスが追加されている場合は削除され、

そうでない場合は追加されます。

これにより、「nav-list」が表示・非表示が切り替わります。

5行目: }); 

jQueryの初期化処理とclickイベントハンドラの終了を表しています。

この記述により、jQueryの初期化処理とclickイベントハンドラが閉じられます。

jQueryの初期化処理と

clickイベントハンドラの終了を表しています。

この記述により、jQueryの初期化処理とclickイベントハンドラが閉じられます。

次に、

$(window).resize(function() {
  if ($(window).width() > 768) {
    $('.nav-list').removeClass('show');
    $('.hamburger').removeClass('active');
  }
});

ウィンドウのリサイズイベント

（ブラウザのサイズが変更されたとき）に対する処理を記述しています。

以下、1行づつ解説します。

1行目: $(window).resize(function() {

ウィンドウのリサイズイベントに対する処理を記述するものです。

この中に記述された内容は、ブラウザのサイズが変更されたときに実行されます。

2行目: if ($(window).width() > 768) {

ブラウザのサイズが768px以上かどうかを判定するものです。

「$(window).width()」は、

ブラウザのサイズ（幅）を取得するものです。

「> 768」は、「768px以上」を表します。

ブラウザのサイズが768px以上かどうかを判定するものです。

3行目: $(‘.navlist’).removeClass(‘show’);

CSSクラス「nav-list」を持つ要素から、

「show」クラスを削除するものです。

「$(‘.nav-list’)」は、

CSSクラス「nav-list」を持つ要素を選択するjQueryのセレクタです。

「removeClass」メソッドは、

対象の要素からCSSクラスを削除するものです。

4行目: $(‘.hamburger’).removeClass(‘active’);

CSSクラス

「hamburger」を持つ要素から、

「active」クラスを削除するものです。

「$(‘.hamburger’)」は、

CSSクラス「hamburger」を持つ要素を、

選択するjQueryのセレクタです。「removeClass」メソッドは、

対象の要素からCSSクラスを削除するものです。

5行目: });

この行は、ウィンドウのリサイズイベントの処理の閉じを表しています。

ちなみに、

この記述は、ハンバーガーメニューの実装に必須ではありません。

この記述がある場合、

ブラウザのサイズが768px以上になったときに、

「nav-list」と

「hamburger」から「show」と「active」クラスが削除されます。

これにより、ハンバーガーメニューを使った表示が不要な場合

（例えば、PCブラウザなどで表示する場合）

に、通常のメニュー表示に切り替えることができます。

この記述がない場合、

ハンバーガーメニューを使った表示が不要な場合でも、

「nav-list」と「hamburger」に

「show」と「active」クラスが残ったままとなります。

この場合、ページのデザインに問題が発生する可能性があります。

しかし、この記述が必要かどうかは、

そのWebページの要件やデザインによって異なります。

必要と判断する場合は、記述することが望ましいですが、

必要と判断しない場合は記述する必要はありません。

まとめ

今回は、ハンバーガーメニューの実装に必要な、

jQueryの記述について書いていきました。

私は何度も何度もハマりました笑

なので、基本的な記述がわかったなら、

このパターンを毎回使う事をオススメします。

パーツとして色々と持って置くと、

時短にもなりますし、毎回書いてると、工数が多いので、ミスにも繋がります。

なので、ある程度理解したらそれでオッケーです。

この記述をそのまま使うも良し、自作で作るも良し、

是非、色々なパーツを揃えてみて下さい。

レッツチャレンジ！