jQueryとは｜使い方・Ajax・fetchとの対応表を4.0の実行結果で解説

jQuery は「セレクターで要素を選び、メソッドで操作する」ライブラリです。クリックなどのイベントを受けて Ajax でサーバーと通信し、受け取ったデータでページの一部を書き換える、という流れを短く書けます。

flowchart TD
    A[セレクターで<br>要素を選ぶ] --> B[イベントを受ける<br>クリック・入力]
    B --> C[Ajax で<br>サーバーと通信]
    C --> D[受けた JSON で<br>ページの一部を更新]
    A --> E[DOM 操作<br>文字・クラス・CSS]
    D --> E

よく使う書き方と、同じことを素の JavaScript で書く方法を先にまとめます。

やりたいこと	jQuery	素の JavaScript
要素を選ぶ	$('.item')	document.querySelectorAll('.item')
読み込み後に実行	$(function () { … })	<script defer> か DOMContentLoaded
クリックを受ける	$('#btn').on('click', fn)	btn.addEventListener('click', fn)
文字を入れる	$('#r').text('完了')	r.textContent = '完了'
クラスを付ける	.addClass('active')	.classList.add('active')
JSON を取る	$.getJSON(url)	fetch(url).then((r) => r.json())
フォーム形式で POST	$.post(url, { name })	fetch(url, { method: 'POST', body })
表示・非表示	.show() ／ .hide()	el.hidden = false ／ true
最新版	4.0.0（3.x はセキュリティ修正のみ）	―

確認環境：Ubuntu 24.04.4 LTS・Node.js 22.22.2・npm 10.9.7・Chromium 141.0.7390.37（playwright-core 1.56.1 から headless で操作）。jQuery 4.0.0（npm の latest）・jQuery 3.7.1・jQuery Migrate 4.0.2 を npm で入れ、Node.js で自作した擬似 API（同じオリジン・CORS なしの別オリジン・CORS ありの別オリジンの3つ）に向けて、この記事の jQuery と fetch のコードをすべてブラウザの中で実行し、出力と、擬似 API が受け取ったリクエスト（メソッド・URL・ヘッダー・本文）を記録しました。ファイルサイズは npm のパッケージの dist を測りました。最新版・CDN の URL・4.0 の変更点・サポートの状況は jquery.com（ダウンロード・アップグレードガイド・サポート）・jQuery 公式ブログ・api.jquery.com、Ajax の定義は MDN、利用率は W3Techs で確かめました（確認日 2026年10月22日）。

jQueryとは（読み方・できること・今も使われているか）

この節では、jQuery が何をするライブラリで、今どれくらい使われているかが分かります。

jQuery（読み方：ジェイクエリー）は、HTML の要素の操作・イベント・アニメーション・Ajax 通信を、短いコードで書けるようにする JavaScript のライブラリです。 2006年1月に John Resig が公開しました。今は OpenJS Foundation のプロジェクトで、ライセンスは MIT です（npm のパッケージの LICENSE.txt で確認）。

jQuery の書き方の基本は、$(セレクター).メソッド() の1つだけです。$ は jQuery という関数の別名で、$ === jQuery は true でした。

jQueryは今も使われているか

W3Techs の調査（2026年10月22日時点）では、jQuery は全 Web サイトの 64.5%、JavaScript ライブラリが分かるサイトの 85.5% で使われています。使われている版は 3 系が 78.8%、1 系が 17.0%、2 系が 4.2% でした。WordPress のテーマ・プラグインや、以前から運用している業務システムの画面で多く使われています。

一方で、jQuery が登場したころにブラウザごとに違っていた機能は、今は標準の JavaScript でそろっています（querySelector・classList・fetch・element.animate() など）。新しく作る画面では素の JavaScript か React・Vue などで書き、今ある jQuery のコードは読めて直せるようにしておく、という扱いが多くなっています。どちらの場面でも困らないように、この記事では jQuery の書き方と、同じ処理の素の JavaScript を並べて載せます。

jQueryの読み込み方（CDN・npm・ダウンロード）

この節では、jQuery をページに読み込む3つの方法と、正しく読み込めたかの確かめ方が分かります。

CDNで読み込む（いちばん手軽）

jquery.com のダウンロードページにある、公式の CDN（code.jquery.com）の URL です（2026年10月22日時点）。

ファイル	URL	中身
圧縮版（本番用）	https://code.jquery.com/jquery-4.0.0.min.js	全部入り
非圧縮版（開発用）	https://code.jquery.com/jquery-4.0.0.js	全部入り・読める形
slim 圧縮版	https://code.jquery.com/jquery-4.0.0.slim.min.js	Ajax・エフェクト・Deferred なし
3 系の最終版	https://code.jquery.com/jquery-3.7.1.min.js	3 系を使い続ける場合

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>jQuery の例</title>
  <!-- jQuery を先に読み込み、自分のコードは後に置く -->
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script src="app.js" defer></script>
</head>
<body>
  <button id="btn">送信</button>
  <p id="result"></p>
</body>
</html>

integrity（SRI）属性付きの script タグは、releases.jquery.com で版を選ぶと表示されます。手元のファイルから SRI の値を計算するコマンドと、npm の jquery@4.0.0 の dist/jquery.min.js で計算した結果です。releases.jquery.com の値と見比べて使います。

openssl dgst -sha384 -binary jquery.min.js | openssl base64 -A

fgGyf7Mo7DURSOMnOy7ed+dkq5Job205Gnzu6QIg0BOHKaqt4D76Dt8VlDCzcMHV

npmで入れる（ビルドの仕組みがあるとき）

npm install jquery

// バンドラー（Vite・webpack など）や ES モジュール
import $ from 'jquery';
$('#result').text('ok');

4.0.0 のパッケージは、package.json の exports で読み込み先を分けています。

読み込む名前	中身	使う場面
jquery	全部入り	ふだんはこれ
jquery/slim	slim 版	Ajax・エフェクトを使わない
jquery/factory	window を渡して作る形	Node.js で jsdom と使う
jquery/factory-slim	上の slim 版	同上

ブラウザの <script type="module"> で、パッケージの dist-module/jquery.module.js を import しても動きました。ES モジュールで読み込むと、window.$ と window.jQuery は作られません（どちらも typeof が undefined）。プラグインなど、グローバルの $ を前提にしたコードと組み合わせるときは注意が要ります。

ESM 4.0.0 | window.$: undefined | window.jQuery: undefined
ok

ファイルの大きさ（全部入りとslim）

npm の各版の dist を測りました（gzip は gzip -9 で圧縮した大きさ）。

ファイル	そのままの大きさ	gzip 後
jquery 3.7.1 jquery.min.js	87,533 バイト	30,209 バイト
jquery 3.7.1 jquery.slim.min.js	70,264 バイト	23,968 バイト
jquery 4.0.0 jquery.min.js	78,748 バイト	27,392 バイト
jquery 4.0.0 jquery.slim.min.js	56,032 バイト	19,369 バイト

4.0.0 の slim 版は Ajax・エフェクトに加えて Deferred も入っていません。 slim 版で $.ajax を呼ぶと、次のエラーになりました。

