SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 今回は、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を利用します。

次のページ
何が変わったか(個別機能)

修正履歴

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery 3で何が変わったのか?連載記事一覧
この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9545 2016/07/28 11:26

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング