jQuery

なぜ生まれた？: 要素を探してイベントを付けるだけでも、ブラウザごとに書き分ける長いコードが要った。
何を解決した？: CSS のセレクタで要素をまとめて選び、操作を続けて書ける `$()` を約10KBで配った。
何を残した？: ブラウザが同じ機能を標準で備えていくなか、ページに組み込んだ古い版を更新する手間が残った。

登場: 2006年1月
作者: John Resig
状態: 現役

jQuery が生まれる前

なぜ JavaScript があるのに、ライブラリが要ったのか

2005年、ページに動きを付けるには、ブラウザに入った JavaScript で HTML の要素を探し、1つずつイベントを付けて回る必要がありました。同じ「クリックされたら関数を呼ぶ」でも、Mozilla 系のブラウザは addEventListener、Internet Explorer は attachEvent と入り口が違います。ブラウザの違いを調べて公開していた QuirksMode のブログは2005年8月30日、この2つを同じものと考えてはいけないとし、“They are subtly but annoyingly different, and this difference can form a stumbling block for the unwary web developer.”（微妙だが厄介な違いがあり、それが不用心な開発者のつまずきの石になる）と書きました。特に、呼ばれた関数の中の this が何を指すかが違いました。裏でサーバーと通信する Ajax の作り方が2005年2月に名前を得て広まりはじめましたが、その通信の部品も、Internet Explorer とほかのブラウザで作り方が違いました。

こうした違いを関数にまとめたのが JavaScript のライブラリで、2005年には Behaviour などが使われていました。

Behaviour への不満

Behaviour は、CSS に似たセレクタで HTML の要素を指定し、そこに JavaScript の関数を結びつけるライブラリです。 2005年8月22日、のちに jQuery を作る John Resig は、自分のブログの「Selectors in Javascript」で、Behaviour を使ってきた感想を書いています。

“it simply seems too tedious and verbose for everyday use.” （毎日使うには、とにかく面倒で冗長に思える）

Resig が挙げた不満は3つです。#foo bar と #foo bar .baz のような階層のあるセレクタを、まとめて書けないこと。クリックなどのイベントを付けるのを楽にする仕組みが無いこと。書いたコードが長く、気軽に JavaScript を書く人を怖がらせそうなことです。 Behaviour の例は element.onclick に関数を代入していて、Resig はこれを、1つの要素に1つの関数しか付けられず、後から付けたものが前のものを上書きするので適切でない、とも書いています。

なぜ `$()` に CSS のセレクタを渡して要素を選ぶ書き方だったのか

セレクタで要素を選ぶ考え方そのものは、Behaviour がすでに持っていました。 Resig が変えようとしたのは書き方です。同じ記事で Resig は、Behaviour のコードと自分の案を並べています。Behaviour では Behaviour.register({ ... }) にセレクタと関数の組を書き、関数の中で onclick に代入します。案は次の形でした。

$('#example li').bind('click', function () {
  this.parentNode.removeChild(this);
});

$() に CSS のセレクタを渡して要素の組を受け取り、そこにメソッドを続けて呼びます。Resig は本筋と関係の無い記号を両方から抜き出して並べ、案のほうが少ないことを示しました。「jQuery は CSS のセレクタのために作られた」と言われることがありますが、本人の記録で出発点に見えるのは、セレクタを使うライブラリが、毎日使うには長すぎたという不満です。

誕生

当時の Resig は学生で、卒業までに自分の会社を軌道に乗せたいと話していました。 2006年1月、ニューヨークの BarCampNYC で、Resig はいくつかの自作のサービスを紹介した最後に jQuery を発表します。16日のブログの報告にはこうあります。

“Finally, I announced my second new release of the evening: jQuery: New Wave Javascript.” （最後に、その晩2つめの新しいリリースとして jQuery: New Wave Javascript を発表した）

発表の日は、この報告では日曜日の枠、2026年の jQuery 4.0.0 の公式記事では2006年1月14日で、1つに決められません。この記事は BarCampNYC での発表の2006年1月を登場としています。名前は、はじめ JSelect にするつもりが、ドメイン名が取られていたので jQuery にした、と Resig は同じ投稿へのコメントで答えています。

2006年2月の jquery.com は、jQuery を次のように紹介していました。

“It is not a huge, bloated, framework promising the best in AJAX” （巨大で膨れ上がった、Ajax の最良を約束するフレームワークではない）

掲げた標語は “Writing Javascript code should be fun.”（JavaScript のコードを書くのは楽しくあるべきだ）です。要点として、CSS 1〜3 と基本的な XPath のセレクタに対応すること、大きさが約10KBであること、Internet Explorer・Firefox・Safari・Opera で動くことを挙げています。

2006年6月30日の 1.0 の alpha（jquery-1.0a）のリリースノートには、通信の関数 $.xml() を $.ajax() に改めたことや、通信の始まりと終わりで「読み込み中」の表示を出し入れできる ajaxStart・ajaxStop が並びます。ページにすでに別の $() 関数があるときの対応を、それまでの Prototype だけを探す形から、どの $ 関数にも効く形に改めたことも書かれています。

