jQuery逆引きリファレンス

jQuery逆引きリファレンス

以前のバージョンで開発したアプリを最新のjQueryで動作させるには?

2014年11月13日

基本的に旧バージョンのjQueryで作成したページは最新版でも動作するが、jQuery 1.9以前から最新化する場合には動作しない場合がある。その問題を回避できるjQuery Migrateプラグインの基本的な使い方を説明する。

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

 jQueryは、基本的に後方互換性を強く意識したライブラリです。よって、以前のバージョンで開発したアプリは、大概、最新のjQueryでも動作します。

 ただし、jQuery 1.9の前後は要注意です。jQuery 1.9では、肥大化したライブラリを整理/縮小するために、近年あまり利用されなくなったものを中心に、いくつかの機能が削除されているからです。このため、jQuery 1.8以前で開発したアプリが、1.9では動作しなくなる可能性があります。

 jQuery 1.9で削除された主な機能には、以下のようなものがあります。

  • live/die
  • toggle(fnc, fnc)
  • $.sub
  • document以外でのAjaxイベント(ajaxXxxxx)
  • hover疑似イベント*1
  • attrChange/attrName/relateNode/srcElement(イベントオブジェクト)
  • *1 hoverメソッドは引き続き利用できます。

 もちろん、jQuery 1.9以上を利用する場合には、これらの機能を代替の方法で置き換えるのがあるべき姿です。しかし、アプリの規模が大きくもなれば、手を入れるのもなかなか困難な場合があります。

 そこで提供されているのが、jQuery Migrateプラグインです。これは、まさに移行(Migrate)のためのライブラリで、1.9で削除された機能をリストアします。jQuery Migrateを利用することで、既存のコードに手を入れることなく、jQuery 1.8以前からjQuery 1.9以降への移行が可能になります。

jQuery Migrateの基本

 jQuery Migrateを利用するには、以下のようにページでjQuery Migrate(jquery-migrate-1.2.1.min.jsファイル)をインポートするだけです。jQuery MigrateはjQueryのプラグインなので、jQuery⇒jQuery Migrateの順でインポートしなければなりません。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<p id="msg">クリックすると、背景色が交互に変化します。</p>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!--jQuery Migrateを有効化-->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function() {
  // <p id="msg">要素をクリックする都度、リスナーを交互に実行
  $('#msg').toggle(
    function(e) {
      $(this).css('background-color', 'Yellow');  // 背景を黄色に
    },
    function(e) {
      $(this).css('background-color', '');        // 背景を無色に
    }
  );
});
</script>
</body>
</html>
jQuery Migrateを使ったコード(migrate.html)
クリックするたびに、背景が黄色⇔無色と切り替わる

クリックするたびに、背景が黄色⇔無色と切り替わる
クリックするたびに、背景が黄色⇔無色と切り替わる

 toggle(fnc, fnc)メソッドはjQuery 1.9で削除されていますが、jQuery Migrateを利用することで、1.8以前と同じく、正しく動作していることが確認できます。ちなみに、太字のコードをコメントアウト(もしくは削除)すると、コードは正しく動作しない――ページ起動とともに文字列が非表示になることが確認できます*2

  • *2 エフェクトメソッドの一種であるtoggle(speed, fnc)が働くためです。toggle(speed, fnc)メソッドについては、後日別稿で解説予定です。

非推奨コードのロギング

 jQuery Migrateでは、development(非圧縮)版を利用することで、非推奨のコードを検出し、ブラウザーの開発者ツールにログとして出力することもできます。例えば以下は、先ほどのリスト太字の部分を、

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

で書き換えた場合の結果です(minなし)。

非推奨コードをログで通知

 「JQMIGRATE:」という接頭辞で警告ログが表示されていることが確認できます。jQuery Migrateを利用することで、非推奨コードを洗い出すこともできるわけです。jQuery Migrateが発生する可能性のある警告ログの一覧は、「jQuery Migrate Plugin - Warning Messages(英語)」からも確認できます。

 development版で、警告ログの出力を無効にしたい場合には、コードを以下のように修正します。

JavaScript
$(function() {
  $.migrateMute = true;
  ……中略……
});
警告ログを無効化するためのコード

 また、ログ出力するのではなく、非推奨の警告を配列として取得するには、$.migrateWarningsプロパティにアクセスしてください。

処理対象:最新版へのマイグレーション カテゴリ:コア
処理対象:jQuery Migrate カテゴリ:プラグイン

※以下では、本稿の前後を合わせて5回分(第1回~第5回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

1. jQueryを利用するには?

jQueryの特徴を簡単に紹介。jQueryライブラリをCDNから、もしくはローカルにダウンロードしてから利用する方法を説明する。

2. 現在利用しているjQueryのバージョンを確認するには?

現在利用しているjQueryライブラリのバージョンを、JavaScriptコードから実行中に確認する方法を説明する。また、ライブラリのバージョンの使い分けや、旧バージョンの入手方法も紹介。

3. 【現在、表示中】≫ 以前のバージョンで開発したアプリを最新のjQueryで動作させるには?

基本的に旧バージョンのjQueryで作成したページは最新版でも動作するが、jQuery 1.9以前から最新化する場合には動作しない場合がある。その問題を回避できるjQuery Migrateプラグインの基本的な使い方を説明する。

4. 要素配下のテキストを取得/設定するには?(text/html)

textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。

5. 要素のスタイルプロパティを変更するには?(css)

背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社