slim 4.0.0+slim | ajax: undefined | Deferred: undefined | fadeIn: undefined
TypeError: $.ajax is not a function

読み込めたかを確かめる

ブラウザの開発者ツール（F12）のコンソールで、次を打つと版が出ます。

console.log('jQuery', $.fn.jquery, '| $ === jQuery:', $ === jQuery);

jQuery 4.0.0 | $ === jQuery: true

jQueryの基本の書き方（$(function)・メソッドチェーン）

この節では、jQuery のコードをいつ動かすか、$ が何者かが分かります。

HTML の要素がそろってから動かすために、コードは $(function () { … }) の中に書きます。 $(document).ready(function () { … }) も同じ意味です。

$(function () { console.log('$(function) 実行 | readyState:', document.readyState); });
$(document).ready(function () { console.log('$(document).ready も動く'); });

$(function) 実行 | readyState: complete
$(document).ready も動く

メソッドは、操作した要素の集まり（jQuery オブジェクト）を返すので、. でつないで書けます（メソッドチェーン）。

$('#box').css('width', '200px').attr('data-x', '1').text('箱2');

$ を別のライブラリも使っている場合は、jQuery.noConflict() で $ を手放し、別の名前で使えます。

const j = jQuery.noConflict();
console.log('noConflict 後 typeof $:', typeof $, '| j.fn.jquery:', j.fn.jquery);

noConflict 後 typeof $: undefined | j.fn.jquery: 4.0.0

jQueryのセレクター早見表

この節では、要素の選び方と、素の JavaScript での書き方が分かります。

jQuery のセレクターは CSS のセレクターと同じ書き方です。 素の JavaScript では、1つなら querySelector、全部なら querySelectorAll を使います。

選びたいもの	jQuery	素の JavaScript
ID	$('#name')	document.querySelector('#name')
クラス（全部）	$('.item')	document.querySelectorAll('.item')
タグ	$('li')	document.querySelectorAll('li')
両方のクラスを持つ	$('.item.active')	querySelectorAll('.item.active')
子孫	$('#list li')	querySelectorAll('#list li')
属性	$('input[name="age"]')	querySelectorAll('input[name="age"]')
最初・最後	.first() ／ .last()	[0] ／ [...list].at(-1)
n 番目（0 から）	.eq(1)	list[1]
親・最も近い祖先	.parent() ／ .closest('ul')	.parentElement ／ .closest('ul')
子・中を探す	.children() ／ .find('li')	.children ／ .querySelectorAll('li')
兄弟	.next() ／ .prev() ／ .siblings()	.nextElementSibling ／ .previousElementSibling
絞り込む	.filter('.active')	[...list].filter((el) => el.matches('.active'))
件数	.length	.length

jQuery は、要素が見つからなくてもエラーにならず、何もしません（.length が 0）。素の querySelector は見つからないと null を返し、そのまま .textContent に代入すると次のエラーになりました。

TypeError: Cannot set properties of null (setting 'textContent')

jQueryのDOM操作早見表（取得・変更・追加・削除）

この節では、要素の中身・属性・クラス・CSS の変え方を、jQuery と素の JavaScript で同じ結果になることを確かめながら引けます。

同じ HTML（りんご・みかん（active）・ぶどう の3つの li、入力欄、箱）に対して、jQuery と素の JavaScript で同じ操作をしました。

// jQuery 4.0.0
console.log('件数', $('.item').length, '| 最初', $('.item').first().text(), '| active', $('.item.active').text());
$('#list').append('<li class="item">もも</li>');
$('.item').eq(0).addClass('active');
$('.item').last().remove();
$('#name').val('高橋');
$('#box').css('width', '200px').attr('data-x', '1').text('箱2');
console.log('val', $('#name').val(), '| width', $('#box').css('width'), '| data-x', $('#box').data('x'), '| hasClass', $('.item').eq(0).hasClass('active'));
console.log($('#list').html());
console.log($('.item').map(function () { return $(this).text(); }).get().join(','));

// 素の JavaScript
const items = document.querySelectorAll('.item');
console.log('件数', items.length, '| 最初', items[0].textContent, '| active', document.querySelector('.item.active').textContent);
document.querySelector('#list').insertAdjacentHTML('beforeend', '<li class="item">もも</li>');
document.querySelectorAll('.item')[0].classList.add('active');
[...document.querySelectorAll('.item')].at(-1).remove();
document.querySelector('#name').value = '高橋';
const box = document.querySelector('#box');
box.style.width = '200px';
box.setAttribute('data-x', '1');
box.textContent = '箱2';
console.log('val', document.querySelector('#name').value, '| width', getComputedStyle(box).width, '| data-x', box.dataset.x, '| hasClass', document.querySelectorAll('.item')[0].classList.contains('active'));
console.log(document.querySelector('#list').innerHTML);
console.log([...document.querySelectorAll('.item')].map((el) => el.textContent).join(','));

2つの出力は、1文字も違わず同じでした。

件数 3 | 最初 りんご | active みかん
val 高橋 | width 200px | data-x 1 | hasClass true
<li class="item active">りんご</li><li class="item active">みかん</li><li class="item">ぶどう</li>
りんご,みかん,ぶどう

jQuery は「選んだ全部」に一度に効き、素の JavaScript は1つずつ（または forEach で）操作する、というのが書き方のいちばん大きな違いです。

やりたいこと	jQuery	素の JavaScript
文字を取る・入れる	.text() ／ .text('…')	.textContent
HTML を取る・入れる	.html() ／ .html('…')	.innerHTML（後の XSS の節に注意）
入力値	.val() ／ .val('…')	.value
属性	.attr('href') ／ .attr('href', '…')	.getAttribute() ／ .setAttribute()
プロパティ	.prop('checked')	.checked
data 属性	.data('x')	.dataset.x
クラス	.addClass ／ .removeClass ／ .toggleClass	.classList.add ／ remove ／ toggle
クラスがあるか	.hasClass('active')	.classList.contains('active')
CSS	.css('width', '200px')	.style.width = '200px'
計算後の CSS	.css('width')	getComputedStyle(el).width
末尾・先頭に足す	.append() ／ .prepend()	.append() ／ .prepend()
前・後ろに足す	.before() ／ .after()	.before() ／ .after()
HTML の文字列を足す	.append('<li>…</li>')	.insertAdjacentHTML('beforeend', …)
消す・中を空にする	.remove() ／ .empty()	.remove() ／ .replaceChildren()
表示・非表示	.show() ／ .hide() ／ .toggle()	.hidden = false ／ true
全部に繰り返す	.each(function () { … })	.forEach((el) => { … })
配列にする	.map(…).get()	[...list].map(…)
フォームを送る形に	$('#f').serialize()	new URLSearchParams(new FormData(f))

細かな DOM の API を一覧で引きたいときは、関連記事「JavaScript DOM操作一覧｜querySelector〜イベント・コピペ可」で扱っています。

jQueryのイベント早見表（on・委譲・trigger・one）

この節では、クリックなどのイベントの受け方と、後から足した要素にも効く「委譲」の書き方が分かります。