1.0 は2006年8月26日に公開されました。Resig は告知の追記に、こう書いています。

“jQuery 1.0 has been released nearly one year after it was first conceived as a post in my weblog.” （jQuery 1.0 は、ブログの1本の記事として思いついてから、ほぼ1年で公開された）

コードで見る違い

よくある質問の一覧（#faq の中の dt）で、質問をクリックするたびに open というクラスを付けたり外したりする処理で比べます。どちらもこの記事のための作例です。

function addEvent(el, type, fn) {
  if (el.addEventListener) {
    el.addEventListener(type, fn, false);
  } else if (el.attachEvent) {
    // attachEvent では this が要素を指さないので、要素を this にして呼び直す
    el.attachEvent('on' + type, function () { fn.call(el); });
  }
}
window.onload = function () {
  var items = document.getElementById('faq').getElementsByTagName('dt');
  for (var i = 0; i < items.length; i++) {
    addEvent(items[i], 'click', function () {
      var re = /(^|\s)open(\s|$)/;
      if (re.test(this.className)) {
        this.className = this.className.replace(re, ' ');
      } else {
        this.className += ' open';
      }
    });
  }
};

$(document).ready(function () {
  $('#faq dt').toggle(function () {
    $(this).addClass('open');
  }, function () {
    $(this).removeClass('open');
  });
});

toggle は、1.0 の alpha のリリースノートにある、クリックのたびに2つの関数を交互に呼ぶメソッドです。 ブラウザごとの分岐と要素を回るループが消え、「どの要素に」をセレクタ1つで、「何をするか」を続けて書けます。

なぜ広まったのか

なぜ Prototype などがすでにあったのに、jQuery が広まったのか

広まった理由を数字で示した資料は見つけられませんでした。確かめられる出来事を並べます。

まず、2006年2月の時点で約10KB、主要な4つのブラウザで動くと案内していた小ささと対応の広さです。

次に、配る仕組みです。2008年5月、Google は AJAX Libraries API で、jQuery・Prototype・script.aculo.us・MooTools・Dojo を自社の CDN から配信しはじめました。説明のページは “Once we host a release of a given library, we are committed to hosting that release indefinitely.”（あるライブラリのある版を一度置いたら、無期限に置き続けると約束する）と書いています。ただし、同じ配信は Prototype なども受けていました。「Google の CDN が jQuery を広めた」とまでは、資料からは言えません。

速さにも手が入りました。2009年1月14日の jQuery 1.3 は、“Sizzle” という愛称の新しいセレクタエンジンを入れ、前のエンジンより約49%速いと書いています。

フレームワークの既定にもなりました。Ruby on Rails 3.1 のリリースノートは、jQuery を同梱する既定の JavaScript ライブラリとし、Prototype を使う人も簡単に切り替えられると添えています。

個人のコードから、財団のプロジェクトへ

1.3 と同じ日、Resig は jQuery のプロジェクトの所有権を “a foundation-type organization”（財団の形の組織）に移すと発表しました。著作権は Software Freedom Conservancy に移し、Sizzle は Dojo Foundation に預けています。報道によれば、jQuery Foundation は2016年に JS Foundation へと衣替えし、2019年3月には Node.js Foundation と合わさって OpenJS Foundation になりました。2009年からは、作った個人ではなく組織がプロジェクトを持つ形になりました。

残した課題と、次に来たもの

ブラウザが、セレクタで要素を選べるようになる

jQuery の発表から4か月後の2006年5月25日、W3C は Selectors API の最初の Working Draft を出しました。CSS のセレクタを渡して、合う要素を受け取るメソッドを定める仕様です。この草案でのメソッドの名前は match と matchAll で、2013年2月21日の勧告では querySelector と querySelectorAll になっています。 2009年1月の jQuery 1.3 のリリースノートは、querySelectorAll を持つブラウザとして Safari、Firefox 3.5 以降、Opera 10 以降、Internet Explorer 8 以降を挙げています。

jQuery が $() で包んでいた「セレクタで選ぶ」ことの一部を、ブラウザが標準で持つようになりました。

古い版と、次の作り方

jQuery は、ページの中の要素を選んで書き換える道具です。画面の大部分を JavaScript で組み立てる作り方には、のちに Backbone.js、AngularJS、React や SPA が出てきます（別の記事で扱います）。

一方、jQuery を組み込んだページは、版を上げないまま動き続けることがあります。2026年10月29日の W3Techs では、jQuery を使うサイトの 17.0% がまだ版 1 系でした。 2026年1月17日の 4.0.0 は、非推奨にしていた jQuery.isArray や jQuery.parseJSON などを削り、Internet Explorer 10 以前を対象から外しました（Internet Explorer 11 は残しています）。非推奨の API を削る変更は、古い書き方のまま動いているページが版を上げるときの手間にもなります。

2026年10月時点の立ち位置

2026年10月時点で最新の版は、2026年1月17日に公開された 4.0.0 です（npm の latest も 4.0.0。10月29日に確かめた）。公式の記事は “Now, 20 years later”（20年たったいま）と書き出し、“Happy 20th Birthday jQuery!” で締めくくっています。

