Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

いよいよ正式版が登場! jQuery 3での変更点と前バージョンからの移行のポイント

jQuery 3で何が変わったのか? 前編

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/07/26 14:00

 今年2016年6月9日、ついに正式版がリリースされた jQuery 3。メジャーバージョンアップしたjQuery 3では、従来のバージョンから、いったい何が変わったのかを2回に分けて解説します。

目次

はじめに

 今回は、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系を使う必要がある場合には、このあたりを頭に入れておく必要があります。

jQuery 3.0がサポートするブラウザ
ブラウザ バージョン
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.jsjquery-migrate-3.0.0.js)を利用します。このプラグインでは、デバッグ用のメッセージをブラウザのコンソールに出力します。

コンソールでの出力例
コンソールでの出力例

 圧縮されたもの(jquery-migrate-1.4.1.min.jsjquery-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を利用します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2016/07/28 11:26 ジョークライブラリであるVanilla JSを本物のライブラリであるかのように記述してしまっていた箇所があり、関連する内容を削除しております。申し訳ございませんでした。

著者プロフィール

  • WINGSプロジェクト 高江 賢(タカエ ケン)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:jQuery 3で何が変わったのか?
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5