イベントは .on('イベント名', 関数) で受けます。 第2引数にセレクターを書くと、親の要素で受けて、その中の該当する子のときだけ関数を動かす「イベントの委譲」になり、後から追加した要素にも効きます。

// jQuery
$('#list').on('click', '.item', function (e) {
  console.log('委譲 click:', $(this).text(), '| e.target === this:', e.target === this);
});
$('#btn').on('click', function () { console.log('btn click'); });
$('#list').append('<li class="item">もも</li>');
$('.item').last().trigger('click');
$('#btn').trigger('click');
$('#btn').off('click');
$('#btn').trigger('click');
$('#btn').one('click', () => console.log('one: 1回だけ'));
$('#btn').trigger('click').trigger('click');

// 素の JavaScript
document.querySelector('#list').addEventListener('click', (e) => {
  const li = e.target.closest('.item');
  if (!li) return;
  console.log('委譲 click:', li.textContent, '| e.target === li:', e.target === li);
});
const onBtn = () => console.log('btn click');
const btn = document.querySelector('#btn');
btn.addEventListener('click', onBtn);
document.querySelector('#list').insertAdjacentHTML('beforeend', '<li class="item">もも</li>');
[...document.querySelectorAll('.item')].at(-1).click();
btn.click();
btn.removeEventListener('click', onBtn);
btn.click();
btn.addEventListener('click', () => console.log('once: 1回だけ'), { once: true });
btn.click(); btn.click();

jQuery                                       素の JavaScript
委譲 click: もも | e.target === this: true     委譲 click: もも | e.target === li: true
btn click                                    btn click
one: 1回だけ                                  once: 1回だけ

どちらも、後から足した「もも」のクリックを受け、off（removeEventListener）の後の3回目のクリックでは何も出ず、one（{ once: true }）は2回押しても1回だけ動きました。素の JavaScript で外すときは、付けたときと同じ関数を渡す必要があるので、関数に名前を付けておきます。

やりたいこと	jQuery	素の JavaScript
受ける	.on('click', fn)	.addEventListener('click', fn)
委譲で受ける	.on('click', '.item', fn)	親で受けて e.target.closest('.item')
外す	.off('click')	.removeEventListener('click', fn)
1回だけ	.one('click', fn)	{ once: true }
発火させる	.trigger('click')	.click() ／ dispatchEvent(new Event('click'))
既定の動きを止める	e.preventDefault()	e.preventDefault()
親へ伝えない	e.stopPropagation()	e.stopPropagation()
入力が変わった	.on('input', fn) ／ .on('change', fn)	'input' ／ 'change'
送信	$('form').on('submit', fn)	form.addEventListener('submit', fn)

.click(fn) のような短縮形もありますが、.on() にそろえておくと、委譲や外す処理と書き方が統一できます。イベントの種類と委譲の詳しい書き方は、関連記事「addEventListenerの使い方｜イベント一覧と解除・イベント委譲」で扱っています。

jQueryのアニメーション早見表（fadeIn・slideUp・animate）

この節では、表示・非表示に動きを付けるメソッドと、素の JavaScript の element.animate() での書き方が分かります。

// jQuery
const t0 = performance.now();
$('#box').fadeOut(400, function () {
  console.log('fadeOut 完了', Math.round(performance.now() - t0), 'ms | display:', $(this).css('display'));
});
$('#name').animate({ width: 300 }, 300).promise().done(function () {
  console.log('animate 完了', Math.round(performance.now() - t0), 'ms | width:', $(this).css('width'));
});
$('#list').slideUp(200, function () { console.log('slideUp 完了 | display:', $(this).css('display')); });

slideUp 完了 | display: none
animate 完了 314 ms | width: 300px
fadeOut 完了 413 ms | display: none

// 素の JavaScript（Web Animations API）
const t0 = performance.now();
const box = document.querySelector('#box');
const a = box.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 400 });
a.finished.then(() => {
  box.style.display = 'none';
  console.log('fadeOut 相当 完了', Math.round(performance.now() - t0), 'ms | display:', getComputedStyle(box).display);
});
const name = document.querySelector('#name');
name.animate([{ width: getComputedStyle(name).width }, { width: '300px' }], { duration: 300, fill: 'forwards' })
  .finished.then(() => console.log('animate 相当 完了', Math.round(performance.now() - t0), 'ms | width:', getComputedStyle(name).width));

animate 相当 完了 307 ms | width: 300px
fadeOut 相当 完了 423 ms | display: none

jQuery の fadeOut は、終わると display: none まで自動で設定します。 element.animate() は見た目の変化だけなので、消すなら終わった後に自分で display を変えます。

やりたいこと	jQuery	素の JavaScript・CSS
ふわっと出す・消す	.fadeIn() ／ .fadeOut() ／ .fadeToggle()	el.animate([{ opacity: 0 }, { opacity: 1 }], 400)
上下に開く・閉じる	.slideDown() ／ .slideUp() ／ .slideToggle()	CSS の transition と高さ、または <details>
数値の CSS を動かす	.animate({ width: 300 }, 300)	el.animate([…], { duration: 300, fill: 'forwards' })
止める	.stop()	animation.cancel() ／ finish()
終わった後に	完了のコールバック・.promise()	animation.finished.then(…)
速さの指定	'slow'（600ms）・'fast'（200ms）・数値	duration の数値

Ajaxとは（非同期通信の仕組み）

この節では、Ajax が何をする仕組みで、なぜ「非同期」が大事なのかが分かります。

Ajax（エイジャックス、Asynchronous JavaScript and XML）は、ページを読み直さずに、JavaScript からサーバーへ HTTP リクエストを送り、返ってきたデータでページの一部だけを書き換える技術です。 2005年2月18日に Jesse James Garrett が記事「Ajax: A New Approach to Web Applications」で名付け、Google マップや Google サジェスト（検索語の候補の表示）などで広まりました。

flowchart TD
    A[利用者がクリック] --> B[JS が裏で<br>HTTP リクエスト]
    B --> C[(サーバー)]
    B -.-> F[応答を待つ間も<br>画面は操作できる]
    C -->|JSON を返す| D[JS が受け取る]
    D --> E[ページの一部だけ<br>書き換える]

言葉	意味
Asynchronous（非同期）	応答を待つ間も、画面の操作や他の処理が止まらない
JavaScript	リクエストを送り、受けたデータで画面を書き換える
XML	名前に残っているが、今は JSON でやり取りすることが多い
XMLHttpRequest（XHR）	最初に使われた通信の API。jQuery の $.ajax は今もこれを使う
fetch	XHR の後にできた標準の API。MDN は今の Web アプリには fetch が適しているとしている

MDN は、この技術は今の Web 開発では当たり前になったので、「Ajax」という言葉自体はあまり使われなくなった、とも書いています。jQuery では $.ajax、素の JavaScript では fetch、ライブラリでは axios が、この「非同期の HTTP リクエスト」を送る道具です。

jQueryのAjaxの使い方（$.ajax・$.get・$.post・$.getJSON・load）

この節では、jQuery で GET・POST・PUT・DELETE を送る書き方と、サーバーに実際に届いた中身が分かります。

$.ajax が基本の形で、$.get・$.post・$.getJSON はその短縮形です。 擬似 API（ページと同じオリジン）に向けて送りました。

