はじめに
今回は、jQueryのおさらいから、コア機能まわりの変更点を紹介します。
対象読者
- Webアプリケーション開発に興味があり、JavaScriptを知っている方
jQueryのおさらい
jQueryは、今やWebアプリケーション開発者にはデファクトスタンダードとなったJavaScript用ライブラリです。最初のバージョンがリリースされたのは2006年8月と、後発ながら、ブラウザに依存しないHTMLのDOM操作やAjax機能などが使いやすく、たちまち利用者が増加しました。
jQueryと同様のJavaScriptを効率的に使うためのライブラリとしては、他にprototype.jsなどがあります。prototype.jsは、jQueryが人気になる以前ではよく使われていました。
なお、規模の大きなWebアプリケーションでは、jQueryではなく、もっと大きな枠組みまでサポートしたMVCフレームワークを利用することも多いでしょう。その分野では、今のところAngularJS、Reactの2つのフレームワークが人気を分けています。
jQuery 3.0とは
jQueryは、今回の jQuery 3.0のリリースをもって、Ver3に1本化されました。これまでは、Internet Explorer(IE)8以前のレガシーなブラウザもサポートするVer1系、IE9以降のモダンブラウザのみのサポートとし、より軽量で高速な動作を目指したVer2系があり、利用環境によって使い分けることが必要でした。
jQuery 3.0は、当初、Ver2系からのバージョンアップとなるものと、Ver1系からのバージョンアップにあたるものの、2種類が計画されていました。 ところが、MicrosoftがIE8のサポートを終了したことにより計画が見直され、jQuery 3は1つになり、IE9以降の対応となりました。Ver1系、Ver2系は、セキュリティ面の修正は当面あるようですが、新機能追加などのバージョンアップは行われなくなります。
ちなみに、Ver1系でも、1.8系以前と、1.9系以降では、コードの仕様が大きく変更されています。1.9系以降では、古いプラグインなどが動作しない場合もありますので、Ver1系を使う必要がある場合には、このあたりを頭に入れておく必要があります。
ブラウザ | バージョン |
---|---|
Internet Explorer | バージョン9以上 |
Chrome、 Edge、 Firefox、Safari | 最新版とそのひとつ前のバージョン |
Opera | 最新版 |
iOS版Safari | iOS 7以上 |
Android標準 | 4.0以上 |
何が変わったか(概要)
jQuery 3.0では、非推奨としていたAPIやドキュメントになかったAPIを削除したり、全体的にAPIを整理してバグを修正しています。また一部のAPIでは、大きな仕様変更があります。既存のコードを動作させる場合には注意が必要ですので、まず移行プラグインをバージョンアップ対応ツールとして使って、影響具合を確認することをお勧めします。
なお、jQuery 3.0での特に大きな変更点は、次のとおりです。
- バージョンの1本化
- Deferred機能が「Promises/A+」仕様に準拠
- 非推奨のload、unload、errorを削除して、onメソッドに統一
- カスタムセレクタの高速化
既存コードからの移行
既存のコードを移行できるように、Ver3用移行プラグインがリリースされています。このプラグインでは、影響のあるコードに対して警告がブラウザのコンソールに表示されますので、バージョンアップ対応のためのツールとしても利用できます。
ただし、Ver1.11.0またはVer2.1.0より古い環境の場合は、このプラグインひとつで対応することができず、2段階での確認・修正が必要です。Ver1.11.0またはVer2.1.0より古い環境の場合は、最初に次の[1]~[5]の手順で、コードを修正しておきます。
[1]jQuery Ver1系、Ver2系での最新バージョンを指定する(執筆時点の最新バージョンは、それぞれ1.12.3、2.2.3)。
[2]Ver1 用の移行プラグインを指定する。
[3]必要に応じて、利用しているプラグインを最新バージョンにする。
[4]実行してみて警告がでれば、修正する(警告内容の詳細は、「jQuery Migrate Plugin - Warning Messages」を参照してください)。
[5]Ver1.x用の移行プラグインをはずし、正しく動作することを確認する。
Ver3.0に対応するには、次の手順になります。
[1]jQuery 3.0と、Ver3用移行プラグインを指定する。
[2]実行してみて警告がでれば、修正する(警告内容の詳細は、「jQuery Migrate Plugin - Warning Messages」を参照してください)。
[3]Ver3用の移行プラグインをはずし、正しく動作することを確認する。
なお、移行プラグインを、バージョンアップのためのデバッグツールとして利用するには、圧縮されていない開発用プラグイン(jquery-migrate-1.4.1.js、jquery-migrate-3.0.0.js)を利用します。このプラグインでは、デバッグ用のメッセージをブラウザのコンソールに出力します。
圧縮されたもの(jquery-migrate-1.4.1.min.js、jquery-migrate-3.0.0.min.js)は、デバッグ用の警告は出力されません。既存のコードに手を入れずにバージョンアップしたい場合などに利用します。
また、Ver1用、Ver3用の2つの移行プラグインを、同時に利用することはできません。
スリムビルド
今回の正式版リリースでは、スリムビルドなるものが提供されています。スリムビルドでは、任意のモジュールを選択できるカスタムビルド機能を使って、Ajaxモジュールとeffects モジュール、さらに今回非推奨となったAPIが除外されています。主にAjaxでの通信機能やアニメーションを使わないサイト向けのものです。ファイルサイズは、標準のもの(jquery-3.0.0.min.js)が84.3KBに対して、スリムビルドは67.3KBになっています。
CDN
jQuery 3.0を読み込むには、あらかじめダウンロードしたものを指定するか、 あるいはjQueryのサイトなどのCDNを利用します。