jQuery 4.0 完全ガイド - 10年ぶりのメジャーアップデート全変更点解説

// IE10以下を対象としたポリフィルは不要に
// 以下のようなコードは jQuery 4.0 では不要
if (typeof Array.isArray === 'undefined') {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

// jQuery 3.x（非推奨）
if (jQuery.isArray(arr)) {
  // 配列の処理
}
const data = jQuery.parseJSON(jsonString);
const trimmed = jQuery.trim("  hello  ");
const timestamp = jQuery.now();
 
// jQuery 4.0（ネイティブAPI使用）
if (Array.isArray(arr)) {
  // 配列の処理
}
const data = JSON.parse(jsonString);
const trimmed = "  hello  ".trim();
const timestamp = Date.now();

// jQuery 3.x
jQuery.type(undefined);     // "undefined"
jQuery.type(null);          // "null"
jQuery.type([]);            // "array"
jQuery.type({});            // "object"
jQuery.type(/regex/);       // "regexp"
jQuery.type(new Date());    // "date"
 
// jQuery 4.0（ネイティブで代替）
function getType(value) {
  if (value === null) return 'null';
  if (value === undefined) return 'undefined';
  if (Array.isArray(value)) return 'array';
  
  const type = Object.prototype.toString.call(value);
  return type.slice(8, -1).toLowerCase();
}
 
getType([]);            // "array"
getType({});            // "object"
getType(/regex/);       // "regexp"
getType(new Date());    // "date"

// jQuery 3.x（非推奨の使い方）
const $elems = $('div');
$elems.push(document.createElement('span'));
 
// jQuery 4.0
const $elems = $('div');
const elemsArray = $elems.toArray();
elemsArray.push(document.createElement('span'));
const $newElems = $(elemsArray);
 
// または
[].push.call($elems, document.createElement('span'));

// jQuery 3.x（暗黙のJSONP変換）
$.ajax({
  url: 'https://api.example.com/data',
  dataType: 'json',
  jsonpCallback: 'handleResponse',  // これでJSONPに自動変換されていた
  success: function(data) { /* ... */ }
});
 
// jQuery 4.0（明示的に指定）
$.ajax({
  url: 'https://api.example.com/data',
  dataType: 'jsonp',  // 明示的にjsonpを指定
  jsonpCallback: 'handleResponse',
  success: function(data) { /* ... */ }
});

// jQuery 3.x（自動実行）
$.ajax({
  url: '/scripts/plugin.js',
  success: function() {
    // スクリプトは自動的に実行されていた
  }
});
 
// jQuery 4.0（明示的に指定）
$.ajax({
  url: '/scripts/plugin.js',
  dataType: 'script',  // 明示的に指定
  success: function() {
    // スクリプトが実行される
  }
});
 
// または $.getScript() を使用
$.getScript('/scripts/plugin.js', function() {
  // スクリプトが実行される
});

// jQuery 4.0（FormData対応）
const formData = new FormData(document.querySelector('form'));
formData.append('extraField', 'value');
 
$.ajax({
  url: '/api/upload',
  method: 'POST',
  data: formData,
  contentType: false,    // FormData使用時は必須
  processData: false,    // FormData使用時は必須
  success: function(response) {
    console.log('アップロード成功:', response);
  }
});

// jQuery 3.x（暗黙のpx付加）
$('#element').css('width', 100);    // → width: 100px
$('#element').css('margin', 20);    // → margin: 20px
 
// jQuery 4.0（明示的に単位を指定）
$('#element').css('width', '100px');
$('#element').css('margin', '20px');
 
// 数値のままでOKなプロパティ
$('#element').css('opacity', 0.5);   // opacity は単位不要
$('#element').css('z-index', 100);   // z-index は単位不要
$('#element').css('line-height', 1.5); // line-height は単位不要

// 注意が必要なケース
const $detached = $('<div>').css('opacity', 0.5);
console.log($detached.css('opacity')); // jQuery 4.0では空文字列の可能性
 
// 安全な方法
const $attached = $('<div>').css('opacity', 0.5).appendTo('body');
console.log($attached.css('opacity')); // "0.5"
$attached.remove();

// jQuery 4.0 の発火順序（W3C標準）
// 1. focusout (元の要素から)
// 2. focusin (新しい要素へ)
// 3. blur (元の要素から)
// 4. focus (新しい要素へ)
 
$('#input1').on('blur', function() {
  console.log('1. blur');
});
$('#input1').on('focusout', function() {
  console.log('2. focusout');  // jQuery 4.0 では先に発火
});
$('#input2').on('focus', function() {
  console.log('3. focus');
});
$('#input2').on('focusin', function() {
  console.log('4. focusin');   // jQuery 4.0 では先に発火
});

// jQuery 3.x（AMD形式）
define(['jquery'], function($) {
  // jQueryを使用
});
 
// jQuery 4.0（ES Modules）
import $ from 'jquery';
 
// または
import jQuery from 'jquery';

{
  "exports": {
    ".": {
      "import": "./dist/jquery.module.js",
      "require": "./dist/jquery.js"
    },
    "./slim": {
      "import": "./dist/jquery.slim.module.js",
      "require": "./dist/jquery.slim.js"
    }
  }
}

// vite.config.js
import { defineConfig } from 'vite';
 
export default defineConfig({
  resolve: {
    alias: {
      jquery: 'jquery/dist/jquery.module.js'
    }
  }
});

// Slim ビルドでは使用不可
const deferred = $.Deferred();
deferred.resolve('success');
 
// ネイティブ Promise を使用
const promise = new Promise((resolve, reject) => {
  resolve('success');
});
 
// または通常ビルドを使用

// Trusted Types ポリシーを作成
const policy = trustedTypes.createPolicy('jquery-html', {
  createHTML: (input) => input
});
 
// TrustedHTML を jQuery に渡す
const trustedHtml = policy.createHTML('<div>安全なHTML</div>');
$('#container').html(trustedHtml);

// jQuery 3.x（削除された使い方）
$('#element').toggleClass(undefined);  // 動作が不定
$('#element').toggleClass(true);       // すべてのクラスを追加？
 
// jQuery 4.0（明示的な指定）
$('#element').toggleClass('active');           // トグル
$('#element').toggleClass('active', true);     // 追加
$('#element').toggleClass('active', false);    // 削除

<!-- 開発時のみ使用 -->
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-4.0.0.min.js"></script>

// コンソールに非推奨APIの使用警告が表示される
jQuery.isArray([1, 2, 3]);
// JQMIGRATE: jQuery.isArray is deprecated; use Array.isArray