jQueryとは
jQuery(ジェークエリー)とはJavaScriptのライブラリになります。
jQuery: The Write Less, Do More, JavaScript Library…
ライブラリとは
JavaScriptには様々なライブラリがありますが、jQueryはWebサイト制作において人気で利用率の高いライブラリの1つです。
2022年に70,000人以上の開発者を対象にどのツールを使用してるかのアンケートがとられました。「Web frameworks and technologies」部門において第3位となっております。
JavaScriptは慣れてきたけどライブラリは使ったことない方にとてもおすすめです。
参考:Stack Overflow Developer Survey 2022
jQueryの歴史
2006年にJohn Resig（ジョン・レジグ）によって開発されました。
jQueryのキャッチコピー:「Write less, do more(少ないコードで、もっと多くのことをする)」
経緯
当時、ブラウザ間の互換性の問題で同じソースコードでも違う動きをすることがありました。異なるブラウザでそれぞれの同様の動きを確保するというのは開発者にとってもかなり負担でした。
しかしjQuery登場により互換性の問題の解決に大きな役割を果たしました。
現在
最近ではブラウザの互換性問題は以前ほど問題ではなくなっているため、ブラウザの互換性を気にせずに素のJavaScriptとCSSだけでも実装可能になってきています。しかしまだまだ人気なライブラリなのでこれからも使用され続けるでしょう。
jQueryの特徴
DOM操作
DOM（Document Object Model）要素の選択と操作(要素の取得、追加、削除など)が簡単にできます。
JavaScriptの場合
document.querySelector(".button"); // 変数に入れない場合
const button = document.querySelector(".button"); // 変数に入れる場合jQueyの場合
$(".button"); // 変数に入れない場合
const button = $(".button"); // 変数に入れる場合比較した通りJavaScriptの方が記述量が長くなります。
イベント処理
DOM操作に引き続きイベント処理も見ていきましょう。
上記で取得してきた要素(ここではbutton)がクリックされたときtoggle(2つの状態(オン/オフ)を切り替える)される処理を実装したいとします。
JavaScriptの場合
const button = document.querySelector(".button");
button.addEventListener("click", function () {
button.classList.toggle("active");
});jQueyの場合
$(".button").click(function () {
$(".button").toggleClass("active");
});記述の長さで比較するとあまり変わりませんがJavaScriptは「classList」と「toggle」の2つを覚える必要がありますがjQueryでは「toggleClass」だけを覚えておけば良いということになります。
jQueryの方がclassにtoggleさせたいと考えたときに(=toggleClassと)直感的に覚えることができます。
アニメーション
要素に対しアニメーションさせたい場合は、JavascriptとCSSに処理を記述する必要があります。しかし皆さんがWebサイトなどでよく見るようなアニメーションは予めjQueryが簡単に実装できるように準備してくれていることが多いです。ここではフェードインとスライドアップをJavaScriptとjQueryで実装してみます。
See the Pen
jquerytoha by BtoC東京 M5 (@BtoC-M5)
on CodePen.
ご覧いただいた通り、JavaScriptでアニメーション実装する場合はCSSと合わせて複数行書く必要がありますがjQueryでは「要素+.fadeOut()」や「要素+.slideUp()」のように1行記述するだけで実装できます。
Ajax
jQueryを使用するとAjaxの記述が簡単になります。もちろんJavaScriptだけでも実装は可能ですがコードが煩雑になってしまいます。
AJAX
「Asynchronous Javascript + XML」でJavascriptを使ってAsynchronous(非同期)でXML(データ)をやりとりをする技術のことです。(簡単に言うと画面を更新せずに別の情報を取得できる技術)
Ajaxが使われている主な代表例がGoogle Mapになります。通常、別の情報を見たい時はリンクをクリックすることで画面が更新されクリックしたページを閲覧することができます。しかしGoogle Mapはカーソルを動かすだけで地図の情報や周辺情報が更新されます。
jQueryのメリット・デメリット
メリット
歴史が長く人気なライブラリなので情報が多い
JavaScript同様こちらも人気で利用者も多いので様々な情報を簡単にGETできます。
記述量が減る
jQueryの特徴で見て頂いた通り、直感的に覚えることができJavaScriptよりコードが短くなりますのでコード全体がスッキリして見えます。
プラグインが豊富
ここでは紹介しきれなかった多くのプラグインがあり、スライダー、モーダル、ツールチップなどを簡単に実装できます。
スライダー
モーダル
デメリット
パフォーマンスに影響を及ぼす可能性がある
シンプルな実装の場合、Javascriptのみで実装したほうがパフォーマンス的に良い場合があります。
jQueryに頼りすぎるとJavaScriptの深い知識が得られなくなる
jQueryで作成したソースコードが想定した動きをしなかった場合、なぜそうなるのか、問題はどこにあるかなど探す際に、JavaScriptのある程度の知識がないと解決に導くことが難しいです。
なので1度jQueryで実装したものをJavaScriptだけで実装してみるとより知見が深まるでしょう。
まとめ
開発スタイルの変化やJavaScript自体のアップデートにより徐々にjQueryの使用率は落ちていますが、まだまだ現役で活躍しております。
また開発者にとって新しいものを生み出すことだけが仕事ではなく、昔のものを保守したり、アップデートしたりする必要があるのでjQueryを勉強することは大きな価値へと繋がるでしょう。