// 1) $.ajax で GET（data はクエリ文字列になる）
await $.ajax({ url: '/api/users', type: 'GET', data: { page: 2, q: '佐藤' }, dataType: 'json' })
  .done(function (data, textStatus, jqXHR) {
    console.log('$.ajax GET', jqXHR.status, textStatus, JSON.stringify(data));
  });
// 2) 短縮形
const d1 = await $.get('/api/users', { page: 1 });
console.log('$.get', JSON.stringify(d1.query), Array.isArray(d1.items));
const d2 = await $.getJSON('/api/users');
console.log('$.getJSON', d2.items.length, '件');
// 3) $.post にオブジェクト → フォーム形式で送られる
const d3 = await $.post('/api/users', { name: '高橋', role: 'dev' });
console.log('$.post', JSON.stringify(d3));
// 4) JSON で送るときは contentType と JSON.stringify
const d4 = await $.ajax({
  url: '/api/users', type: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ name: '高橋', role: 'dev' }),
});
console.log('$.ajax POST JSON', JSON.stringify(d4));
// 5) PUT・DELETE
const d5 = await $.ajax({ url: '/api/users/3', method: 'PUT', contentType: 'application/json', data: JSON.stringify({ name: '高橋', role: 'lead' }) });
console.log('PUT', JSON.stringify(d5));
const xhr = $.ajax({ url: '/api/users/3', method: 'DELETE' });
await xhr;
console.log('DELETE', xhr.status, JSON.stringify(xhr.responseText));
// 6) フォームをまとめて送る
console.log('serialize', $('#f').serialize());
await $.post('/api/users', $('#f').serialize());
// 7) HTML の一部を読み込んで差し込む
$('#result').load('/api/part .news', function (text, status) {
  console.log('.load', status, '| #result の p:', $('#result p').length);
});

ブラウザのコンソールに出た結果です。

$.ajax GET 200 success {"query":{"page":"2","q":"佐藤"},"items":[{"id":1,"name":"佐藤"},{"id":2,"name":"鈴木"}]}
$.get {"page":"1"} true
$.getJSON 2 件
$.post {"id":3,"name":"高橋","role":"dev"}
$.ajax POST JSON {"id":3,"name":"高橋","role":"dev"}
PUT {"id":3,"name":"高橋","role":"lead"}
DELETE 204 ""
serialize name=%E4%BD%90%E8%97%A4&age=20&tags=js&tags=css
.load success | #result の p: 2

擬似 API が受け取ったリクエストです（同じ形のものは省きました）。

--> GET /api/users?page=2&q=%E4%BD%90%E8%97%A4
    x-requested-with: XMLHttpRequest
    accept: application/json, text/javascript, */*; q=0.01
--> GET /api/users?page=1
    x-requested-with: XMLHttpRequest
    accept: */*
--> POST /api/users
    content-type: application/x-www-form-urlencoded; charset=UTF-8
    x-requested-with: XMLHttpRequest
    body: name=%E9%AB%98%E6%A9%8B&role=dev
--> POST /api/users
    content-type: application/json
    x-requested-with: XMLHttpRequest
    body: {"name":"高橋","role":"dev"}
--> PUT /api/users/3
    content-type: application/json
    body: {"name":"高橋","role":"lead"}
--> DELETE /api/users/3
--> POST /api/users
    content-type: application/x-www-form-urlencoded; charset=UTF-8
    body: name=%E4%BD%90%E8%97%A4&age=20&tags=js&tags=css
--> GET /api/part
    x-requested-with: XMLHttpRequest
    accept: text/html, */*; q=0.01

読み取れることは次の4つです。

• $.post にオブジェクトを渡すと、JSON ではなくフォーム形式（application/x-www-form-urlencoded）で送られます。 これは contentType の既定値です。JSON を受けるサーバーに送るときは、contentType: 'application/json' と JSON.stringify() の両方を書きます。
• 同じオリジンへのリクエストには、X-Requested-With: XMLHttpRequest が付きました。サーバー側で「Ajax からの呼び出しか」を見分けるのに使われることがあるヘッダーです（別オリジンへは付きませんでした。CORS の節）。
• dataType: 'json'（$.getJSON）にすると、Accept が application/json 優先になりました。指定しないと */* で、jQuery は応答の Content-Type から形式を推測します。
• .load('URL セレクター') は、受けた HTML のうちセレクターに合う部分だけを差し込みました（.news の p が2つ）。

$.ajaxの主なオプション早見表

この節では、$.ajax に渡す設定の名前と既定値が分かります（api.jquery.com の jQuery.ajax() のページで確認）。

オプション	意味	既定値・例
url	送り先	今のページ
method（type）	HTTP メソッド	'GET'（type は別名）
data	送るデータ。GET ならクエリ文字列になる	オブジェクト・文字列・FormData
dataType	受けるデータの形式	推測（json・html・text・xml・script）
contentType	送るデータの形式	application/x-www-form-urlencoded; charset=UTF-8
headers	追加のヘッダー	{ 'X-CSRF-Token': token }
timeout	時間の上限（ミリ秒）	0（無制限）
processData	data をクエリ文字列に変換するか	true（FormData を送るとき false）
cache	false で URL に _=時刻 を付ける	true（script・jsonp は false）
statusCode	ステータスごとの関数	{ 404: fn }
xhrFields	XHR に設定する値	{ withCredentials: true }
async	false で同期通信	true（false は画面が固まるので非推奨）

すべての Ajax に共通の設定は $.ajaxSetup() で、全部の通信の開始と終了は ajaxStart・ajaxStop イベントで受けられます。

$.ajaxSetup({ headers: { 'X-CSRF-Token': 'abc123' }, timeout: 5000 });
$(document).on('ajaxStart', () => console.log('ajaxStart（通信開始）'))
           .on('ajaxStop', () => console.log('ajaxStop（全部終わった）'));
await $.ajax({ url: '/api/404', statusCode: { 404: () => console.log('statusCode 404 の関数') } }).catch(() => {});
await $.getJSON('/api/users');

ajaxStart（通信開始）
statusCode 404 の関数
ajaxStop（全部終わった）
ajaxStart（通信開始）
ajaxStop（全部終わった）

擬似 API には、2回とも x-csrf-token: abc123 が届きました。読み込み中の表示（スピナー）を出し入れするのに ajaxStart・ajaxStop が使えます。4.0 では .ajaxStart(fn) のような短縮形のイベントは非推奨になったので、$(document).on('ajaxStart', fn) の形で書きます。

成功・失敗の受け取り方（done・fail・always・Deferred・async/await）

この節では、$.ajax の戻り値（jqXHR）の扱い方と、Deferred・Promise・async/await との関係が分かります。

$.ajax は jqXHR というオブジェクトを返し、これは Promise と同じように then を持っています。 そのため、.done()・.fail()・.always() でも、await でも受け取れます。

受け取り方	引数	いつ動く
.done(fn)	(data, textStatus, jqXHR)	成功したとき
.fail(fn)	(jqXHR, textStatus, errorThrown)	失敗したとき
.always(fn)	成功なら done と同じ、失敗なら fail と同じ	どちらでも
.then(成功, 失敗)	戻り値で次へ渡せる	Promise と同じ
await	成功なら data、失敗なら jqXHR が投げられる	async 関数の中

