ブログ
【WEB制作の基本】jQueryとは？
jQueryとは、JavaScriptをより簡単に記述できるように設計されたJavaScriptライブラリの1つです。jQueryのスキルを習得すれば、WEB制作でできることの幅が広がります。
今回の記事では、jQueryの概要から導入、記述方法まで詳しく解説していきます！
jQueryとは
jQueryはJavaScriptのためのライブラリです。jQueryを使用することでシンプルにJavaScriptを記述できるようになり、それまで数十行にわたるコードが必要だった処理もわずか数行で実行できるようになりました。
jQueryのライブラリにはHTMLやCSSの操作に関するコードが多く含まれており、これを使用することで、動的な表現を短いコードで簡単に実装できます。
WEBサイトで多く見られる「画像が入れ替わるスライドショー」や「マウスオーバーで色が変わるメニュー」、「ハンバーガーメニュー」などの多くがjQueryによって実装されています。
jQueryのメリット・デメリット
jQueryのメリット
①短いコードで記述できる
JavaScriptだと数十行にも及ぶコードを、jQueryだと一行で簡潔に記述することができる。
②全てのブラウザで使用できる
JavaScriptで同じコードを記述した場合でも、Safari、Chrome、Edgeなどのブラウザによって処理が実行されないことがあります。しかし、jQueryを使用すればすべてのブラウザで同じ動作を実現することが可能です。
jQueryのデメリット
①処理が遅くなるケースがある
jQueryを利用するときは、まずjQuery本体を読み込んでからjQueryを利用したい処理を書いていきますが、このjQuery本体が重く、処理が遅くなるケースがあります。
②バージョンの相性がある
jQuery自体様々なバージョンがありますし、プラグインとバージョンの相性もあります。使用したいプラグインがこのバージョンでは利用できない場合もあります。
jQueryとJavaScriptの違い
■プログラミング言語とライブラリという関係
JavaScriptとjQueryの最も大きな違いは、「プログラミング言語」と「ライブラリ」であるという点です。
jQueryは、その使い勝手の良さから独立したプログラミング言語だと勘違いされることもあります。しかし、その本質はあくまでもライブラリです。つまり、JavaScriptの処理をパーツ化し、汎用性や使い勝手を高めたものがjQueryだと考えてください。
■コーディング量
原則として、jQueryで可能なことはJavaScriptでも実現できます。ただし、コーディング量はjQuery側がかなり少なくなります。これは、jQueryがJavaScriptの複数の機能をひとつにまとめていることに由来しています。JavaScriptで実装する場合は数十行もコーディングしなくてはならない処理も、jQueryなら数行のコーディングで済むわけです。また、jQueryにはプラグインが用意されており、ファイルを読み込むだけで利用できます。
■標準で複数のブラウザに対応
JavaScriptではブラウザごとに微妙な記述の違いがあります。対してjQueryはこうしたブラウザ間の差異を吸収してくれるため、記述の違いを意識せずにコーディングを進めることが出来ます。
jQueryの導入方法
jQueryを使用するには、本体の導入から始める必要があります。jQueryの導入方法には2種類があり、ファイルをダウンロードしてサーバに直接アップロードする方法と、jQueryの配布元で公開されているファイルを使用するCDNを用いる方法の2つです。
jQueryをダウンロードして導入する方法では、オフラインでも利用できるというメリットがあります。一方、CDNを使用してjQueryを導入する方法では、WEBサイトの表示を高速化できたり、サーバの負荷を軽減できるメリットがあります。
jQuery本体を読み込む場所はHTMLの「head内」か「bodyの内部」であればどこでも良いが、ブラウザのレンダリングを遅らせないためにも、「bodyの閉じタグの直前」が望ましいです。
ただし「jQueryの本体」は自作のjQueryファイルよりも「前」に読み込んで、置かなければならない点に注意が必要です。
※jQuery公式サイトはこちら
※CDNとは
「Content Delivery Network（コンテンツデリバリーネットワーク）」の略称であり、WEBコンテンツをインターネットを経由して配信するために最適化されたネットワークのことです。
/* CDNを使用してjQueryを導入する方法 */
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
/* jQueryをダウンロードして導入する方法 */
<script src="ファイルのパス/jquery-3.6.0.min.js"></script>jQueryの記述方法
jQueryの書き方は「いつ （イベント）・ 何を（セレクタ） ・ どうする（メゾット）」という文法です。
$(function(){
/* ここにjQueryの処理を記述 */
$("セレクタ").メソッド("パラメータ[引数]");
});セレクタを指定する（何を）
操作の対象となるデータを指定するものがセレクタです。
jQueryのセレクタの基本スタイルは＄("セレクタ")の形式で表現されます。
以下、セレクタの一部を紹介します。
| セレクタ | 表記 | 意味 |
| 要素セレクタ | $(“p”) | p要素の全てを指定 |
| IDセレクタ | $(“#sample”) | id=”sample”の要素を指定 |
| クラスセレクタ | $(“.sample”) | class=”sample”の要素を指定 |
| 複数セレクタ | $(“p, a”) | p要素とa要素の全てを指定 |
| 子孫セレクタ | $(“p a”) | p要素の中のa要素を指定 |
| 擬似クラス | $(“p:nth-child(3)”) | 三番目のp要素を指定 |
メソッドを指定する（どうする）
次にセレクタに対して、どのような操作を行うかを指定します。
jQueryのメソッドの基本スタイルはメソッド("パラメータ[引数]")の形式で表現されます。メソッドは隣接する（）の中にパラメータを記述することで、詳細設定できます
以下、メソッドの一部を紹介します。
| メゾット | 意味 | パラメータ指定 |
| .fadeIn() | 非表示要素を徐々に表示する | 表示する時間をミリ秒で指定 |
| .fadeOut() | 要素を徐々に非表示にする | 非表示する時間をミリ秒で指定 |
| .html() | パラメータ空欄時は要素の値をHTMLとして取得 パラメータ入力時は要素の値を書き換える | 指定のhtmlに書き換える |
| .text() | パラメータ空欄時は要素の値をテキストとして取得 パラメータ入力時は要素の値を書き換える | 指定のテキストに書き換える |
| .css() | CSSスタイルの取得 | 指定のCSSスタイルに変更 |
| .addClass() | クラスを追加 | 指定のクラスを追加 |
| .removeClass() | クラスの削除 | 指定のクラスを削除 |
イベントを指定する（いつ）
最後に指定したセレクタに対して、どのような操作した場合に動作させるか指定します。
jQueryのイベントの基本スタイルは$("セレクタ").イベントの形式で表現されます。
以下、イベントの一部を紹介します。
/* クリック時 */
$("div").click():
/* マウスホバー時 */
$("div").hover():
/* スクロール時 */
$("windows").scroll():
/* サイト読み込み時 */
$("docment").ready():
/* 画面サイズ変更時 */
$("windows").resize():