jQueryは、JavaScriptやAjaxに触れる際によく出てくる存在ですが、プログラミングの初心者ですと、その内容を詳細に知っている人は少ないのではないでしょうか。
本記事では、jQueryの概要やJavaScriptとの関係、基本的な書き方などを紹介していきたいと思います。
jQueryとは
jQueryは、WEBブラウザ用JavaScriptコードの記述をスムーズに行うために設計されたオープンソースのJavaScriptライブラリで、アメリカのプログラマーであるジョン・レシグさんが2006年1月に開催されたBarCamp NYCでリリースしました。
jQueryのキャッチコピーは“少ない記述で、もっと多くのことをする”というものとなっています。
jQueryを使うことで、HTMLドキュメントのトラバースと操作やブラウザイベントの処理、DOMアニメーション、Ajaxのやりとり、クロスブラウザのJavaScript開発が単純になります。
jQueryはオープンソースであり知名度も高いためユーザー数が多く、学習コストが低く、さらにサイズも小さいため初心者が手をつけ安いライブラリとなっています。
また、APIのドキュメントが整備されているという点も、習得の際に助けとなります。
学習コストの低さの他、使いやすいという点も魅力の1つで、他のJavaScriptライブラリとの競合を避ける方法が提供されていたり、最新のブラウザで開発テストと最適化が行われていたりします。
jQueryでできること
jQueryはさまざまなことを可能にしますが、特によく知られているのは“DOM”、“アニメーション”、“Ajax”の3つです。
DOM（Document Object Model）は、マークアップされた文書をリソース要素の木構造で表現し、操作可能にするシステムやモデルのことです。
HTMLファイルにおけるドキュメントは、“<p>”や“<img>”などのことを指し、これを直接操作できます。
例として、特定のボタンをクリックごとに所定の位置に移動させたり、画像の明暗を変更したりできます。
通常、HTMLファイルにあるドキュメントは簡易的に操作できませんが、jQueryを使うことで簡易的な操作が可能になります。
アニメーションに関しては、jQueryはJavaScriptのライブラリであるということから、古いブラウザでも対応可能です。
現在ではCSS3の登場により、こちらを活用することでも簡易的なアニメーションを作成できるようになりましたが、CSS3に対応していないブラウザを想定する際はjQueryの出番となります。
AjaxはWEBブラウザ内において非同期通信を行いながらインターフェイス構築を行うプログラミング手法で、こちらの機能もjQueryに含まれています。
Ajaxの詳細については、以前“Ajax とは？非同期通信や Ajax の仕組みを解説”の記事でも説明した通りです。
Ajaxを活用することでGoogleマップやGmail、Twitter、YouTubeなどをWEBサイトに組み込むことが可能になるので、WEBサイトのコンテンツを豊富にできます。
jQueryとJavaScriptの関係
前述したとおり、jQueryはJavaScriptライブラリです。
ライブラリとは、汎用性の高い複数のプログラムを再利用ができるようにまとめたもので、他のプログラムに何らかの機能を提供するコードの集まりともいえます。
jQueryの場合、中身はJavaScriptで構成されたプログラムとなっているので、ライブラリとプログラム言語という別個の存在ではありますが、非常に近しい関係にあるといえるでしょう。
しかし、プログラム作成時に使うコードの中にはjQuery専用でJavaScriptとしては意味を持たない命令文も存在しているため、jQueryを前提とした知識でjQueryを使用せずにプログラムを作成すると、意図しないエラーが発生してしまうことがあるので注意が必要です。
jQueryを使う方法
jQueryを使用する際は、jQueryのダウンロードを行うか、他のサーバーにあるものを使用する必要があります。
jQueryのダウンロードは、公式サイトのダウンロードページから行えるので、最新版（Current Release）のライブラリを選択しましょう。
なお、リンクは“Minified”、“Packed”、“Uncompressed”の3種類が存在するので、用途に応じてダウンロードします。
Minifiedは、改行コードやインデントの除去によりファイルサイズを軽量化したものです。
ダウンロードサイズと実行速度のバランスがよいので、通常リリースされるサービスで使う際に適しています。
Packedは、最小化したコードにPack処理を施したものです。
ファイルサイズを極端に小さくなっており、サーバーへの負荷がもっとも軽減されるので、サーバーの負荷軽減を目的とした場合に適しています。
なお、クライアント側で実行できる形式に戻すための処理が発生するため、トータルの実行速度はやや劣ります。
Uncompressedは、人間がもっとも読みやすい形に整形されたコードとなっており、ファイルサイズももっとも大きいです。
jQueryの処理を理解する必要がある場合に用います。
jQueryをダウンロードせずに、他のサーバーにあるものを使用する場合は、GoogleやMicrosoft、jQuery公式サイトなどのサーバーが配信しているものを使用します。
この方法はCDN（content delivery network/コンテンツデリバリネットワーク）といいます。
CDNは、WEBコンテンツをインターネット経由で配信するために最適化されたネットワークのことで、エコシステムであるといえます。
複雑なので詳細な説明は割愛しますが、アクセス元と近いサーバーでの通信により高速化が可能になるのです。
この方法では、headタグの中に“<script src="（希望のCDNのURL）"></script>”と記述します。
これによりjQueryファイルのひも付けができます。
jQueryの書き方
基本的な書き方
jQueryで記述を行う際の基本的な形は以下のようになります。
====================サンプル====================
$(function(){
$("（セレクタ）").（メソッド）("（パラメータ）")
});
====================サンプル====================
処理は“$(function(){”と“});”の間に記述します。
“セレクタ”は任意の範囲、要素を指定するためのもので、セレクタで指定された場所にメソッドおよびパラメータで記述した命令が処理されていきます。
例として、下記のようにセレクタ、メソッド、パラメータを記述すると、“.hoge”の文字色が赤に変更されます。
====================サンプル====================
$(function(){
$(".hoge").css("color","red")
})
====================サンプル====================
イベント
イベントは、セレクタに対してクリックやマウスのカーソルを移動させるなどの特定のアクションを行った時にメソッドを実行する条件付けが行えます。
例として、“<div class="hoge">サンプル</div>”という記述があった時に、下記のコードを作成すると、文字をクリックした際にclickイベントが発生し、文字色が赤になります。
====================サンプル====================
$(function(){
$(".hoge").click(function(){
$(this).css("color","red")
});
});
====================サンプル====================
jQueryを初心者から学習する方法
jQueryの公式サイトでは、全機能の解説が行われていますが、海外サイトとなっており、コンテンツが英語で書かれているため、英語能力が高くない場合はお勧めできません。
初心者が学ぶという点では、ドットインストールやProgateといった学習サイトの活用がもっとも手軽といえるでしょう。
なお、ドットインストールのjQueryレッスンはサポートが終了している他、ProgateはJavaScriptのバージョンがES5の内容となっているので、注意が必要です。
その他、Qiitaなどの有志の情報が集まるサイトを利用するのもよいでしょう。
まとめ
jQueryは、短いコードで直感的にプログラムを書ける便利なライブラリですが、JavaScriptの知識が不要になるわけではなく、あくまで延長線上にある存在です。
むしろ、JavaScriptについてより深く理解していくための存在ともいえるでしょう。
あくまで初心者向けといってよい知識ですが、学ぶ際にはJavaScriptの知識をすでに習得しているか、並行して学んでいくことをオススメします。