【jQuery】jQuery4.0.0の変更点紹介

Posted at 2024-03-04

いまさらjQuery？

ここの人たちは見たくもない現実かもしれませんが、世界の9割はjQueryでできていいます。

ということで世界70億人が待望していたjQyery4のベータバージョンが2024/02/06に公開されたので以下で紹介します。

ちなみにjQuery1が2006/08/26、2が2013/04/18、3が2016/06/09のリリースであり、メジャーバージョンアップとしては8年ぶりとなります。
しかし開発が止まっていたとかというとそういうわけもはなく、流石に2010年代前半ごろの更新ラッシュは落ち着いてきたとはいえ、着実にメジャーバージョンが3のまま3.7.1まで更新され続けています。

jQuery 4.0.0 BETA!

jQuery 4.0.0の開発を長いこと続けてきましたが、ついにベータ版リリースの準備が整いました。
やらなければならないことはたくさんあり、開発チームはリリースを心待ちにしています。
バグの修正、パフォーマンスの向上、および重要な変更点がいくつかあります。
我々はついにIE11未満のサポートを削除しました。
しかし、これによる影響は最小限に抑えられると考えています。

重要な変更点のいくつかは、チームが前々から取り組みたいと思っていたものの、パッチやマイナーリリースでは実現できなかったものです。
非推奨となっていたAPIを削除し、表に出していなかった隠し機能をいくつか削除し、そして著しく複雑になっていたいくつかの"魔法の"動作を取りやめました。

正式版をリリースする前に、削除された機能と移行方法を全てまとめたアップグレードガイドを公開する予定です。
またマイグレーションツールも用意しています。
ベータ版を試してみて、問題が発生したらぜひ教えてください。

普段通り、このリリースはCDNとnpmから入手することができます。
サードパーティCDNはベータ版をサポートしませんが、正式版はホストします。

以下に、jQuery 4.0.0ベータ版のハイライトをいくつか紹介します。

Goodbye IE<11

jQueryは、IE10以前のサポートを終了します。
IEサポートは段階的に進める予定で、IE11対応はjQuery 5.0において削除される予定です。
IE11未満をサポートするコードを削除することで、圧縮後のサイズを867バイト削減することに成功しました。

また、それ以外にも、Edge Legacy、iOS 11未満、Firefox 65未満、Android標準ブラウザなど、非常に古いブラウザのサポートも終了しました。
もし、これらのブラウザを今後もサポートする必要があるなら、jQuery3.xを引き続き使用してください。

Deprecated APIs removed

いくつかの過去バージョンで非推奨となっていたAPIを、メジャーバージョンアップに合わせて削除しました。
これらは全て公開していない内部関数であったか、同等の機能がブラウザネイティブでサポートされるようになったかのいずれかです。

jQuery.cssNumber
jQuery.cssProps
jQuery.isArray
jQuery.parseJSON
jQuery.nodeName
jQuery.isFunction
jQuery.isWindow
jQuery.camelCase
jQuery.type
jQuery.now
jQuery.isNumeric
jQuery.trim
jQuery.fx.interval

push, sort, and splice removed

push・sort・spliceの削除。

jQueryには長い間、他のjQuery関数とは異なる挙動を示す、内部使用だけを目的としていたArrayメソッドが存在していました。
具体的にはpush・sort・spliceです。
これらをjQueryではなく配列関数を使うように変更しました。
たとえば$elems.push( elem )は[].push.call( $elems, elem )になります。
万一これらを利用しているプラグインがある可能性に備えて、ここに言及しておきます。

focusin and focosout event order

focusの発火順変更。

長い間、ブラウザ間にはfocusin・focusout・focus・blurなどのイベントの発火順に共通見解が存在していませんでした。
最近のバージョンになって、ようやくこれらはひとつの順序に収束しました。
残念ながら、その順序はかつてjQueryが決めた順序とは異なっていました。
従って破壊的変更となりますが、この順番を変更します。

jQuery3までのバージョンは、以下の順になっていました。

focusout
blur
focusin
focus

jQuery4では、ネイティブの動作をオーバーライドしなくなりました。
すなわち、全てのブラウザが現在のW3Cの仕様に従います。

blur
focusout
focus
focusin

ちなみに、W3Cではかつて更に異なる仕様になっていました。

focusout
focusin
blur
focus

しかし、この順番がわかりやすいと思う人は誰もいなかったため、仕様が2023年に変更されました。
そして、この古い仕様に正しく従っていた唯一のブラウザは、皮肉なことにIEでした。

FormData support

FormDataのサポート。

jQuery.ajaxが、FormDataを含むバイナリデータをサポートしました。
以前は、バイナリは既知のデータ型ではなかったので、文字列に変換していました。
これまでも自動データ変換を無効にして手動で処理することでバイナリの処理はできていましたが、我々はこれを自動的に動作させることにしました。
これは技術的には大きな変更ですが、動作としては期待される動作に近付くはずです。

Automatic JSONP promotion removed

自動JSONPプロモーションの削除。

これまでは、コールバックのあるdataType: "json"をjQuery.ajaxする際、自動的にJSONPリクエストに変換していました。
現在、クロスドメイン通信はCORSが推奨されており、jQyery4.0が対応しているブラウザは全てCORSに対応しています。
JSONPを使ってリモートドメインからコードを実行できることを認識していない開発者が存在している場合に、予期せぬ動作を回避します。

jQuery source migrated to ES modules

ソースコードをES Modulesに移行。

jQueryのメインブランチをAMDからES modulesに移行しました。
jQueryはnpmとGitHubで公開していますが、モジュールとして直接インポートするためにはRequireJSが必要でした。
バンドラをRollupに切り替えたあとは、ES modulesの全てのテストを実施しています。

Trusted Types and CSP

jQyery4.0はTrusted Typesをサポートしました。
require-trusted-types-forディレクティブに違反しない、TrustedHTMLだけを操作メソッドへの入力として使用できるようになります。

我々はほとんどの非同期スクリプトを<script>呼び出しに切り替えました。
"headers"オプションが渡された場合など、非同期スクリプトにXHRを使うケースはまだ幾つかありますが、既に可能なかぎり<script>タグを使用しています。

Updated slim build

jQuery4.0ではDeferredとCallbackが削除されたことにより、ビルドサイズがさらに小さくなりました。
gzip後で20キロバイト以下です。

Deferredは長いあいだPromises/A+標準をサポートしてきましたが、その代替となるPromiseをIE11以外の全ブラウザがネイティブサポートしました。
ネイティブPromiseがサポートしていない機能も僅かに存在しますが、ほとんどの機能は移行できます。
IE11をサポートする必要がある場合はpolyfillを追加するとよいでしょう。