jQuery逆引きリファレンス
以前のバージョンで開発したアプリを最新のjQueryで動作させるには？
基本的に旧バージョンの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の順でインポートしなければなりません。
|
<!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>
|
▼
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版で、警告ログの出力を無効にしたい場合には、コードを以下のように修正します。
|
$(function() {
$.migrateMute = true;
……中略……
});
|
また、ログ出力するのではなく、非推奨の警告を配列として取得するには、$.migrateWarningsプロパティにアクセスしてください。
処理対象：jQuery Migrate カテゴリ：プラグイン
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
2. 現在利用しているjQueryのバージョンを確認するには？
現在利用しているjQueryライブラリのバージョンを、JavaScriptコードから実行中に確認する方法を説明する。また、ライブラリのバージョンの使い分けや、旧バージョンの入手方法も紹介。
3. 【現在、表示中】≫ 以前のバージョンで開発したアプリを最新のjQueryで動作させるには？
基本的に旧バージョンのjQueryで作成したページは最新版でも動作するが、jQuery 1.9以前から最新化する場合には動作しない場合がある。その問題を回避できるjQuery Migrateプラグインの基本的な使い方を説明する。
4. 要素配下のテキストを取得／設定するには？（text／html）
textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。
5. 要素のスタイルプロパティを変更するには？（css）
背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。
