20年選手のjQueryが、4.0でモダンJSに生まれ変わった

はじめに

「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'

jQueryの基本的な使い方を動かす

jQueryの基本は、$() でDOM要素を選択し、.text() や .css() などのメソッドをチェーンして中身やスタイルを書き換えることです。以下のサンプルでは、ボタンをクリックすると $('#title') で取得した見出しのテキストと文字色が変わります。要点をまとめると次のようになります。

import $ from 'jquery'

// jQueryの基本: $()でDOM要素を取得し、メソッドチェーンで操作する
$('#btn').on('click', function () {
  $('#title')
    .text('テキストを書き換えました') // .text()でテキストを変更
    .css('color', 'crimson')          // .css()でスタイルを変更
})

// セレクタはCSSと同じ書式で指定できる（ID・クラス・タグ名など）
$('.item').addClass('active')
$('#title').css({ fontWeight: 'bold', fontSize: '20px' })

$('#btn') で要素を取得し、.on('click', ...) でイベントを登録、.text() や .css() を続けて書くだけで見た目を変えられます。このメソッドチェーンの書きやすさが、jQueryが長年支持されてきた理由のひとつです。サンプル内の .text('テキストを書き換えました') の文字列や .css('color', 'crimson') の色コードを書き換えると、クリック後に表示される内容や色がそのまま変わりますので、ぜひ試してみてください。

実践的なユースケース

jQueryのイベントデリゲーションで動的要素にも対応する

あとから append() などで追加した要素には、通常はイベントが効きません。jQueryでは、親要素に .on('click', 'li', handler) のように子要素のセレクタを指定してイベントを登録する「イベントデリゲーション（委譲）」を使うことで、動的に追加された要素にもクリックなどのイベントを効かせられます。

import $ from 'jquery'

let count = 1

$('#add').on('click', () => {
  count++
  $('#list').append(`<li>アイテム${count}</li>`)
})

// #listに登録しておけば、あとから追加されたliにもイベントが効く
$('#list').on('click', 'li', function () {
  $(this).toggleClass('done')
})

「アイテムを追加」で増やした項目をクリックしても、ちゃんと取り消し線が切り替わることを確認してみてください。$('#list').on('click', 'li', ...) の第2引数（デリゲート先セレクタ）を 'li.done' のように書き換えると、すでにチェック済みの項目だけにイベントを絞り込むといった応用もできます。

jQueryのslideToggleでアニメーションを動かす

jQueryには slideToggle() や fadeToggle() といったアニメーション用メソッドが標準で用意されており、CSSを書かなくても開閉やフェードの動きを付けられます。アコーディオンやドロップダウンのUIに便利です。

import $ from 'jquery'

$('#toggle').on('click', () => {
  $('#panel').slideToggle(300) // 300msかけて開閉をアニメーション
})

// フェードで表示・非表示を切り替えたい場合はfadeToggleを使う
$('#panel2').on('click', () => {
  $('#panel2').fadeToggle(300)
})

slideToggle(300) の引数（ミリ秒）を 800 のように大きくすると、開閉にかかる時間がゆっくりになります。フェードで切り替えたい場合は slideToggle() の代わりに fadeToggle() を呼ぶだけで、同じイベント登録の書き方のままアニメーションの種類を変えられます。

jQueryの独自プラグインを作成して再利用する

jQueryのエコシステムを支えてきたのが、$.fn にメソッドを追加して独自の機能をプラグイン化できる仕組みです。同じ処理を複数箇所で使い回したいときに役立ちます。

import $ from 'jquery'

$.fn.highlightOnHover = function (color = '#fff2a8') {
  return this.each(function () {
    const $el = $(this)
    $el.on('mouseenter', () => $el.css('background', color))
    $el.on('mouseleave', () => $el.css('background', ''))
  })
}

// 組み込みメソッドと同じ感覚で呼び出せる
$('.target').highlightOnHover()

$.fn.highlightOnHover として定義した処理を、通常の組み込みメソッドと同じように $('.target').highlightOnHover() と呼び出せるのがポイントです。highlightOnHover(color) の引数に別のカラーコード（例: '#d0f0ff'）を渡すと、ハイライトの色を自由に変更できます。$.fn に処理を追加してから this.each() で対象を操作する形は、他のプラグインを自作するときにもそのまま応用できます。

まとめ

jQueryは「古いライブラリ」というイメージを持たれがちですが、4.0.0では非推奨APIの整理やES modules化、Trusted Types対応といった地に足の着いたモダン化が進められています。セレクタによるシンプルなDOM操作、イベントデリゲーション、アニメーション、プラグインによる拡張性は、20年経った今でも十分実用的です。

すでにjQueryを使ったプロジェクトを保守している方は、まずは4.0.0へのアップグレードガイドを確認してみてください。これから触れる方も、シンプルなAPIから気軽に試してみてはいかがでしょうか。