success・error・complete のオプション（$.ajax({ success: fn })）は今も使えますが、jqXHR の .success()・.error()・.complete() メソッドは jQuery 3.0 で削除されました。4.0.0 で呼ぶと次のエラーです。

TypeError: $.ajax(...).success is not a function

複数のリクエストを待つ（$.when・Promise.all）

const a = $.getJSON('/api/users', { page: 1 });
const b = $.getJSON('/api/users', { page: 2 });
$.when(a, b).done(function (ra, rb) {
  // 複数を渡すと、それぞれ [data, textStatus, jqXHR] の配列が来る
  console.log('$.when', ra[0].query.page, rb[0].query.page, ra[1], rb[2].status);
});
const all = await Promise.all([$.getJSON('/api/users', { page: 3 }), $.getJSON('/api/users', { page: 4 })]);
console.log('Promise.all', all.map((d) => d.query.page).join(','));
const v = await $.getJSON('/api/users').then((d) => d.items.map((u) => u.name));
console.log('then の戻り値', v.join(','));
const dfd = $.Deferred();
setTimeout(() => dfd.resolve('3秒の処理の代わり'), 100);
dfd.done((msg) => console.log('Deferred resolve:', msg));
console.log('state 直後:', dfd.state());
await dfd.promise();
console.log('state 後:', dfd.state());

$.when 1 2 success 200
Promise.all 3,4
then の戻り値 佐藤,鈴木
state 直後: pending
Deferred resolve: 3秒の処理の代わり
state 後: resolved

$.when に複数渡すと、結果は [data, textStatus, jqXHR] の配列で1つずつ届きます。 Promise.all に jqXHR を渡すと、data だけの配列になりました。$.Deferred() は jQuery 版の Promise で、resolve するまで pending、した後は resolved になります。新しく書くコードでは、標準の Promise と async/await にそろえると、fetch との書き換えもしやすくなります。

jQueryのAjaxのエラー処理（404・500・timeout・parsererror・abort）

この節では、通信が失敗したときに fail に届く値を、失敗の種類ごとに実物で確かめられます。

function show(label, jqXHR, textStatus, errorThrown) {
  console.log(label, '| status:', jqXHR.status, '| textStatus:', textStatus, '| errorThrown:', String(errorThrown), '| responseJSON:', JSON.stringify(jqXHR.responseJSON));
}
for (const url of ['/api/404', '/api/500', '/api/badjson']) {
  await $.ajax({ url, dataType: 'json' }).fail((x, s, e) => show(url, x, s, e)).catch(() => {});
}
await $.ajax({ url: '/api/slow', timeout: 1000 }).fail((x, s, e) => show('timeout', x, s, e)).catch(() => {});
const x = $.ajax('/api/slow');
x.fail((jq, s, e) => show('abort', jq, s, e));
x.abort();
// await で受けると、catch に入るのは jqXHR そのもの
try { await $.getJSON('/api/404'); } catch (err) { console.log('await → catch:', err.status, err.statusText, typeof err.then); }

/api/404 | status: 404 | textStatus: error | errorThrown: Not Found | responseJSON: {"error":"not found"}
/api/500 | status: 500 | textStatus: error | errorThrown: Internal Server Error | responseJSON: {"error":"internal error"}
/api/badjson | status: 200 | textStatus: parsererror | errorThrown: SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2) | responseJSON: undefined
timeout | status: 0 | textStatus: timeout | errorThrown: timeout | responseJSON: undefined
abort | status: 0 | textStatus: abort | errorThrown: abort | responseJSON: undefined
await → catch: 404 Not Found function

失敗の種類	status	textStatus	原因と見る場所
4xx・5xx	404・500 など	error	サーバーが応答した。responseJSON に本文
JSON が壊れている	200	parsererror	応答は届いたが JSON として読めない。errorThrown に SyntaxError
時間切れ	0	timeout	timeout の時間内に応答が無い
中止した	0	abort	jqXHR.abort() を呼んだ
届かない・CORS	0	error	通信そのものが失敗。errorThrown は空文字

status が 0 のときは、サーバーの応答を受け取れていません。 4xx・5xx はサーバーのログやレスポンスの本文を、0 は URL・ネットワーク・CORS・タイムアウトの設定を見ます。

素のJavaScript（querySelector・fetch）で書く対応表

この節では、jQuery の Ajax を fetch に書き換えるときの対応と、書き換えで結果が変わる点が分かります。

先ほどの jQuery と同じリクエストを fetch で送りました。

// 1) GET（クエリは URLSearchParams で作る）
const qs = new URLSearchParams({ page: 2, q: '佐藤' });
const r1 = await fetch('/api/users?' + qs);
console.log('fetch GET', r1.status, r1.ok, JSON.stringify(await r1.json()));
// 3) フォーム形式で POST
const r3 = await fetch('/api/users', { method: 'POST', body: new URLSearchParams({ name: '高橋', role: 'dev' }) });
console.log('fetch POST form', r3.status, JSON.stringify(await r3.json()));
// 4) JSON で POST
const r4 = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: '高橋', role: 'dev' }),
});
console.log('fetch POST JSON', r4.status, JSON.stringify(await r4.json()));
// 5) DELETE
const r5 = await fetch('/api/users/3', { method: 'DELETE' });
console.log('fetch DELETE', r5.status, JSON.stringify(await r5.text()));
// 6) フォームをまとめて送る
const body = new URLSearchParams(new FormData(document.querySelector('#f')));
console.log('URLSearchParams(FormData)', body.toString());
// 7) HTML の一部を読み込んで差し込む
const html = await (await fetch('/api/part')).text();
const doc = new DOMParser().parseFromString(html, 'text/html');
document.querySelector('#result').replaceChildren(...doc.querySelectorAll('.news'));
console.log('load 相当 | #result の p:', document.querySelectorAll('#result p').length);

fetch GET 200 true {"query":{"page":"2","q":"佐藤"},"items":[{"id":1,"name":"佐藤"},{"id":2,"name":"鈴木"}]}
fetch POST form 201 {"id":3,"name":"高橋","role":"dev"}
fetch POST JSON 201 {"id":3,"name":"高橋","role":"dev"}
fetch DELETE 204 ""
URLSearchParams(FormData) name=%E4%BD%90%E8%97%A4&age=20&tags=js&tags=css
load 相当 | #result の p: 2

