jquery-4

jQuery 4.0 の移行

ステータス: 本番環境への導入準備完了 最終更新日: 2026-01-25 依存関係: なし 最新バージョン: [email protected], [email protected]

---

クイックスタート（5 分）

1. 安全にテストするため、jQuery Migrate プラグインを追加する

アップグレードする前に、互換性の問題を特定できるよう、migrate プラグインを追加します。

<script src="https://code.jquery.com/jquery-4.0.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-4.0.2.js"></script>

重要な理由:

• 非推奨または削除された機能が実行されると、具体的な警告を記録します
• 問題が発生する前に、更新が必要なコードを特定します
• 移行中の後方互換性を確保するためのシムを提供します

2. npm でインストールする（ビルドツールを使用している場合）

npm install [email protected]
# Or with migrate plugin for testing
npm install [email protected] [email protected]

3. 破壊的変更を確認する

アプリケーションを実行し、コンソールに migrate プラグインの警告が表示されていないか確認します。各警告は、更新が必要なコードを示しています。

---

破壊的変更のリファレンス

削除された jQuery ユーティリティ関数

以下の関数は非推奨となり、現在は削除されています。ネイティブ JavaScript の同等機能を使用してください。

削除された機能	ネイティブの代替機能
$.isArray(arr)	Array.isArray(arr)
$.parseJSON(str)	JSON.parse(str)
$.trim(str)	str.trim() または String.prototype.trim.call(str)
$.now()	Date.now()
$.type(obj)	typeof obj + Array.isArray() + instanceof
$.isNumeric(val)	!isNaN(parseFloat(val)) && isFinite(val)
$.isFunction(fn)	typeof fn === 'function'
$.isWindow(obj)	obj != null && obj === obj.window
$.camelCase(str)	カスタム関数（以下を参照）
$.nodeName(el, name)	el.nodeName.toLowerCase() === name.toLowerCase()

camelCase の代替機能:

// Native replacement for $.camelCase
function camelCase(str) {
  return str.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
}

削除されたプロトタイプメソッド

jQuery オブジェクトから、内部で使用される配列メソッドが 3 つ削除されました。

// OLD - No longer works in jQuery 4.0
$elems.push(elem);
$elems.sort(compareFn);
$elems.splice(index, count);

// NEW - Use array methods with call/apply
[].push.call($elems, elem);
[].sort.call($elems, compareFn);
[].splice.call($elems, index, count);

// Or convert to array first
const arr = $.makeArray($elems);
arr.push(elem);

focus/blur イベントの順序が変更

jQuery 4.0 は、focus イベントの順序に関する W3C 仕様に準拠しています。

// jQuery 3.x order (non-standard):
// focusout → blur → focusin → focus

// jQuery 4.0 order (W3C standard):
// blur → focusout → focus → focusin

影響: コードが特定のイベント順序に依存している場合は、十分にテストしてください。

// Example: code that may need adjustment
$input.on('blur focusout focus focusin', function(e) {
  console.log(e.type); // Order changed in 4.0
});

Slim ビルドからの削除

Slim ビルド（jquery-4.0.0.slim.min.js）には、以下の機能が含まれなくなりました。

• Deferreds と Callbacks（代わりにネイティブ Promises を使用してください）
• AJAX 機能
• アニメーション効果

// If using slim build, replace Deferreds with Promises
// OLD - Deferred
const deferred = $.Deferred();
deferred.resolve(value);
deferred.promise();

// NEW - Native Promise
const promise = new Promise((resolve, reject) => {
  resolve(value);
});

toggleClass の変更

toggleClass(boolean) および toggleClass(undefined) のシグネチャは削除されました。

// OLD - No longer works
$elem.toggleClass(true);   // Added all classes
$elem.toggleClass(false);  // Removed all classes

// NEW - Be explicit
$elem.addClass('class1 class2');    // Add classes
$elem.removeClass('class1 class2'); // Remove classes