jQuery は本当に「もう使われていない」のか

指標	数字	出典
すべての Web サイトのうち jQuery を使う割合	64.3%	W3Techs（2026年10月29日）
JavaScript のライブラリがわかるサイトのうち jQuery を使う割合	85.4%	W3Techs（2026年10月29日）
jQuery を使うサイトの版（3 / 1 / 2）	78.8% / 17.0% / 4.2%	W3Techs（2026年10月29日）
この1年に jQuery で本格的な開発をした回答者（全回答者）	23.4%	Stack Overflow Developer Survey 2025

Stack Overflow の同じ表では、Node.js（48.7%）、React（44.7%）に次ぐ3番目でした。 開発者の調査では3番目ですが、動いている Web サイトでは、2026年10月の W3Techs の集計で、JavaScript のライブラリの中で最も多く使われています。

まとめ

2005年、要素にイベントを付けるにもブラウザごとの書き分けが要り、セレクタを使う Behaviour も、Resig には毎日使うには冗長すぎました。
Resig は $() に CSS のセレクタを渡して要素の組を選び、操作を続けて書く形を考え、2006年1月に jQuery を発表しました。1.0 は同じ年の8月26日です。
約10KBで主要なブラウザに対応し、Google の CDN での配信、Rails 3.1 の既定への採用、財団への移管が続きました。
ブラウザが querySelectorAll を標準で備えていき、4.0.0 は古い API と古い Internet Explorer への対応を削りました。ページに残る古い版の更新は課題として残っています。
2026年10月時点で最新は 4.0.0 です。W3Techs ではサイトの 64.3% が使い、Stack Overflow の2025年の調査では回答者の 23.4% がこの1年に開発で使っています。

年表

2005年8月22日
John Resig がブログに「Selectors in Javascript」を書き、Behaviour への不満と `$()` を使う書き方の案を示す johnresig.com
2006年1月
Resig がニューヨークの BarCampNYC で jQuery を発表する johnresig.com
2006年5月25日
W3C が、セレクタで要素を取り出すメソッドを定める Selectors API の最初の Working Draft を出す w3.org
2006年6月30日
jQuery 1.0 の alpha（jquery-1.0a）が公開される。`$.xml()` は `$.ajax()` に改名された blog.jquery.com
2006年8月26日
jQuery 1.0 が公開される blog.jquery.com
2008年5月
Google が AJAX Libraries API で、jQuery・Prototype・MooTools・Dojo などを自社の CDN から配信しはじめる simonwillison.net
2009年1月14日
jQuery 1.3 が新しいセレクタエンジン Sizzle とともに公開され、プロジェクトを財団の形の組織に移すと発表される blog.jquery.com
2013年2月21日
Selectors API が W3C の勧告（Recommendation）になる w3.org
2026年1月17日
jQuery 4.0.0 が公開される。Internet Explorer 10 以前を対象から外す blog.jquery.com

系譜

前

土台JavaScript1995年9月18日
影響元CSS準備中

後

答えReact2013年5月29日

この技術が出てくる物語

サーバーとブラウザの振り子

同時代の出来事

2005年2月18日Ajax
2006年3月14日Amazon Web Services が Amazon S3 を公開 press.aboutamazon.com

出典

一次Selectors in Javascript（John Resig, 2005-08-22） johnresig.com 保存版
一次BarCampNYC Wrap-up（John Resig, 2006-01-16） johnresig.com 保存版
一次jQuery: New Wave Javascript（jquery.com、2006年2月時点） jquery.com 保存版
一次jQuery 1.0 – Alpha Release（Official jQuery Blog, 2006-06-30） blog.jquery.com
一次jQuery 1.0（Official jQuery Blog, 2006-08-26） blog.jquery.com 保存版
一次AJAX Libraries API（Google Code、2008年6月時点） code.google.com 保存版
一次jQuery 1.3 Released（Official jQuery Blog, 2009-01-14） blog.jquery.com
一次jQuery 1.3 and the jQuery Foundation（Official jQuery Blog, 2009-01-14） blog.jquery.com
一次Ruby on Rails 3.1 Release Notes guides.rubyonrails.org
一次jQuery 4.0.0（Official jQuery Blog, 2026-01-17） blog.jquery.com
一次npm registry（jquery） registry.npmjs.org
一次Selectors API（W3C Working Draft, 2006-05-25） w3.org
一次Selectors API Level 1（W3C Recommendation, 2013-02-21） w3.org
二次addEvent() considered harmful（QuirksMode, 2005-08-30） quirksmode.org
二次Google AJAX Libraries API（Simon Willison, 2008-05-27） simonwillison.net
二次JavaScript projects regroup under a new foundation（InfoWorld, 2016-10-17） infoworld.com
二次Node.js FoundationとJS Foundationが統合、OpenJS Foundation結成（マイナビニュース, 2019-03-13） news.mynavi.jp
二次Usage statistics and market share of jQuery for websites（W3Techs, 2026-10-29） w3techs.com
二次Stack Overflow Developer Survey 2025（Technology） survey.stackoverflow.co