jQueryと聞くと、とても懐かしく感じるプログラマーの方は多いのではないでしょうか。jQueryは、2006年に登場し、JavaScriptの開発を効率化するためのライブラリとして広く使われてきました。しかし、最近ではJavaScriptが高機能化していたり、他のライブラリの登場によってjQueryの使用を避ける動きもあります。

そうした中にあっても、jQueryは今なお多くのプロジェクトが利用されています。バージョンアップが継続して行われることは、開発の継続性であったり、サポートに対する安心感につながるでしょう。

今回はjQueryの最新版である4.0.0がベータリリースされた件について、その新機能と変更点について解説します。

一部のブラウザがサポート対象外に

jQuery 4.0では、以下のブラウザがサポート対象外になりました。

  • Internet Explorer 10以下
  • iOS 10以下
  • Firefox 64以下
  • Android Browser
  • PhantomJS

これらのブラウザは、今後jQueryの新機能に対応しないだけでなく、既存の機能の一部も正常に動作しない可能性があるとのことです。

もしあなたのWebサイトでこれらのブラウザをサポートする必要がある場合は、jQuery 3.xの使用を継続することをおすすめします。

非推奨APIの削除

jQuery 4.0では、これまで非推奨とされていたAPIが正式に削除されました。

削除されたAPIの一覧は以下の通りです。

  • jQuery.cssNumber
  • jQuery.cssProps
  • jQuery.isArray （代替：Array.isArray）
  • jQuery.parseJSON （代替：JSON.parse）
  • jQuery.nodeName
  • jQuery.isFunction
  • jQuery.isWindow
  • jQuery.camelCase
  • jQuery.type
  • jQuery.now （代替：Date.now）
  • jQuery.isNumeric
  • jQuery.trim （代替：String.prototype.trim）
  • jQuery.fx.interval

多くのAPIには代替となる関数が用意されているので、移行の際にはそちらを使用するようにしましょう。

また、配列に関連するメソッドはjQueryプロトタイプから標準のArray関数に移動しました。例えば以下のようなメソッドです。

配列系のメソッドは、jQueryプロトタイプからArray関数に移動しています。

  • $elems.push(elem)　→　[].push.call($elems, elem)
  • $elems.sort(fn)　→　[].sort.call($elems, fn)
  • $elems.splice(i, n)　→　[].splice.call($elems, i, n)

フォーカス関連イベントの統一

ブラウザごとに異なっていたフォーカス関連のイベント処理が、jQuery 4.0で統一されました。新しいjQueryでは、以下の順番でイベントが実行されるようになります。

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

これまでは、focusoutとblur、focusinとfocusの順番が逆だったため、この変更によって影響を受けるケースがあるかもしれません。注意が必要です。

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

jQuery.ajaxでFormDataをサポート

jQuery.ajaxメソッドで、FormDataオブジェクトを使ってバイナリファイルを送信できるようになりました。これまではファイルが文字列に変換されていたので、この点にも注意が必要です。

FormDataを使えば、よりシンプルにファイルアップロードの処理を書けるようになるでしょう

自動JSONPの削除

これまでjQueryでは、dataType: 'json'を指定してAjaxリクエストを送信すると、自動的にJSONPリクエストに切り替わっていました。しかし現在は、CORSによるJSONアクセスが主流になっているため、JSONPアクセスは徐々になくなっていくでしょう。jQuery 4.0ではこの自動JSONPの機能が削除されました。

ESモジュールへの移行

jQuery 4.0からは、import文を使ってjQueryをモジュールとして読み込むようになります。つまり、これまでのように$やjQueryがグローバルに定義されることはなくなるのです。利用する際は、次のように書き換える必要があります。

import $ from "jquery";

ただし、CDN版のjQueryではこれまで通り$とjQueryが利用可能です。

DeferredsとCallbacksの削除

jQueryのDeferredsとCallbacksは、Promise登場以前に非同期処理を扱うために使われてきました。しかし、今やPromiseが標準となったため、これらの機能は削除されることになりました。この変更によって、gzip圧縮されたjQueryのサイズは20KB以下になったそうです。

ただし、PromiseはIE11では利用できないことに注意が必要です。IE11をサポートする必要がある場合は、Promiseのポリフィルを別途利用しましょう。

Ajax機能を除外したバージョンの提供

jQuery 4.0では、Ajax機能を取り除いた「Slim」バージョンも提供されています。Slimは、DOM操作などのコア機能に特化したjQueryだと言えるでしょう。もしAjaxの代わりにfetchを使うのであれば、Slimバージョンを選ぶのも良いかもしれません。

今後の予定

jQuery 5.0では、IE 11のサポート終了が予告されています。これによって、さらにjQueryが軽量になる予定です。

Core: Drop support for IE (all versions) by mgol · Pull Request #5077 · jquery/jquery

まとめ

jQueryのDOM操作やイベントハンドリング機能は今でも便利で、小規模なWebアプリケーション開発での生産性を大きく向上させてくれます。しかし一方で、最新のJavaScriptはjQueryなしでも十分な機能を備えているため、プロジェクトの規模や目的に応じてjQueryの採用を判断するのが賢明だと言えるでしょう。

これまでIEサポートを主目的にjQueryを採用していた場合、バージョン4.0以降への移行は難しいかもしれません。今後はサポート対象のブラウザバージョンに合わせて、適切なjQueryのバージョンを選ぶ必要がありそうです。

jQuery 4.0.0 BETA! | Official jQuery Blog