// Or use toggleClass with class names
$elem.toggleClass('active', true);  // Force add
$elem.toggleClass('active', false); // Force remove

AJAX によるスクリプトの実行

AJAX 経由で取得したスクリプトは、dataType が指定されていない限り、自動実行されなくなりました。

// OLD - Scripts auto-executed
$.get('script.js');

// NEW - Must specify dataType for auto-execution
$.get({
  url: 'script.js',
  dataType: 'script'
});

// Or use $.getScript (still works)
$.getScript('script.js');

削除された CSS プロパティ

削除された機能	備考
$.cssNumber	削除済みです。必要な場合はローカルで定義してください
$.cssProps	ベンダープレフィックスは不要になったため、必要ありません
$.fx.interval	削除済みです。requestAnimationFrame が処理します

---

WordPress 固有の移行

1. WordPress の jQuery バージョンを確認する

# Check current jQuery version in WordPress
wp eval "echo wp_scripts()->registered['jquery-core']->ver;"

2. WordPress の jQuery 移行パス

WordPress のテーマやプラグインでは、以下を行ってください。

// Dequeue old jQuery and enqueue 4.0 (testing only)
function upgrade_jquery_for_testing() {
  if (!is_admin()) {
    wp_deregister_script('jquery-core');
    wp_deregister_script('jquery');

    wp_register_script('jquery-core',
      'https://code.jquery.com/jquery-4.0.0.min.js',
      array(), '4.0.0', true);

    wp_register_script('jquery', false, array('jquery-core'), '4.0.0', true);

    // Add migrate plugin for debugging
    wp_enqueue_script('jquery-migrate',
      'https://code.jquery.com/jquery-migrate-4.0.2.min.js',
      array('jquery'), '4.0.2', true);
  }
}
add_action('wp_enqueue_scripts', 'upgrade_jquery_for_testing', 1);

3. WordPress プラグインでよくある問題

多くの WordPress プラグインは、削除された jQuery メソッドを使用しています。

// Common pattern in older plugins - BROKEN in 4.0
if ($.isArray(data)) { ... }
var json = $.parseJSON(response);
var cleaned = $.trim(userInput);

// Fix: Update to native methods
if (Array.isArray(data)) { ... }
var json = JSON.parse(response);
var cleaned = userInput.trim();

---

移行パターン

パターン 1: 型チェックの移行

// OLD jQuery type checking
if ($.type(value) === 'array') { ... }
if ($.type(value) === 'function') { ... }
if ($.type(value) === 'object') { ... }
if ($.type(value) === 'string') { ... }
if ($.type(value) === 'number') { ... }

// NEW Native type checking
if (Array.isArray(value)) { ... }
if (typeof value === 'function') { ... }
if (value !== null && typeof value === 'object' && !Array.isArray(value)) { ... }
if (typeof value === 'string') { ... }
if (typeof value === 'number') { ... }

パターン 2: ユーティリティ関数のポリフィル

すべてのコードを変更せずに、手早く互換性を確保する必要がある場合:

// Polyfill removed methods (temporary migration aid)
if (typeof $.isArray === 'undefined') {
  $.isArray = Array.isArray;
}
if (typeof $.parseJSON === 'undefined') {
  $.parseJSON = JSON.parse;
}
if (typeof $.trim === 'undefined') {
  $.trim = function(str) {
    return str == null ? '' : String.prototype.trim.call(str);
  };
}
if (typeof $.now === 'undefined') {
  $.now = Date.now;
}
if (typeof $.isFunction === 'undefined') {
  $.isFunction = function(fn) {
    return typeof fn === 'function';
  };
}
if (typeof $.isNumeric === 'undefined') {
  $.isNumeric = function(val) {
    return !isNaN(parseFloat(val)) && isFinite(val);
  };
}

重要: これは一時的な対応です。ネイティブメソッドを使用するよう、コードを更新してください。

パターン 3: ES モジュールのインポート

jQuery 4.0 は ES モジュールをサポートしています。