サーバーが受けたクエリ・本文は jQuery と同じでした。違ったのはヘッダーで、fetch には X-Requested-With が付かず、Accept は */*、URLSearchParams を本文にしたときの Content-Type は application/x-www-form-urlencoded;charset=UTF-8（; の後に空白なし）でした。サーバーが X-Requested-With で Ajax かどうかを見分けている場合は、fetch に書き換えると判定が変わるので、headers に自分で足します。

Ajaxの対応表（$.ajax → fetch）

やりたいこと	jQuery	fetch
GET で JSON	$.getJSON(url, params)	fetch(url + '?' + new URLSearchParams(params)) → r.json()
フォーム形式で POST	$.post(url, obj)	fetch(url, { method: 'POST', body: new URLSearchParams(obj) })
JSON で POST	contentType ＋ JSON.stringify	headers の Content-Type ＋ JSON.stringify
FormData・ファイル	processData: false, contentType: false	body: formData（Content-Type は書かない）
フォームをまとめる	$('#f').serialize()	new URLSearchParams(new FormData(f))
HTML の一部を差し込む	.load('url .news')	fetch → DOMParser → replaceChildren
4xx・5xx	fail に入る	例外にならない。r.ok を自分で見る
時間で切る	timeout: 1000	signal: AbortSignal.timeout(1000)
中止	jqXHR.abort()	AbortController の abort()
Cookie を別オリジンへ	xhrFields: { withCredentials: true }	credentials: 'include'
共通の設定	$.ajaxSetup()	自分で関数を作る（またはライブラリ）
複数を待つ	$.when(a, b)	Promise.all([a, b])

エラーの出方の違い（fetchは4xx・5xxで例外にならない）

const r = await fetch('/api/404');
console.log('fetch 404 → 例外なし | ok:', r.ok, '| status:', r.status, '| body:', JSON.stringify(await r.json()));
try { await (await fetch('/api/badjson')).json(); } catch (e) { console.log('badjson →', e.name + ':', e.message); }
try { await fetch('/api/slow', { signal: AbortSignal.timeout(1000) }); } catch (e) { console.log('timeout →', e.name + ':', e.message); }
const ac = new AbortController();
const p = fetch('/api/slow', { signal: ac.signal });
ac.abort();
try { await p; } catch (e) { console.log('abort →', e.name + ':', e.message); }

fetch 404 → 例外なし | ok: false | status: 404 | body: {"error":"not found"}
badjson → SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2)
timeout → TimeoutError: signal timed out
abort → AbortError: signal is aborted without reason

書き換えるときにいちばん漏れやすいのは、if (!r.ok) の確認です。 jQuery では fail に入っていた 404・500 が、fetch ではそのまま成功の処理へ進みます。fetch の用途別の関数は関連記事「JavaScript fetchの使い方｜用途別コピペ関数と実行結果」で、r.ok まで含めた共通処理を毎回書かずに済ませる方法は、新規記事「axiosの使い方｜GET・POST・エラー処理・インターセプターを実例で解説」で扱っています。

jQuery・fetch・axiosの違いと選び方

この節では、Ajax の道具を3つ並べて、どの場面でどれを選ぶかが分かります。

比べる点	jQuery（$.ajax）	fetch	axios
入れ方	jQuery を読み込む（gzip で約27KB）	ブラウザ・Node.js に標準	npm・CDN で入れる
中で使う API	XMLHttpRequest	―	ブラウザは XHR、Node.js は http
4xx・5xx	失敗（fail・例外）	成功扱い（r.ok が false）	失敗（例外）
JSON の変換	推測または dataType	r.json() を呼ぶ	自動
タイムアウト	timeout	AbortSignal.timeout()	timeout
共通の設定	$.ajaxSetup	―	axios.create・インターセプター
DOM 操作	同じライブラリでできる	別（素の DOM API）	別（素の DOM API）

flowchart TD
    A{画面はすでに<br>jQuery で動いている?} -->|はい| B[そのまま $.ajax<br>4.0 へ更新を検討]
    A -->|いいえ| C{共通の設定や<br>再試行を多く使う?}
    C -->|はい| D[axios]
    C -->|いいえ| E[fetch]

今ある jQuery の画面に1つ通信を足すなら $.ajax にそろえ、新しく作る画面なら fetch か axios という分け方が、コードを読む人にとって迷いが少なくなります。1つの画面で jQuery と fetch が混ざると、エラーの受け方（fail と r.ok）が2通りになります。

jQuery 3から4への変更点（移行手順とjQuery Migrate）

この節では、jQuery 4.0.0 で何が変わり、3.x のコードを動かすときに何を直すかが、3.7.1 と 4.0.0 を並べて動かした結果で分かります。

jQuery 4.0.0 は2026年1月17日に公開された、約10年ぶりのメジャーバージョンです。 jQuery のサポートのページでは、4.x が現在の版（Active）、3.x はセキュリティの修正のみ、2.x・1.x はサポート終了です（2026年10月22日時点）。

変わったこと	3.7.1	4.0.0
対応ブラウザ	IE 9・10・旧 Edge にも対応	IE 11 と、各ブラウザの最新とその1つ前など。IE 10 以前・旧 Edge は対象外
削除された関数	使える	$.trim・$.isArray など13個が無い
単位の無い数値の CSS	多くのプロパティで px を補う	width・margin などだけ px を補う
toggleClass(false)	全部のクラスを外す	何も変わらない
focus と blur の順番	focusout → blur → focusin → focus	blur → focusout → focus → focusin（W3C の順）
slim 版	Ajax・エフェクトなし	さらに Deferred・Callbacks・queue もなし
JSON から JSONP への自動切り替え	あり	なし（dataType: 'jsonp' を明示）
FormData を data に	processData: false が要る	対応（バイナリのデータを扱える）
ソース	AMD	ES モジュール（<script type="module"> で使える）

削除された関数（13個）と書き換え先

3.7.1 と 4.0.0 で、同じコードを動かしました。

console.log('jQuery', $.fn.jquery);
for (const f of ['trim', 'isArray', 'parseJSON', 'isFunction', 'type', 'now', 'isNumeric']) console.log('$.' + f + ':', typeof $[f]);

jQuery 3.7.1            jQuery 4.0.0
$.trim: function        $.trim: undefined
$.isArray: function     $.isArray: undefined
$.parseJSON: function   $.parseJSON: undefined
$.isFunction: function  $.isFunction: undefined
$.type: function        $.type: undefined
$.now: function         $.now: undefined
$.isNumeric: function   $.isNumeric: undefined

4.0.0 で $.trim(' a ') を呼ぶと、TypeError: $.trim is not a function になりました。アップグレードガイドにある書き換え先です。

削除された関数	書き換え先
jQuery.trim	String.prototype.trim（str.trim()）
jQuery.isArray	Array.isArray
jQuery.parseJSON	JSON.parse
jQuery.isFunction	typeof value === 'function'
jQuery.now	Date.now()
jQuery.isNumeric	Number.isFinite か自作の判定
jQuery.type	typeof・Array.isArray・instanceof
jQuery.nodeName	element.nodeName.toLowerCase()
jQuery.isWindow	obj != null && obj === obj.window
jQuery.unique	jQuery.uniqueSort
jQuery.camelCase・cssProps・fx.interval	代わりは無い（内部用・不要になった）

このほか、jQuery オブジェクトに付いていた配列のメソッド push・sort・splice も削除されました（[].push.call($elems, elem) のように書きます）。

数値だけのCSSにpxが付かなくなった

.css(プロパティ, 10) のように単位を付けずに数値を渡したとき、style に入った値です。

const props = ['width','height','margin-left','padding','top','left','font-size','border-width','letter-spacing','gap','flex-basis','text-indent','line-height','opacity','z-index'];
const el = $('<p>').appendTo('body');
console.log($.fn.jquery, props.map((p) => { el.attr('style',''); el.css(p, 10); return p + '=' + (el[0].style.getPropertyValue(p) || '(設定されない)'); }).join(' | '));

プロパティ	3.7.1	4.0.0
width・height・margin-left・padding・top・left・border-width	10px	10px
font-size・letter-spacing・gap・flex-basis・text-indent	10px	設定されない
line-height・opacity・z-index（単位の無い値）	10	10

4.0.0 では font-size に数値だけを渡すと、エラーにもならず何も設定されません。 気づきにくいので、移行するときは .css('font-size', '16px') のように単位を文字列で書きます。px を補うプロパティの一覧は .css() の API ドキュメントにあります。

toggleClass(false) とfocusの順番

jQuery 3.7.1  toggleClass(false): ""      toggleClass(): ""
jQuery 4.0.0  toggleClass(false): "a b"   toggleClass(): "a b"

class="a b" の要素で、3.7.1 は全部のクラスを外し、4.0.0 は何も変えませんでした。変数を渡していて、その値が false や undefined になる書き方をしていると、4.0.0 では動きが変わります。外したいクラスの名前を書きます。

1つ目の入力欄から2つ目へフォーカスを移したときのイベントの順番です。

3.7.1 #a focusout → #a blur → #b focusin → #b focus
4.0.0 #a blur → #a focusout → #b focus → #b focusin

4.0.0 はブラウザ本来の順番（W3C の順）に合わせました。focusout と blur の両方に処理を書いていて、順番に依存している場合は確かめが要ります。

移行の手順（jQuery Migrateを使う）

jQuery 4.0.0 の後に jQuery Migrate 4.0.2 を読み込んで、削除された関数を呼んだ結果です。

JQMIGRATE: Migrate is installed with logging active, version 4.0.2
jQuery 4.0.0 | migrate 4.0.2
[console.warning] JQMIGRATE: jQuery.trim() is removed; use String.prototype.trim
[console.warning] JQMIGRATE: jQuery.isArray() is removed; use Array.isArray()
"a" true

Migrate があると $.trim も $.isArray も動き、同時に「何に書き換えるか」が警告で出ました。 アップグレードガイドは、Migrate 4.x は 1.0・2.0・3.0 で削除された動きまでは戻さない、としています。

• 1IE 10 以前・旧 Edge で使う人がいないかいるなら 3.7.1 のまま（3.x はセキュリティの修正のみ）
• 2使っているプラグインが 4.0 に対応しているか削除された関数をプラグインが呼んでいることが多い
• 3slim 版で Deferred を使っていないか4.0 の slim には $.Deferred・$.when が無い
• 4CSS に数値だけを渡していないかfont-size・gap などは何も設定されなくなる
• 5JSONP や dataType 無しの script 読み込みに頼っていないかJSONP への自動切り替えと、script の自動実行が無くなった
• 6Node.js で require('jquery')(window) と書いていないか4.0 では require('jquery/factory')(window) に変える

jQueryのよくあるエラーと直し方（$ is not defined・CORS 等）

この節では、jQuery でよく出るエラー文から、原因と直し方を引けます。すべて Chromium 141 で実際に出た文です。

$ is not defined

ReferenceError: $ is not defined

jQuery を読み込んでいないページで $(function () { … }) を書いたときと、app.js を jQuery より先に読み込んだときの両方で、同じエラーになりました。

原因	直し方
jQuery の script タグが無い・URL が間違っている	開発者ツールのネットワークで jquery の読み込みが 200 か確かめる
自分のコードが jQuery より先にある	jQuery の script タグを先に置く（defer を付けるなら両方に付ける）
ES モジュールで import した	window.$ は作られないので、使うファイルごとに import $ from 'jquery'
jQuery.noConflict() を呼んだ	jQuery(…) と書くか、(function ($) { … })(jQuery) で包む
WordPress のテーマ・プラグインで動かない	WordPress の jQuery は noConflict モードで動き $ が無い。jQuery(function ($) { … }) で包む

CORSエラー（別のドメインのAPIを呼んだ）

ページ（127.0.0.1:32900）から、Access-Control-Allow-Origin を返さない別オリジン（:32901）へ $.getJSON を送ったときのコンソールと、fail に届いた値です。

Access to XMLHttpRequest at 'http://127.0.0.1:32901/api/users' from origin 'http://127.0.0.1:32900' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED
32901（CORSなし）| status: 0 | textStatus: error | errorThrown: ""

同じことを fetch で行うと、Access to fetch at … で始まる同じ文と、TypeError: Failed to fetch になりました。

擬似 API のログを見ると、リクエストはサーバーに届いていました。 応答に許可のヘッダーが無いので、ブラウザが JavaScript に結果を渡さなかった、という動きです。許可のヘッダーを返す別オリジン（:32902）では成功し、JSON の POST の前には OPTIONS（プリフライト）が届きました。また、別オリジンへのリクエストには X-Requested-With が付きませんでした。

[32901] --> GET /api/users
    origin: http://127.0.0.1:32900
[32902] --> OPTIONS /api/users
    origin: http://127.0.0.1:32900
    access-control-request-method: POST
    access-control-request-headers: content-type
[32902] --> POST /api/users
    origin: http://127.0.0.1:32900
    content-type: application/json

直すのはサーバーの側で、Access-Control-Allow-Origin などのヘッダーを返すようにします（jQuery の設定では直りません）。エラー文ごとの直し方は、関連記事「CORSエラーの原因と解決方法｜エラーメッセージ別に解説」で扱っています。

そのほかのエラー

エラー文・症状	原因	直し方
TypeError: $.ajax is not a function	slim 版を読み込んでいる	全部入り（jquery-4.0.0.min.js）に変える
TypeError: $.trim is not a function	4.0 で削除された関数	str.trim() などに書き換える（上の表）
TypeError: $.ajax(...).success is not a function	jqXHR の .success() は 3.0 で削除	.done()・.fail()・.always()
textStatus が parsererror	応答が JSON として読めない（HTML のエラーページなど）	jqXHR.responseText を表示して中身を見る
status: 0・textStatus: error	CORS・URL の誤り・サーバー停止・混在コンテンツ	コンソールのエラー文と、ネットワークのタブを見る
POST の値がサーバーで取れない	JSON を受けるサーバーにフォーム形式で送っている	contentType: 'application/json' と JSON.stringify
後から足した要素でクリックが効かない	要素を足す前に .on('click', fn) した	委譲（$('#list').on('click', '.item', fn)）
font-size などが変わらない	4.0 は数値だけでは px を補わない	'16px' のように単位を付ける
同じ処理が2回動く	同じ要素に .on を2回付けた	.off('click').on('click', fn) か、名前空間 click.myapp

jQueryを安全に使う（.htmlと.text・XSS）

この節では、サーバーから受けた値を画面に出すときの、.html() と .text() の違いが分かります。

利用者が入力した値や、API から受けた値は .text() で入れます。 名前に <img src=x onerror="…"> が入った JSON を受けて、2通りで画面に出しました。

const d = await $.getJSON('/api/xss');
$('#result').text(d.name);
console.log('.text() 後 title:', document.title, '| img 要素:', $('#result img').length);
$('#result').html(d.name);
await new Promise((r) => setTimeout(r, 300));
console.log('.html() 後 title:', document.title, '| img 要素:', $('#result img').length);

.text() 後 title: t | img 要素: 0
.html() 後 title: XSS | img 要素: 1

.text() では文字としてそのまま表示され、.html() では img 要素が作られて onerror のスクリプトが動き、ページのタイトルが書き換わりました。.html()・.append()・$('<…>') に、外から来た文字列をそのまま渡さないことが、jQuery で XSS（クロスサイトスクリプティング）を防ぐ基本です。素の JavaScript でも textContent と innerHTML の関係は同じです。

ほかに、jQuery 本体の版も安全に関わります。3.x はセキュリティの修正だけが続き、2.x・1.x はサポートが終わっています（2026年10月22日時点）。1.x・2.x を読み込んでいるページは、上の移行の手順で更新を検討します。XSS 対策の全体は、関連記事「XSS（クロスサイトスクリプティング）対策｜フレームワーク別の注意点」で扱っています。

よくある質問

Q. jQueryとは簡単に言うと何ですか？ A. HTML の要素の操作・イベント・アニメーション・Ajax 通信を、$(セレクター).メソッド() の形で短く書けるようにする JavaScript のライブラリです。読み方は「ジェイクエリー」です。

Q. jQueryの最新バージョンは？ A. 2026年10月22日時点で 4.0.0（2026年1月17日公開）です。3 系の最終版は 3.7.1 で、3.x はセキュリティの修正のみの扱いです。ページでは $.fn.jquery で版を確かめられます。

Q. jQueryはもう使われていない（廃止された）のですか？ A. 廃止されていません。4.0.0 が公開され、W3Techs の調査（2026年10月22日時点）でも全 Web サイトの 64.5% で使われています。ただ、標準の JavaScript でできることが増えたので、新しく作る画面では素の JavaScript やフレームワークで書くことが多くなっています。

Q. Ajaxとは何ですか？ A. ページを読み直さずに JavaScript からサーバーと通信し、受けたデータでページの一部だけを書き換える技術です。応答を待つ間も操作が止まらない「非同期」の通信が特徴です（「Ajaxとは」の節の図）。

Q. jQueryのAjaxでJSONをPOSTするには？ A. contentType: 'application/json' と data: JSON.stringify(オブジェクト) の両方を書きます。$.post(url, オブジェクト) はフォーム形式で送られ、JSON にはなりません（擬似 API が受けた実物を載せています）。

Q. $.ajaxとfetchの違いは？ A. いちばん大きな違いは、404・500 の扱いです。$.ajax は失敗（fail）に入り、fetch は成功扱いで r.ok が false になります。fetch は標準の API なので読み込みが要らず、$.ajax は XMLHttpRequest を使い、同じオリジンでは X-Requested-With ヘッダーが付きます。

Q. jQueryをCDNで読み込むURLは？ A. 公式の CDN は https://code.jquery.com/jquery-4.0.0.min.js です。Ajax とエフェクトを使わないなら slim 版（jquery-4.0.0.slim.min.js）もあります。integrity 付きのタグは releases.jquery.com で表示されます。

Q. $ is not definedと出るのはなぜですか？ A. jQuery が読み込まれる前に $ を使っているか、jQuery の読み込みに失敗しています。jQuery の script タグを自分のコードより先に置き、ネットワークのタブで読み込みが成功しているかを確かめます。

Q. jQuery 3から4に上げると何が動かなくなりますか？ A. $.trim・$.isArray・$.parseJSON など13個の関数が削除され、数値だけの CSS（font-size など）に px が付かなくなり、toggleClass(false) の動きと focus のイベントの順番が変わりました。jQuery Migrate 4.x を入れると、使っている箇所が警告で分かります。

Q. jQueryのDeferredとPromiseの違いは？ A. Deferred は jQuery 独自の Promise で、resolve を外から呼べる点や .done()・.fail() を持つ点が違います。jqXHR も Deferred の仲間で then を持つので、await や Promise.all にそのまま渡せました。4.0 の slim 版には Deferred が入っていません。

Q. jQueryからfetch・素のJavaScriptに書き換えるには？ A. この記事の対応表のとおり、セレクターは querySelector、イベントは addEventListener、Ajax は fetch に置き換えます。fetch では if (!r.ok) の確認と、必要なら X-Requested-With ヘッダーを自分で足します。

まとめ

• jQuery は、要素の操作・イベント・アニメーション・Ajax を $(セレクター).メソッド() で短く書けるライブラリ。最新版は 4.0.0（2026年1月17日）、3.x はセキュリティの修正のみ。
• CDN なら code.jquery.com/jquery-4.0.0.min.js、npm なら npm install jquery。自分のコードより先に読み込む。slim 版には Ajax・エフェクト・Deferred が無い。
• Ajax は、ページを読み直さずにサーバーと通信して一部だけを書き換える技術。jQuery では $.ajax・$.get・$.post・$.getJSON。
• $.post にオブジェクトを渡すとフォーム形式。JSON は contentType と JSON.stringify。失敗は textStatus（error・timeout・parsererror・abort）で分かれ、status: 0 は応答が届いていない。
• fetch に書き換えると、404・500 が例外にならない（r.ok を見る）、X-Requested-With が付かない、の2点で結果が変わる。
• 3 から 4 へは、削除された13個の関数・CSS の px・toggleClass(false)・focus の順番を確かめ、jQuery Migrate 4.x の警告で洗い出す。
• 外から来た値は .text() で入れる。.html() に渡すとスクリプトが動く。

参考・出典

確認日はいずれも 2026年10月22日です。

• jQuery「Download jQuery」：https://jquery.com/download/
• jQuery Blog「jQuery 4.0.0」：https://blog.jquery.com/2026/01/17/jquery-4-0-0/
• jQuery「jQuery Core 4.0 Upgrade Guide」：https://jquery.com/upgrade-guide/4.0/
• jQuery「Version Support」：https://jquery.com/support/
• jQuery「Browser Support」：https://jquery.com/browser-support/
• jQuery CDN「jQuery Core – All Versions」：https://releases.jquery.com/jquery/
• jQuery API Documentation「jQuery.ajax()」：https://api.jquery.com/jQuery.ajax/
• jQuery API Documentation「.css()」：https://api.jquery.com/css/
• jQuery Migrate（GitHub）：https://github.com/jquery/jquery-migrate/
• MDN Web Docs「Ajax」：https://developer.mozilla.org/ja/docs/Glossary/AJAX
• Wikipedia「Ajax」：https://ja.wikipedia.org/wiki/Ajax
• Wikipedia「jQuery」：https://ja.wikipedia.org/wiki/JQuery
• W3Techs「Usage statistics and market share of jQuery」：https://w3techs.com/technologies/details/js-jquery
• WordPress Developer Resources「wp_enqueue_script()」（ユーザーの注記：noConflict モード）：https://developer.wordpress.org/reference/functions/wp_enqueue_script/
• jQuery API Documentation「.fadeIn()」：https://api.jquery.com/fadeIn/

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。