jQueryとは

jQueryとは、JavaScriptでできることをコンパクトかつ便利にまとめたライブラリ言語である。例えば、クリックしたら画像が入れ替わる、マウスオーバーした要素がアニメーションのように動く、時間によってページの色を変化するなど、JavaScriptで書くと時間がかかる作業をjQueryを使えば簡単に記述できる。

jQueryは2006年、当時MozillaのJavaScriptエバンジェリストだったジョン・レッシグ氏によって開発され、世界中のWebデザイナーやプログラマーの間で広く一般に使われている。ロゴの下に表記されているキャッチコピー「write less, do more」は有名である。

JavaScriptは1995年にNetscape社によって開発されてから、動的にHTMLを変更する機能を追加するまでに進化し、需要が広がった。しかし、JavaScriptの記述には多くの手続きが必要でソースも長く、限られたエンジニアしかJavaScriptを使って開発できなかった。

そこで、より多くのエンジニアが簡単に開発する手段が必要になり、開発されたのがjQueryというJavaScriptのライブラリーである。

つまり、jQueryはJavaScriptのコードを簡潔に書くことを目的とて開発された言語である。jQueryの他にも多くのライブラリーが存在するが、jQueryはCSSがわかるWebデザイナーやマークアップエンジニアが簡単に習得できるように設計されているため、現在広く使われている。

jQueryはJavaScriptのライブラリである。ライブラリとは、複数の機能をまとめて部品化したものである。jQueryを使用するには、この「ライブラリ（jquery-3.3.1.min.js）」をjQueryのコードを使う前に読み込む必要があるが、ファイルサイズが軽量なため、Webページの読み込み速度にはほとんど影響なく使用することができる。

またjQueryは、GoogleChome、Safari、Firefoxなどの主要なWebブラウザーに対応している「クロスブラウザ設計」のため、ブラウザによるJavaScriptの実装の差異を意識せずに使うことが可能である。

jQueryでできることは幅広く多くの機能があるが、代表的なのは以下の３点である。

1. DOM（Document Object Model）
   HTMLを操作するための機能
2. アニメーション
   画像を入れ替えたり、マウスオーバーした要素が動いたりするアニメーション機能
3. Ajax
   外部ファイルを動的に読み込む機能で、Google Mapsなどのように１ページの内容を新しいコンテンツで置き換えることが可能

jQueryの読み込み方法は下記の2種類ある。

1. ライブラリー本体をダウンロードして読み込む方法
   jQueryの公式サイトからライブラリーをダウンロードし、利用したいWebサーバーにアップロードし、HTMLの中にscript要素を書いて読み込む。
2. Web上のソースを読み込む方法
   HTML内にscript要素のGoogle Hosted Librariesの利用したいライブラリーを指定し、Webページに直接読み込む。

プログラムの読み込み方法については、html内に直接書く方法と、拡張子に「.js」がついた外部ファイルを作成し、それを読み込む方法がある。一般的には外部ファイルを読み込む方法が広く使われている。

jQueryは基本的に「セレクタ」と「メソッド」で構成されており、次のように記述する。

基本的な記述方法

$(function() {
$('セレクタ').メソッド();
});

• 「セレクタ」・・・操作するHTML要素の対象を記述する
• 「メソッド」・・・操作する内容を記述する

また冒頭の「＄」は関数で、Wordpressなどでは「jQuery」と記述することもある。

セレクタは処理の対象を指定します。主に下記4種類のセレクタが使われる。

指定方法はcssセレクタとほとんど同じである。

• idセレクタ・・・id属性で指定
• classセレクタ・・・class属性で指定
• 要素セレクタ・・・HTMLタグで指定
• 子孫セレクタ・・・階層的に要素を指定

メソッドは対象の要素に何をするかを記述する。

多くのメソッドがあるが、よく使われる代表的なものとしては下記のようなメソッドがある。

• css・・・要素にcssを適用する
• before・・・要素の前にHTMLを追加する
• addClass・・・要素にクラスを追加する
• removeClass・・・要素のクラスを削除する

※記述例①

要素pのフォントサイズを20pxにする。

＜p＞こんにちは！＜/p＞
＜script＞
$(function() {
$("p").css('font-size','20px');
});
＜/script＞

またメソッドの位置には特定の「イベント」を指定することができる。イベントを記述することによって、実行タイミングを指定することが可能となる。
よく使われるイベントには次のようなものがある。

• click・・・クリックイベント
• dblclick・・・ダブルクリックイベント
• mouseout・・・マウスアウトイベント
• mouseover・・・マウスオーバーイベント

※記述例②

要素pをクリックしたら、テキストが「さようなら」になるというイベントが起こる。

＜p＞おはよう＜/p＞
＜script＞
$(function(){
$("p").click(function() {
$(this).text("さようなら");
});
});
＜/script＞

主に下記のような学習方法がある。

1. ネット上の無料（有料）サイトで学習する
   ネット上にはブログや動画など多くのjQueryに関する情報が出回っており、まずはjQueryに触れてみたい場合、またはすぐに学習したいという場合は、気軽に学び始めることができる。
2. 書籍で学習する
   jQueryが使われるようになって10年以上経っている現在、多くの専門書が発行されている。図解や説明のわかりやすい書籍も多く、理解しやすい。また本の場合ネットよりも場所を選ばずに勉強できるという利点もある。
3. スクールに通って学習する
   上記２点よりもお金はかかるが、講師に質問ができたり、仲間ができたりと、上記２点の方法にはない利点がある。