// ES Module import (new in 4.0)
import $ from 'jquery';

// Or with named export
import { $ } from 'jquery';

// In package.json, ensure module resolution
{
  "type": "module"
}

パターン 4: Trusted Types への準拠

Trusted Types を使用する CSP の場合:

// jQuery 4.0 accepts TrustedHTML in DOM manipulation
import DOMPurify from 'dompurify';

// Create trusted HTML
const clean = DOMPurify.sanitize(untrustedHTML, {RETURN_TRUSTED_TYPE: true});

// Safe to use with jQuery 4.0
$('#container').html(clean);

---

重要なルール

必ず行うこと

• 本番環境をアップグレードする前に、jquery-migrate プラグインを追加する
• focus/blur イベントハンドラーを十分にテストする
• 削除されたユーティリティ関数をネイティブの同等機能に置き換える
• AJAX でスクリプトを読み込む場合は、dataType: 'script' を指定する
• モダンなプロジェクトでは、可能な限り ES モジュールのインポートを使用する

絶対に行わないこと

• migrate プラグインで事前にテストせず、本番環境をアップグレードする
• WordPress プラグインが jQuery 4.0 に対応していると想定する
• AJAX または Deferreds が必要な場合に Slim ビルドを使用する
• $.type() に依存する（代わりにネイティブの型チェックを使用する）
• toggleClass(boolean) シグネチャを使用する

---

既知の問題の防止

このスキルでは、文書化されている 8 件の問題を防止します。

Issue #1: $.isArray is not a function

エラー: TypeError: $.isArray is not a function 出典: https://github.com/jquery/jquery/issues/5411 発生する理由: jQuery 4.0 でメソッドが削除されました 予防策: 代わりに Array.isArray() を使用してください

Issue #2: $.parseJSON is not a function

エラー: TypeError: $.parseJSON is not a function 出典: https://jquery.com/upgrade-guide/4.0/ 発生する理由: 3.0 で非推奨となり、4.0 で削除されました 予防策: 代わりに JSON.parse() を使用してください

Issue #3: $.trim is not a function

エラー: TypeError: $.trim is not a function 出典: https://jquery.com/upgrade-guide/4.0/ 発生する理由: ネイティブの String.prototype.trim がすべての環境で利用できます 予防策: str.trim() または String.prototype.trim.call(str) を使用してください

Issue #4: フォーカスイベントが誤った順序で発生する

エラー: フォーム検証で予期しない動作が発生します 出典: https://blog.jquery.com/2026/01/17/jquery-4-0-0/ 発生する理由: jQuery 4.0 は従来の順序ではなく、W3C 仕様に従います 予防策: 順序に依存するイベントハンドラーをテストして更新してください

Issue #5: slim ビルドで Deferreds が未定義になる

エラー: TypeError: $.Deferred is not a function 出典: https://blog.jquery.com/2026/01/17/jquery-4-0-0/ 発生する理由: 4.0 で slim ビルドから削除されました 予防策: full ビルドまたはネイティブの Promises を使用してください

Issue #6: AJAX から読み込んだスクリプトが実行されない

エラー: スクリプトは読み込まれますが、実行されません 出典: https://jquery.com/upgrade-guide/4.0/ 発生する理由: 明示的な dataType が指定されていない場合、自動実行が無効になります 予防策: AJAX オプションに dataType: 'script' を追加してください

Issue #7: toggleClass が動作しない

エラー: toggleClass(true) を実行しても効果がありません 出典: https://jquery.com/upgrade-guide/4.0/ 発生する理由: ブール値を受け取る形式が削除されました 予防策: addClass/removeClass を使用するか、クラス名を指定して toggleClass を使用してください

Issue #8: WordPress プラグインとの競合

エラー: さまざまな「is not a function」エラーが発生します 出典: WordPress エコシステムでよく見られます 発生する理由: プラグインが削除された jQuery メソッドを使用しています 予防策: アップグレード前に jquery-migrate を使ってプラグインを監査してください

