はじめに
「jQueryなんて、もう古いライブラリでしょう？」——そう思っている方も多いのではないでしょうか。ReactやVueが主流の今、jQueryは過去の遺物のように語られがちです。
しかし2026年1月、jQueryは20周年を迎えると同時に、約10年ぶりのメジャーバージョンとなる4.0.0を正式リリースしました。IE10以前のサポート撤廃、ES modules化、Trusted Types対応など、内容はまさに「モダン化」そのものです。今も膨大な数のWebサイトで動き続けているこのライブラリが、今どう変わったのかを、実際に手を動かしながら見ていきましょう。
jQueryとは
jQueryは、2006年にJohn ResigがBarCamp NYCで発表したJavaScriptライブラリです。CSSセレクタのような書き方でDOM要素を取得し、イベント処理やアニメーション、Ajax通信までを統一されたAPIでシンプルに扱えることから、瞬く間に世界中のWebサイトで採用されました。
主な特徴
- 簡潔なセレクタAPI -
$('.class')のようにCSSセレクタの感覚でDOM要素を取得・操作できる - メソッドチェーン -
.css().text().on()のように操作を連続して書け、コードが読みやすい - 豊富なプラグインエコシステム -
$.fnを拡張する形で、20年分の資産となるプラグインが数多く公開されている - 4.0.0でのモダン化 - ES modulesへの移行、Trusted Types/CSP対応、非推奨APIの削除による軽量化（slim buildはgzip後約19.5KB）が行われた
インストール
npmを使う場合は以下でインストールできます。
npm install jquery
CDNから読み込む場合は、<script> タグを1行追加するだけで使い始められます。
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
ES modules環境であれば、以下のようにimportして使うこともできます。
import $ from 'jquery'
基本的な使い方
もっとも基本的な使い方は、要素を選択して中身やスタイルを書き換えることです。以下のサンプルでは、ボタンをクリックすると見出しのテキストと色が変わります。
$('#btn') で要素を取得し、.on('click', ...) でイベントを登録、.text() や .css() を続けて書くだけで見た目を変えられます。このメソッドチェーンの書きやすさが、jQueryが長年支持されてきた理由のひとつです。
実践的なユースケース
イベントデリゲーションで動的要素にも対応する
あとから append() などで追加した要素には、通常はイベントが効きません。jQueryでは、親要素にイベントを登録して子要素のセレクタを指定する「イベントデリゲーション（委譲）」を使うことで、動的に追加された要素にもイベントを効かせられます。
「アイテムを追加」で増やした項目をクリックしても、ちゃんと取り消し線が切り替わることを確認してみてください。
アニメーションで視覚的なフィードバックを与える
jQueryには slideToggle() や fadeToggle() といったアニメーション用メソッドが標準で用意されており、CSSを書かなくても開閉やフェードの動きを付けられます。アコーディオンやドロップダウンのUIに便利です。
独自プラグインを作成して再利用する
jQueryのエコシステムを支えてきたのが、$.fn にメソッドを追加して独自の機能をプラグイン化できる仕組みです。同じ処理を複数箇所で使い回したいときに役立ちます。
$.fn.highlightOnHover として定義した処理を、通常の組み込みメソッドと同じように $('.target').highlightOnHover() と呼び出せるのがポイントです。
まとめ
jQueryは「古いライブラリ」というイメージを持たれがちですが、4.0.0では非推奨APIの整理やES modules化、Trusted Types対応といった地に足の着いたモダン化が進められています。セレクタによるシンプルなDOM操作、イベントデリゲーション、アニメーション、プラグインによる拡張性は、20年経った今でも十分実用的です。
すでにjQueryを使ったプロジェクトを保守している方は、まずは4.0.0へのアップグレードガイドを確認してみてください。これから触れる方も、シンプルなAPIから気軽に試してみてはいかがでしょうか。