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

いまさらjQuery？

ここの人たちは見たくもない現実かもしれませんが、[世界の9割はjQueryでできていいます](https://qiita.com/rana_kualu/items/e23d728bb9b934069d8c)。


ということで世界70億人が待望していた[jQyery4のベータバージョンが2024/02/06に公開された](https://blog.jquery.com/2024/02/06/jquery-4-0-0-beta/)ので以下で紹介します。

ちなみにjQuery1が[2006/08/26](https://blog.jquery.com/2006/08/26/jquery-10/)、2が[2013/04/18](https://blog.jquery.com/2013/04/18/jquery-2-0-released/)、3が[2016/06/09](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/)のリリースであり、メジャーバージョンアップとしては8年ぶりとなります。
しかし開発が止まっていたとかというとそういうわけもはなく、流石に[2010年代前半ごろの更新ラッシュは落ち着いてきた](https://github.com/jquery/jquery/graphs/contributors)とはいえ、着実に[メジャーバージョンが3のまま3.7.1まで更新され続け](https://blog.jquery.com/2023/08/28/jquery-3-7-1-released-reliable-table-row-dimensions/)ています。



# jQuery 4.0.0 BETA!

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

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

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

普段通り、このリリースは[CDN](https://jquery.com/download/)とnpmから入手することができます。
サードパーティCDNはベータ版をサポートしませんが、正式版はホストします。

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


## Goodbye IE<11

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

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


## Deprecated APIs removed

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

[jQuery.cssNumber](https://github.com/jquery/jquery/pull/4055)
[jQuery.cssProps](https://github.com/jquery/jquery/pull/4364)
[jQuery.isArray](https://github.com/jquery/jquery/pull/4364)
[jQuery.parseJSON](https://github.com/jquery/jquery/pull/4364)
[jQuery.nodeName](https://github.com/jquery/jquery/pull/4364)
[jQuery.isFunction](https://github.com/jquery/jquery/pull/4364)
[jQuery.isWindow](https://github.com/jquery/jquery/pull/4364)
[jQuery.camelCase](https://github.com/jquery/jquery/pull/4364)
[jQuery.type](https://github.com/jquery/jquery/pull/4364)
[jQuery.now](https://github.com/jquery/jquery/pull/4364)
[jQuery.isNumeric](https://github.com/jquery/jquery/pull/4364)
[jQuery.trim](https://github.com/jquery/jquery/pull/4461)
[jQuery.fx.interval](https://github.com/jquery/jquery/pull/5017)


## 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までのバージョンは、以下の順になっていました。

1. focusout
2. blur
3. focusin
4. focus

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

1. blur
2. focusout
3. focus
4. focusin

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

1. focusout
2. focusin
3. blur
4. focus

しかし、この順番がわかりやすいと思う人は誰もいなかったため、仕様が[2023年に変更](https://github.com/w3c/uievents/issues/88)されました。
そして、この古い仕様に正しく従っていた唯一のブラウザは、皮肉なことにIEでした。


## FormData support

FormDataのサポート。

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


## Automatic JSONP promotion removed

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

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

## jQuery source migrated to ES modules

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

jQueryのメインブランチを[AMD](https://requirejs.org/docs/whyamd.html)から[ES modules](https://github.com/jquery/jquery/pull/4541)に移行しました。
jQueryはnpmとGitHubで公開していますが、モジュールとして直接インポートするためには[RequireJS](https://requirejs.org/)が必要でした。
バンドラを[Rollup](https://rollupjs.org/introduction/)に切り替えたあとは、ES modulesの全てのテストを実施しています。


## Trusted Types and CSP

jQyery4.0は[Trusted Types](https://twitter.com/kkotowicz/status/1445713282128515074)をサポートしました。
`require-trusted-types-for`ディレクティブに違反しない、[TrustedHTML](https://developer.mozilla.org/en-US/docs/Web/API/TrustedHTML)だけを操作メソッドへの入力として使用できるようになります。

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


## Updated slim build

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

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


## Download

CDNからダウンロードするか、単にリンクしてください。

https://code.jquery.com/jquery-4.0.0-beta.js
https://code.jquery.com/jquery-4.0.0-beta.min.js

あるいはnpmから取得することもできます。

`npm install jquery@4.0.0-beta`

### Slim build

AJAXは別のライブラリを使用するから不要である、WebアニメーションはCSSを使うから不要である、といった要求にこたえる、スリム版もリリースしました。

https://code.jquery.com/jquery-4.0.0-beta.slim.js
https://code.jquery.com/jquery-4.0.0-beta.slim.min.js

jQueryのサイズが性能に影響することなどもはやほぼありませんが、スリム版は通常版より5キロバイト減少しています。


## We’re on Mastodon!

jQueryはMastodonのアカウントを取得しました。
今後はTwitterとMastodonの両方で活動していく予定です。

jQuery: https://social.lfx.dev/@jquery
mgol: https://hachyderm.io/@mgol
timmywil: https://hachyderm.io/@timmywil


## Changelog

[全ての変更内容はこちら](https://github.com/jquery/jquery/compare/3.7.1...4.0.0-beta)。


# 感想

jQuery3はIE9以上をサポートしていたのですが、ついに今回IE10までの互換を切りました。

IE9のリリースは2011/03/14、IE10のリリースは2012/08/04、IE11のリリースは2013/10/17です。
10年以上前の超古代ブラウザを今までサポートしていたことにも驚きですが、互換を切ってもIEのサポートを続けることにも驚きですね。

ちなみにIEはもう既に[9個の選択肢にすら出てこない](https://gs.statcounter.com/browser-market-share)ほど使われていません。
シェアは0.2%弱であり、[Cốc Cốc](https://ja.wikipedia.org/wiki/C%E1%BB%91c_C%E1%BB%91c)や[Whale Browser](https://en.wikipedia.org/wiki/Naver_Whale)といったよくわからないブラウザと同じくらいのところです。
そんなところまでサポートを続ける姿勢は立派ですね。