この記事の要点

jQuery は 2006 年リリースの古典的 JavaScript ライブラリ。記法 $(...) で DOM 操作 / Ajax / アニメを統一 現バージョン 3.7.x (2024 時点)。Slim 版 / Compat 版 / Migrate プラグインが存在 かつての主目的はブラウザ互換性吸収。IE11 EOL で必要性は激減 jQuery UI / jQuery Mobile は事実上 EOL、現代は React / Vue / Alpine.js が後継 レガシー WordPress / Rails / 業務システムでは依然現役。学ぶ価値はある

jQuery とは

jQuery (ジェイクエリ) は John Resig 氏が 2006 年に公開した JavaScript ライブラリで、「Write less, do more.」を標語に DOM 操作・イベント・Ajax・アニメーションの記述を劇的に短縮することを目的としています。

2010 年前後の Web 開発では事実上の標準ライブラリでしたが、ブラウザ標準 API の充実と React / Vue 等のフレームワーク台頭により、新規プロジェクトでの採用は減少しています。それでもなお、WordPress プラグイン / 古い業務システム / レガシー Rails アプリ等で広く使われており、保守要員としては読み書きできる必要があります。

歴史と現状

年	バージョン	主な変更
2006	1.0	初リリース (John Resig)
2011	1.7	.on() / .off() 導入
2013	2.0	IE6-8 サポート廃止
2016	3.0	Promise/A+ 準拠、ES2015 対応
2020	3.5	セキュリティ強化 (XSS)
2023	3.7	IE 完全廃止検討
2024+	3.7.x	メンテナンスモード

jQuery の特徴

1. シンプルなセレクタ

// CSS セレクタがそのまま使える
$('#header');                       // ID
$('.btn');                          // クラス
$('a[href^="https"]');              // 属性セレクタ
$('li:nth-child(odd)');             // 擬似クラス
$('div').find('p').first();         // メソッドチェーン

2. ブラウザ互換性吸収

これが歴史的に最大の価値でした。当時 IE6 / IE7 / IE8 と Firefox / Chrome で挙動が異なる DOM API を、jQuery が統一してくれました。

// IE と他ブラウザの違いを意識せず使えた
$(el).on('click', handler);
// 内部で IE の attachEvent / 他の addEventListener を吸収

// Ajax も同じ
$.ajax({ url: '/api', success: fn });
// IE の ActiveXObject('Microsoft.XMLHTTP') / XMLHttpRequest を吸収

3. メソッドチェーン

$('#menu')
  .addClass('active')
  .css('color', 'red')
  .find('li')
  .each(function() {
    $(this).text($(this).text().toUpperCase());
  });

4. Ajax のシンプル化

$.get('/api/users', function(data) {
  console.log(data);
});

$.post('/api/users', { name: 'tanaka' }, function(res) {
  console.log(res);
});

$.ajax({
  url: '/api/posts',
  method: 'PUT',
  data: JSON.stringify({ title: 'X' }),
  contentType: 'application/json',
  success: function(res) {},
  error: function(xhr) {}
});

バージョンと配布形態

名称	サイズ	説明
Standard	~85KB (min)	全機能
Slim	~71KB (min)	Ajax / effects / deprecated 除外。Bootstrap 5 が採用
jQuery 1.x	~95KB	IE6-8 互換用 (古いシステム保守)
jQuery 2.x	~84KB	IE9+。サポート終了
jQuery 3.x	~85KB	現行
jQuery Migrate	~7KB	非推奨 API を補完するプラグイン

関連プロジェクト

• jQuery UI — datepicker / draggable / dialog / tabs などの UI コンポーネント。2021 以降メンテのみ
• jQuery Mobile — モバイル向け UI フレームワーク。2021 年に EOL 宣言
• QUnit — jQuery チームが作ったテストフレームワーク
• Sizzle — jQuery 内部のセレクタエンジン

現代の代替

用途	代替
DOM 操作	Vanilla JS (querySelector / classList)
Ajax	fetch() / Axios
アニメーション	CSS transition / Animate API / GSAP
SPA	React / Vue / Svelte
軽量インタラクション	Alpine.js / Stimulus / htmx
UI コンポーネント	Bootstrap / Tailwind UI / shadcn/ui

jQuery でやりたいことを Vanilla JS で書く

// jQuery
$('#btn').on('click', function() {
  $(this).addClass('active');
  $.get('/api/data', function(res) {
    $('#result').html(res.html);
  });
});

// Vanilla JS
document.querySelector('#btn').addEventListener('click', async function() {
  this.classList.add('active');
  const res = await fetch('/api/data').then(r => r.json());
  document.querySelector('#result').innerHTML = res.html;
});

jQuery を今でも学ぶべきか

• 新規開発に採用するか: しないほうがよい。Vanilla JS / Alpine.js / Vue 等で十分
• 読み書きできるべきか: Yes。WordPress / 既存業務システム保守で必須レベル
• Bootstrap 5 から不要に: Bootstrap 5 は jQuery 依存を廃止。Vanilla JS 化
• WordPress テーマ / プラグイン: wp_enqueue_script("jquery") で同梱、現役

FAQ

Q: $ が他のライブラリと衝突する
A: jQuery.noConflict() を呼ぶと $ が解放される。以後は jQuery(...) または const $j = jQuery.noConflict(true); で別名。

Q: jQuery 1.x / 2.x はまだ使える？
A: 動きますがセキュリティ更新が止まっているので新規導入は避ける。XSS 修正のため最低 3.5+ を推奨。

Q: React と jQuery を併用できる？
A: 技術的には可能ですが React の仮想 DOM と jQuery の直接 DOM 操作が競合してバグの温床になる。基本は併用しない。