エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

【DAY17】Progate「jQuery中級編」学習(モーダル、ホバー、アコーディオン)【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【DAY17課題】Progateで「jQuery初級編」を学ぶ

デイトラDAY17の課題は「ProgateでjQuery初級編を学ぶ」です。

 

jQueryを使う準備

jQueryを使う準備を学びました

jQueryのライブラリファイルとは?

そもそもjQueryのライブラリファイルとは何か?

これは実際にjQueryのJavaScriptファイル(.jsファイル)を見てみると良いかと思います。

https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js

めちゃくちゃ複雑ですが、とにかくJavaScript言語の記法で、色々な関数などが書かれていることが分かると思います。

 

jQueryのライブラリファイルの読み込み方法

jQueryのライブラリファイルの読み込み方法は2つ

  1. Google Library API(グーグル先生が用意したWEB上の置き場)にリンク
  2. jQuery公式サイトからダウンロードしてリンク

のどちらかです。

今回Progateで学んだのは1つ目の方法ですね。

※Googleの置き場のファイルを読みに行くので「ajax.googleapis」というURLです

 

jQueryスクリプトをbodyの一番下(</body>)に書く理由

jQueryスクリプトは、「ヘッダー(<head>)」の中に書いても問題はありません。

しかし、最近は「bodyの一番下(</body>)」に書くことが多いようです。

 

「読込速度の観点」からというのが理由のようです。

いくつか意見がありますので興味がある人はこちらをどうぞ↓

teratail.com

 

モーダル(ポップアップ画面)は「click」イベント処理で作る

モーダルは「ポップアップ画面」のこと。

※前面に画面が出ているときには、後ろの画面には触れない

 

「click」イベント処理で作れます。

先日学んだこれですね↓

$('セレクタ').イベント名(function(){ });

 

あとは、Clickイベント発生時の処理を書けばOKです。

 

addClassとremoveClassを使うことで重複コードを避けられる

今回、疑似要素「hover」時の見た目の変化を、hoverイベントを使って実装しました。

 

JavaScriptのaddClassとremoveClassを使うと何が良いか?

CSS内のクラス定義は一度で済むので、重複コードを避けられますよね。

要素ごとのhover時の変化をいちいちCSSで書くよりも、楽に書けます。

 

重複要素を減らして書いていくことは、

  • 書く時間が減る
  • 変更があった時に変更する箇所が減る(時間短縮&ミスしづらい)

というメリットがあります。

この辺りの「保守(作成後の変更)」まで考慮するのは、実際の開発に慣れてきたらかもしれません。

 

アコーディオンを実現するには、条件分岐のIFを使う

アコーディオンとは、項目を選択すると、その場で広がって内容を表示するものです。

楽器のアコーディオンの「伸縮するところ」をイメージすると良いですね

 

アコーディオンを実現するために、これまで学んだことがたくさん出てきました

  • 条件分岐のIFを使う
  • addClass、removeClassを使う
  • 要素をfindして、中のtextを書き換える

という感じ。

応用編というか、組み合わせで実現しているだけですね。

 

ちなみに、条件分岐時に使われた「hasClass」は、クラスがあればTrueを返し、なければFalseを返すメソッドです。

※こういう「真/偽」を返すメソッドは、条件分岐IFとともによく使われます

 

以上、デイトラDAY17の解説でした。

JavaScriptもjQueryも復習のために、ドットインストールで勉強するのも良いかもしれません

https://dotinstall.com/lessons/basic_jquery_v2

 

他の日の記事はこちらにまとめています↓

www.engineer-step.com