jQuery Migrate が便利

先日、jQuery Migrate という jQuery のプラグインがあることを知りました。
サーバサイドばかりやっていると UI が疎かになりますね...。

jQuery

おさらい

jQuery は JavaScript で書かれた便利なライブラリのパッケージです。
ライブラリには様々な関数が登録されており、それを呼び出すことで以下のような効果を得ることが出来ます。

  1. 時短
    予め用意されている関数で事足りる場合、かなりの省力化が期待できます。
  2. コードの冗長化を防ぐ
    関数を呼び出す前のソース(コード)については固定化されるため、完全オリジナル、且つ自由な環境よりもコードがシンプルになる傾向があります。
  3. クロスブラウザ対応
    ブラウザには Chromium 系、Firefox系、Edge(IE)系 などありますが、これらは系統によって JavaScript の解釈の仕方(や HTML・CSS の解釈の仕方)が異なる部分があります。
    この異なる部分の差異も吸収してくれるため、省力化・短いコードで開発を行うことが出来ます。
    ※Firefox の前身は IE としのぎを削った Netscape Navigator です。
    ※Edge は Chromium へ舵を切りました。

バージョン

jQuery 3.x では、1.x / 2.x が 3.x 系統に統合されました。
これは、Microsoft が古いバージョンの IE サポートを終了すると発表したことによります。
また、3.x にまとめられたことにより、提供版に Slim が追加されています。

  • 製品版(Production)
  • 開発版(Development)
  • スリム版(Slim)
バージョン 概要 サポート
1.x 互換性重視(古いブラウザもサポート) サポート有り
2.x 軽量化優先(モダンブラウザをサポート) サポート有り
3.x モダンブラウザをサポート 現行リリース

※現行リリースと明記した 3.x 系も、既に 2016年にリリースされた jQuery 3.4 が最後のマイナーリリースと発表されているため、jQuery 4.x の登場も近そうです。

ブラウザのサポート範囲

jQuery のサポート対象については以下のようになっています。

対象ブラウザ サポートバージョン 備考
Internet Explorer 9 以降
Edge 最新安定版と、その1つ前のバージョン
Chromium / Chrome 最新安定版と、その1つ前のバージョン
Firefox 最新安定版と、その1つ前のバージョン、ESR
Opera 最新安定版
Safari 最新安定版と、その1つ前のバージョン
Stock browser on Android 4.0 以上 Android 標準ブラウザ
Safari on iOS(Mobile) 7 以上

jQuery Migrate

概要

jQuery Migrate はその名の通り、jQuery 本体のバージョンアップをサポートしてくれるツールです。
(どの言語にもありますが)jQuery は特定のバージョン間で破壊的な変更がされており、jQuery 本体を差し替えただけだと動かないケースがあります。
また、動くけれども近い将来に動かなくなる可能性のソースを教えてくれる昨日もあります。

種類

開発版・製品版の2種類あり、それぞれ配布方法・機能が異なります。

  • 製品版
    ファイルが圧縮されている。
    - ファイル名
    jquery-migrate-x.x.x.min.js

  • 開発版
    ファイルが可読性を重視した形式になっている。
    - ファイル名
    jquery-migrate-x.x.x.js

できること

  • 製品版
    廃止された機能を復元する(呼び出してもエラーにならず正常に処理される)。
  • 開発版
    廃止された機能を呼び出すと、ブラウザのコンソールに警告を表示する。

開発版で警告が表示されるものでも、製品版で問題なければひとまずそのまま運用が可能です。
※開発版で警告表示されるものは非推奨のため、近い将来対応が必要になる可能性あり。

使い方

jQuery 本体のバージョンによって jQuery Migrate の使用方法が変わります。

  • jQuery 本体のバージョンが 1.11.0 / 2.1.0 より古い場合
    「Ver 1.x 移行作業」実施の後、「Ver 3.x 移行作業」を実施。
  • 上記以外
    「Ver 3.x 移行作業」を実施。

※現在 1.x / 2.x はセキュリティフィックスは提供されていますので、無理やり 3.x に VerUP する必要はありません。

Ver 1.x 移行作業

以下の要領でソースを修正します。

  1. 任意のバージョンの jQuery 本体を読み込む
  2. 1.x 用 jQuery Migrate を読み込む
    GitHub - jquery/jquery-migrate at 1.x-stable
  3. 修正
    開発ツールに表示される警告内容を参考にソースを修正する。

※必要に応じて jQuery プラグインも VerUP します。

Ver 3.x 移行作業

以下の要領でソースを修正します。

  1. 任意のバージョンの jQuery 本体を読み込む
  2. 3.x 用 jQuery Migrate を読み込む
    GitHub - jquery/jquery-migrate: APIs and features removed from jQuery core
  3. 修正
    開発ツールに表示される警告内容を参考にソースを修正する。

※必要に応じて jQuery プラグインも VerUP します。