40代高卒者が製造業からIT転職する【jQueryを使おう】
こんにちは、フローです。
今回は、ハンバーガーメニューで使うjQuery（ジェイクエリ）を使用して、
メニューが、開いたり閉じたりする機能を作っていきましょう。
目次
実装してみよう
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の記述について書いていきました。
私は何度も何度もハマりました笑
なので、基本的な記述がわかったなら、
このパターンを毎回使う事をオススメします。
パーツとして色々と持って置くと、
時短にもなりますし、毎回書いてると、工数が多いので、ミスにも繋がります。
なので、ある程度理解したらそれでオッケーです。
この記述をそのまま使うも良し、自作で作るも良し、
是非、色々なパーツを揃えてみて下さい。
レッツチャレンジ！
この記事が気に入ったらサポートをしてみませんか？