---

ブラウザーのサポート

jQuery 4.0 でサポートされるブラウザー

• Chrome（最新 3 バージョン）
• Firefox（最新 2 バージョン + ESR）
• Safari（最新 3 バージョン）
• Edge（Chromium ベース）
• iOS Safari（最新 3 バージョン）
• Android Chrome（最新 3 バージョン）

サポート対象外になったブラウザー

• IE 10 以前（IE 11 は jQuery 5.0 までサポート）
• Edge Legacy（EdgeHTML）
• 非常に古いモバイルブラウザー

---

Slim ビルドと Full ビルドの比較

機能	Full ビルド	Slim ビルド
サイズ（gzip 圧縮後）	~27.5k	~19.5k
DOM 操作	あり	あり
イベント	あり	あり
AJAX	あり	なし
エフェクト／アニメーション	あり	なし
Deferreds	あり	なし
Callbacks	あり	なし

Slim ビルドを使用する場合: 静的サイト、AJAX が不要な場合、ネイティブの fetch/Promises を使用する場合

Full ビルドを使用する場合: WordPress、AJAX を多用するアプリ、$.animate または Deferreds が必要な場合

---

移行チェックリスト

• 開発環境に [email protected] を追加する
• サイト全体をテストし、コンソールに警告がないか確認する
• $.isArray() を Array.isArray() に置き換える
• $.parseJSON() を JSON.parse() に置き換える
• $.trim() を str.trim() に置き換える
• $.now() を Date.now() に置き換える
• $.type() をネイティブの型チェックに置き換える
• $.isFunction() を typeof チェックに置き換える
• $.isNumeric() を isNaN/isFinite チェックに置き換える
• toggleClass(boolean) の使用箇所を更新する
• script の AJAX 呼び出しに dataType を追加する
• フォーカス／ブラーイベントの順序をテストする
• 該当する場合は WordPress プラグインを監査する
• すべての問題を修正した後、jquery-migrate を削除する
• 本番環境を [email protected] にアップグレードする

---

公式ドキュメント

• jQuery 4.0.0 リリース: https://blog.jquery.com/2026/01/17/jquery-4-0-0/
• アップグレードガイド: https://jquery.com/upgrade-guide/4.0/
• jQuery Migrate プラグイン: https://github.com/jquery/jquery-migrate
• API ドキュメント: https://api.jquery.com/
• npm パッケージ: https://www.npmjs.com/package/jquery

---

パッケージのバージョン（2026-01-25 確認済み）

{
  "dependencies": {
    "jquery": "^4.0.0"
  },
  "devDependencies": {
    "jquery-migrate": "^4.0.2"
  }
}

---

トラブルシューティング

問題：jQuery のアップグレード後、WordPress の管理画面が壊れる

解決策：フロントエンドの jQuery のみをアップグレードしてください。管理画面では独自のバージョンを使用します。wp-admin に影響しないよう、条件分岐を使用してください。

問題：サードパーティ製プラグインが動作しなくなる

解決策：プラグインが更新されるまで jquery-migrate を読み込み続けてください。jQuery 4.0 との互換性に関する更新がないか、プラグインの変更履歴を確認してください。

問題：AJAX リクエストは動作するが、スクリプトが実行されない

解決策：$.ajax のオプションに dataType: 'script' を追加するか、スクリプトの読み込みに $.getScript() を使用してください。

問題：フォームの検証が適切なタイミングで実行されない

解決策：focus／blur／focusin／focusout のハンドラーを確認してください。jQuery 4.0 では、blur → focusout → focus → focusin の順で実行されます（W3C の順序）。

---

質問や問題がありますか？

1. jquery-migrate の警告がないか、コンソールを確認してください
2. アップグレードガイドを確認してください：https://jquery.com/upgrade-guide/4.0/
3. jQuery の GitHub の問題を確認してください：https://github.com/jquery/jquery/issues