「ホームページ制作にjQueryはまだ使っていいのか」。Web制作を学び始めた人からも、昔からサイトを運用している人からも、よく聞かれる質問です。職業訓練でjQueryを習った私自身、同じことを何度も考えました。
結論から言うと、新しく作るサイトでjQueryを選ぶ理由はほとんどなくなりましたが、「使われているサイト」は今も圧倒的に多く、読める・直せる力は当分必要です。この記事では、jQueryが果たした役割、2026年の現状(データと4.0のリリース)、使い続ける場合の注意点、これから学ぶ人が何をすべきかを整理します。
CONTENTS目次
jQueryとは:ブラウザの差を吸収してくれた立役者
jQueryは2006年に公開されたJavaScriptのライブラリです。目的は「ブラウザごとの違いを気にせず、短いコードでJavaScriptを書けるようにする」ことでした。
当時はInternet ExplorerとFirefoxとで要素の取得方法やイベントの書き方が違い、開発者は同じ処理を何通りも書く必要がありました。jQueryはその差を内部で吸収し、$('.btn').on('click', ...) のような短い書き方を提供したことで、一気に標準になりました。「JavaScriptを書くならjQuery」と言われた時代が10年以上続きます。
今のJavaScriptは、jQueryなしで同じことが書ける
状況を変えたのは、ブラウザ側の進化です。2015年のES2015(ES6)以降、JavaScriptの標準機能が充実し、jQueryの便利機能の多くが「素のJavaScript」で簡潔に書けるようになりました。
| やりたいこと | jQuery | 素のJavaScript |
|---|---|---|
| 要素の取得 | $('.item') |
document.querySelectorAll('.item') |
| クリックイベント | $('.btn').on('click', fn) |
document.querySelector('.btn').addEventListener('click', fn) |
| クラスの付け外し | $(el).toggleClass('open') |
el.classList.toggle('open') |
| 通信(Ajax) | $.ajax({ url: '/api' }) |
fetch('/api').then(res => res.json()) |
| フェードイン・スライド | $(el).fadeIn() |
CSSの transition とクラスの切り替え |
たとえば「ボタンを押したらメニューを開閉する」処理は、jQueryなしで次のように書けます。
// jQuery
$('.menu-btn').on('click', function () {
$('.menu').toggleClass('is-open');
});
// 素のJavaScript
document.querySelector('.menu-btn').addEventListener('click', () => {
document.querySelector('.menu').classList.toggle('is-open');
});
つまり、「昔はjQueryでしか書けなかったこと」が、今はブラウザの標準機能だけでできるようになったのです。
2026年のjQuery:まだ使われている、そして4.0が出た
使われている割合は今も大きい
「jQueryはもう終わった」と言われて久しいですが、データを見ると印象が変わります。Web技術の統計サイトW3Techsによると、2026年10月時点で全Webサイトの約65%がjQueryを使っており、JavaScriptライブラリを使っているサイトの中では約86%を占めています(W3Techs: Usage statistics of jQuery)。新規サイトで選ばれなくなっても、既に動いているサイトの数が桁違いに多いためです。
WordPressには今も同梱されている
WordPressは本体にjQuery(執筆時点では3.7.1)を同梱しており、多くのテーマやプラグインが今も依存しています。WordPressでサイトを作る限り、自分では書かなくてもjQueryは読み込まれていることが多い、というのが実情です。
約10年ぶりのメジャーバージョン、jQuery 4.0
2026年1月17日に、約10年ぶりのメジャーバージョンとなるjQuery 4.0.0がリリースされました。Internet Explorer 10以前や旧Edgeなど古いブラウザのサポートを打ち切り、ファイルサイズを削り、内部を現代的に書き直したバージョンです。IE11のサポートは残っていますが、次の5.0で終了する予定とされています。
これは「jQueryはまだ保守されている」というメッセージである一方、「古い環境のためのライブラリから、現代のブラウザ前提のライブラリに変わった」ということでもあります。古いプラグインがそのまま動くとは限らないので、既存サイトで安易にバージョンを上げるのは危険です。
それでもjQueryを使う場面
1. 既存サイトの保守
企業のコーポレートサイトや官公庁サイトには、10年以上前に作られたものが多く、jQueryが深く組み込まれています。改修のたびにすべてを書き換えるのは現実的ではなく、既存コードとの互換性を保ちながら使い続けるのは理にかなっています。Web制作の仕事を始めると、こうした保守案件は想像以上に多いです。
2. WordPressのテーマやプラグインとの互換性
前述のとおり、WordPressではテーマやプラグインがjQueryに依存していることがよくあります。この場合、自分のコードだけjQueryを排除しても読み込みは減らないので、「すでに読み込まれているなら使う」という判断もあり得ます。
3. 小規模サイトで、プラグインを使ってすぐ動きを付けたい
数ページの小さなサイトで、スライドショーやアコーディオンをすぐ付けたいとき、「jQuery+実績のあるプラグイン」は今も手早い選択肢です。ただし、同じことができるjQuery不要のライブラリ(スライダーならSwiperなど)も増えているので、まずそちらを探すことをおすすめします。
jQueryを新規で使うデメリット
1. ファイルサイズ
jQuery本体は、圧縮版でも約90KB(通信時のgzip圧縮後で約30KB)あります。小さなサイトでメニューの開閉にしか使わないなら、そのためだけに読み込むには大きいファイルです。表示速度の指標であるCore Web Vitals(特にLCPと、2024年にFIDに代わって正式指標となったINP)にも影響し得ます。
2. 保守性
現在のJavaScriptはモジュールやクラス構文で処理を分けて書くのが主流です。jQueryのコードは1つのファイルにイベント処理を書き連ねる形になりがちで、規模が大きくなると「どこで何をしているか」が追いにくくなります。
3. 古いプラグインへの依存
jQuery本体は保守されていますが、その上で動く無数のプラグインの多くは更新が止まっています。ブラウザの仕様変更やjQuery本体のバージョンアップで動かなくなる例は実際に増えています。外部ライブラリに頼るほど、その更新リスクを引き受けることになります。
ReactやVueとは併用しない
今のWebアプリ開発では、React、Vue.js、Next.js、Svelteといったフレームワークが主流です。これらは「画面の状態を管理し、状態に応じてDOMを自動で描き直す」仕組みで動いています。
一方、jQueryは「DOMを直接書き換える」道具です。両者を同じ画面で混ぜると、フレームワークが描き直したタイミングでjQueryの変更が消えたり、逆にフレームワークの管理外の変更で表示が壊れたりします。基本的に併用は避け、フレームワークを使うならその流儀で書きます。
それでも使う場合の3つのルール
- 読み込む場所を限定する:すべてのページで読み込まず、必要なページだけにする
- バージョンを固定する:1系・2系・3系・4系で動作が違う。使うバージョンを明記し、むやみに上げない。特に3系から4系への移行は、プラグインの対応状況を確認してから
- 将来の置き換えを前提にする:「一時的な利用」と割り切り、HTMLの構造はjQueryがなくても成り立つように整理しておく
結論:jQueryは「必須ではない」が「読めないと困る」
| 観点 | 評価 |
|---|---|
| 学習コスト | 低い。初心者にも分かりやすい |
| 新規サイトでの必要性 | 低い。素のJavaScriptで同じことが書ける |
| 既存サイトでの遭遇率 | 非常に高い。全サイトの約65%が使用 |
| モダンなフレームワークとの相性 | 悪い。併用しない |
| 保守の継続性 | 本体は継続(2026年に4.0)。プラグインは要注意 |
まとめると、新規サイトでは積極的に使う理由はないが、保守案件やWordPressでは今も現役。「書けなくてもいいが、読めて直せる」状態にしておくのが現実的です。
これから学ぶなら何から?
これからWeb制作を始める人には、次の順番をおすすめします。
- 素のJavaScript(Vanilla JS):要素の取得、イベント、クラスの切り替え、fetch。ここが土台で、jQueryもReactもこの上に乗っている
- jQueryは「読める」程度に:上の対応表が頭に入っていれば、既存コードを読んで素のJavaScriptに置き換えられる。保守案件で困らない
- フレームワーク(React / Vue / Svelte など):動的なUIやWebアプリを作る段階で。状態管理とコンポーネントの考え方を学ぶ
- ビルド環境(Vite / Next.js など):現場の開発フローに合わせる段階で
AIにコードを書いてもらえる時代になりましたが、AIはjQueryのコードも素のJavaScriptも混ぜて出してきます。どちらで書かれているか見分け、どちらにすべきか判断するのは人間の仕事です。その判断力は、1の土台があって初めて身につきます。
まとめ
- jQueryはブラウザ間の差を吸収した功労者。その役割は、ブラウザの進化でほぼ終わった
- 2026年10月時点でも全サイトの約65%が使用。WordPressにも同梱。既存サイトでの遭遇率は非常に高い
- 2026年1月に約10年ぶりの4.0がリリース。保守は続くが、古いブラウザ向けではなくなった
- 新規サイトでは使わない。保守案件・WordPressでは「読めて直せる」力が必要
- 学ぶ順番は、素のJavaScript → jQueryは読める程度 → フレームワーク
ツールは流行ではなく、目的で選ぶものです。「何を使うか」より「なぜ使うか」を自分の言葉で説明できることが、2026年のWeb制作では求められています。
前回はWebデザインのコンテンツ幅はどう決める?、次回はPCはMac?Windows?実際に使って感じたメリット・デメリットです。連載の全体像は第1回「HTML・CSSはどこで習う?」の末尾にある一覧からたどれます。
参考
- W3Techs: Usage statistics of jQuery for websites(2026年10月閲覧)
- jQuery 公式ブログ(4.0.0 のリリース情報)
- MDN Web Docs(素のJavaScriptのリファレンス)
- web.dev: Core Web Vitals



