どうもフリーランスプログラマのTakaです。
今回でこのプロジェクトも20回目となりましたが、この記事でようやく最後になります。
長かったですね！個人的にはもっとコンパクトにまとめられるかと思っていたのですが。。。
ということで、最後の記事になりますが、今回は先日作成したスマホ用のメニューであるハンバーガーメニューの開閉をJavaScriptで実装したいと思います。
ここまでのおさらい
まずは、いつも通りここまでの本プロジェクトのおさらいですが、本プロジェクトで作成するサンプルページの見本はこちらになります。
現時点でほぼ完成しており、今回のJavaScriptの処理で完成ということになります。
前回の記事は下記関連記事を参照してください！
JavaScriptの読み込み
では、早速実装していきたいと思いますが、まずはJavaScriptファイルを読み込みたいと思います。
JavaScriptファイルは以前下記の記事でも紹介している通り、既に「assets/js」フォルダの中に作成していると思うので、そのscript.jsファイルを読み込んでいきたいと思います。
読み込む方法は、htmlファイルのhead内で下記のように読み込みます。
defer属性をつけることで、DOMツリー構築後、つまり要素を読み込み後にjsファイルを読み込んでくれるようになります。
JavaScriptコーディング
読み込みが完了したら、続いて実際にscript.jsファイルを開いて下記のコードを入力します。
このコードを説明すると、まず即時関数を使ってsciprt.jsが読み込まれた段階でJavaScriptが実行されるようにします。通常JavaScriptの関数は、funcitonの後に関数名を指定して定義したりしますが、上記のように定義することで即時に関数を実行することができます。
実際に関数が実行されて、まず最初の処理が下記2行目のコードになり、「getElementById」というメソッドを使って「header」というidをを持つ要素をheaderという変数にオブジェクトとして格納しています。
これにより、header要素をjsからコントロールすることができるようになります。
続いて、下記の3〜5行目で「addEventListener」というメソッドに「click」というプロパティを指定して、header要素がクリックされたときにイベントが発生するように指定し、クリックされたときにhaeder要素に「on」というクラス名が付与（除去）されるようにしています。
具体的には、このクリックイベントはheader要素のonというクラスがなければonクラスを付与し、onクラスがある場合は除去することになります。toggleメソッドはこの付与（除去）を自動的にやってくれます。
要するに、header要素にonというクラスを付与（除去）することで、onクラスがあるときはグローバルナビゲーションが表示され、onクラスがない時はグローバルナビゲーションが表示されないということになります。実際にブラウザでhtmlファイルを開いてスマホサイズにした上で動作確認をしてみてください。
なお、ハンバーガーメニューの具体的なCSSは下記の記事になるので、改めて見返してみるのもいいかと思います。
まとめ
ということで、今回はスマホ用に構築したハンバーガーメニューの開閉処理をJavaScriptで実装してみました。これでこのプロジェクトの全ての工程は完了になります！とりあえず、これで最初から最後まで一通りの作成の流れが掴めたと思いますが、初心者の方はまだまだ慣れないところもあると思うので、また最初から復習していくのもとても大切なので、理解できるまで繰り返し作成してみてください！また、自分でコードをカスタマイズしてみるのもとても良い勉強になるので、そういった方法も慣れてきたら試してみるのが良いと思います！
本記事のまとめ
- JavaScriptファイルの読み込み
- クリックイベントの処理
- ハンバーガーメニューの開閉処理
ということで、終わってみれば全20回と少し長くなってしまいましたが、とりあえずこのプロジェクトは今回をもって完了とさせていただきます！お疲れ様でした！
それでは今回はここまで！また！