jQuery Migrate 3.0.1 の使い方と警告文の自分なりのまとめ
jQuery Migrate プラグイン 3.x の使い方と警告文を自分なりにまとめました。 記事作成時の jQuery Migrate プラグイン(以下 jQuery Migrate)の バージョンは 3.0.1 です。 jQuery Migrate 1.x と使い方は同じですが 用途や警告文が異なるので注意して下さい。 jQuery Migrate 1.x についてはこちらにまとめました。
- jQuery Migrate plugin について
- 開発版と製品版
- 使い方
- jQuery Migrate plugin のプロパティ
-
警告メッセージの種類
-
JQMIGRATE: Migrate is installed, version X
JQMIGRATE: Migrate is installed with logging active, version X - JQMIGRATE: jQuery 3.0.0+ REQUIRED
- JQMIGRATE: Migrate plugin loaded multiple times
-
JQMIGRATE: Attribute selector with '#' must be quoted
JQMIGRATE: Attribute selector with '#' was not fixed - JQMIGRATE: jQuery is not compatible with Quirks Mode
-
JQMIGRATE: jQXHR.success is deprecated and removed
JQMIGRATE: jQXHR.error is deprecated and removed
JQMIGRATE: jQXHR.complete is deprecated and removed - JQMIGRATE: jQuery.fn.error() is deprecated
-
JQMIGRATE: jQuery.fn.load() is deprecated
JQMIGRATE: jQuery.fn.unload() is deprecated - JQMIGRATE: deferred.pipe() is deprecated
- JQMIGRATE: jQuery.fx.interval is deprecated
- JQMIGRATE: jQuery.fn.andSelf() is deprecated and removed, use jQuery.fn.addBack()
- JQMIGRATE: jQuery.fn.size() is deprecated and removed; use the .length property
- JQMIGRATE: jQuery.data() always sets/gets camelCased names
- JQMIGRATE: jQuery.fn.removeAttr no longer sets boolean properties
-
JQMIGRATE: jQuery.fn.offset() requires a valid DOM element
JQMIGRATE: jQuery.fn.offset() requires an element connected to a document - JQMIGRATE: jQuery.param() no longer uses jQuery.ajaxSettings.traditional
- JQMIGRATE: jQuery.swap() is undocumented and deprecated
-
JQMIGRATE: jQuery.fn.bind() is deprecated
JQMIGRATE: jQuery.fn.unbind() is deprecated
JQMIGRATE: jQuery.fn.delegate() is deprecated
JQMIGRATE: jQuery.fn.undelegate() is deprecated - JQMIGRATE: 'ready' event is deprecated
- JQMIGRATE: 'jQuery.easing.NAME' should use only one argument
- JQMIGRATE: jQuery.parseJSON is deprecated; use JSON.parse
- JQMIGRATE: jQuery.isNumeric() should not be called on constructed objects
- JQMIGRATE: jQuery.unique is deprecated; use jQuery.uniqueSort
-
JQMIGRATE: jQuery.expr[':'] is deprecated; use jQuery.expr.pseudos
JQMIGRATE: jQuery.expr.filters is deprecated; use jQuery.expr.pseudos - JQMIGRATE: jQuery.fn.toggleClass( [ boolean ] ) is deprecated
-
JQMIGRATE: jQuery.event.props are deprecated and removed
JQMIGRATE: jQuery.event.props.concat() is deprecated and removed
JQMIGRATE: jQuery.event.fixHooks are deprecated and removed - JQMIGRATE: jQuery(window).on('load'...) called after load event occurred
- JQMIGRATE: jQuery.holdReady() is deprecated
- JQMIGRATE: jQuery.fn.click() event shorthand is deprecated
- JQMIGRATE: jQuery.fn.hover() is deprecated
-
JQMIGRATE: Migrate is installed, version X
jQuery Migrate プラグインについて
jQuery は 1.9 と 3.0 で大きな変更が行われ、API の挙動が変わったり 削除されたりしています。jQuery Migrate はそれらのバージョン以降に jQuery を更新するのを補助してくれるツールで、1.x と 3.x の2つあります。
jQuery 1.x(2.x) をその最新版(現在だと1.12.4(2.2.4))まで更新するのを助けるのが jQuery Migrate 1.x で、jQuery 1.12.x(2.2.x) 以降から 3.0 への更新を助けるのが jQuery Migrate 3.x です。
そのため、jQuery Migrate 3.x を使って jQuery 3.0 へ更新するためには、その前に jQuery Migrate 1.x を利用するなどして jQuery 1.12.x(2.2.x) 以降に 更新する必要があります。
jQuery Migrate は、移行後に問題となるコードが実行されると警告してくれます。 加えて、削除や変更された機能を復元してくれます。しかし、 jQuery Migrate 1.x で復元できる機能を 3.x でも復元できるとは限らないので、1.x で jQuery を更新してきた場合は 1.x が出す警告文を全て解消する必要があります。
リストに戻る開発版と製品版
1.x と同様に jQuery Migrate 3.x には 開発版(https://code.jquery.com/jquery-migrate-3.0.1.js)と 製品版(https://code.jquery.com/jquery-migrate-3.0.1.min.js)があります。
通常、開発版はコードの問題をブラウザのコンソールに表示しますが 製品版は表示しません(読み込み時のメッセージや古い jQuery を使った場合の エラーは表示する)。加えて製品版は圧縮されて容量が節約されています。
移行の際のデバッグには開発版を、 コードを修正しきれず復元された機能をやむをえず使う場合は 製品版を選択しましょう。
リストに戻る使い方
1.x とほぼ同じです。 ページ上に移行したいバージョンの jQuery を読み込み、 その後に jQuery Migrate を読み込みます。
<script src="http://code.jquery.com/jquery-3.0.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-3.0.1.js"></script>
これで、削除された機能や変更された振る舞いがある程度復元され、
廃止予定や削除された機能、振る舞いが変わった機能をコードが使おうとすると、
コンソールに警告文とスタックトレースが表示されます
(警告文はjQuery.migrateWarnings
という配列にも格納されます)。
警告文は、発生する状況が複数回あっても1種類1回ずつだけ表示されます。
警告文の一覧は下にまとめてあります。
この情報を元に、警告が出なくなるまでコードを修正していきます
(警告文は全て"JQMIGRATE"
で始まります)。
警告が表示されなくなったら、jQuery Migrate を外します。 それでもまだ問題が残る場合は、コードを調べて自力で解決します。
jQuery Core 3.0 Upgrade Guide に更新時に問題が発生しそうな挙動変更が 羅列されていますので参考にするといいと思います。 (※いずれまとめる予定)
※遅くなりましたが こちら にまとめました。
リストに戻るjQuery Migrate のプロパティ
jQuery Migrate では以下のプロパティやメソッドが使えます (jQuery Migrate 1.x と同じです)。
jQuery.migrateWarnings
- 配列。そのページで現在までに生成された警告メッセージが 生成された順に格納されます。 同じような状況が複数回起こっても格納されるメッセージは重複しません。
jQuery.migrateMute
-
true
に設定すると警告がコンソールに 出力されなくなります (jQuery.migrateWarnings
には格納されます)。 jQuery.migrateTrace
-
コンソールに警告は出力されて欲しいけど
スタックトレースはいらない場合は
このプロパティを
false
にします jQuery.migrateReset()
-
jQuery.migrateWarnings
を空にします。 今まで生成したメッセージも忘れるので、既に生成した警告も 配列に格納されるようになります。 jQuery.migrateVersion
- 現在使っている jQuery Migrate のバージョンを示す文字列が入っています。
警告メッセージの種類
追加・変更されるかもしれませんので、 最新情報はGithub のページなどで確認して下さい。
警告文は全て"JQMIGRATE"
で始まります。
警告文にdeprecated and removed
と書かれている項目は jQuery Migrate 無しでは
うまく動作しないので修正が必要です。(deprecated
のみの場合でも
削除されている場合がありますので修正した方が無難です。)
JQMIGRATE: Migrate is installed, version X
JQMIGRATE: Migrate is installed with logging active, version X
これは警告では無くて、このプラグインが最初に読み込まれる時に コンソールに出力されるメッセージです。 バージョン 1.4.0 からは製品版でも表示されます。 jQuery Migrate を本番サイトで使用する時は、 jQuery Migrate がパフォーマンスに影響を与えること、 jQuery の挙動を変更するので デバッグが困難になる恐れがあることに注意して下さい。
jQuery.migrateMute
がtrue
に設定されているとwith logging active
が
文中に含まれなくなります。
JQMIGRATE: jQuery 3.0.0+ REQUIRED
jQuery が 3.0.0 より古いバージョンだと表示されます。 この警告文が表示された場合、続く警告文が正確でなかったり、ページ自体が うまく動かない恐れがあります。
警告文を消すには、jQuery 3.0.0 以上を読み込むようにします。 その前に、上に書いたように jQuery 1.12.x(2.2.x) 以降に更新することを 忘れないようにして下さい。
リストに戻るJQMIGRATE: Migrate plugin loaded multiple times
バージョンの違いに関係なく複数回 jQuery Migrate が読み込まれた時に表示されます。 違うバージョンが複数読み込まれた場合は予期せぬ挙動を起こす恐れがあります。
警告文を消すには、最新バージョン以外の jQuery Migrate を全て除きます。 古いバージョンが 1.x の時は上に書いたように事前に jQuery の更新が 必要かもしれません。
リストに戻るJQMIGRATE: Attribute selector with '#' must be quoted
JQMIGRATE: Attribute selector with '#' was not fixed
CSS では、例えばa[href=#main]
のように属性セレクタの属性値に
'#'のような特殊文字を含む場合は"
や'
で囲む必要があります。
jQuery 1.11.3/2.1.4 までは囲まなくても受け入れられていました
(文書化はされていない)が、後のバージョンでは標準に合わせて
エラーを throw します。jQuery Migrate を使えば受け入れられ
throw はされなくなりますが、セレクタが複雑だと復元されない恐れがあります。
修正するには、特殊文字がある属性値を、
例えばa[href="#main"]
のように"
や'
で囲んでください。
警告文には問題のセレクタも表示されるのでそれを参考にして下さい。
JQMIGRATE: jQuery is not compatible with Quirks Mode
ページが互換モードだと警告されます。
HTML 文書の最初の行に<!doctype ...>
が無いときや、
在ってもその doctype が不正な時にブラウザは
Quirks mode (互換モード)になります。
jQuery は Quirks mode をサポートしていません。
この警告を無くすには Standards mode (標準モード)にします。
文書に正しい doctype を置けば
Standards mode でレンダリングされるようになります。
<!doctype html>
とするのが推奨されています。
JQMIGRATE: jQXHR.success is deprecated and removed
JQMIGRATE: jQXHR.error is deprecated and removed
JQMIGRATE: jQXHR.complete is deprecated and removed
jQuery.ajax()
の返り値である jQXHR オブジェクトのメソッドである
.success()
、.error()
、.complete()
は jQuery 1.8 から廃止予定になって
jQuery 3.0 で削除されました。
修正するには、これらのメソッドの代わりに標準の Deferred のメソッドに
置き換えます。.success()
は.done()
に、.error()
は.fail()
に、
.complete()
は.always()
に置き換えます。
JQMIGRATE: jQuery.fn.error() is deprecated
$.error()
と混乱することもあって$().error()
は 1.8 で廃止予定になり、
3.0 で削除されました(警告文では deprecated のみですが削除されてます)。
代わりに$().on("error", fn)
のように.on()
で書き換えます。
JQMIGRATE: jQuery.fn.load() is deprecated
JQMIGRATE: jQuery.fn.unload() is deprecated
.load()
と.unload()
は用法が2つあって、"load"
や"unload"
の
イベントハンドラを登録する用法と、サーバから HTML ソースを読み込んで
置換する用法がありました。そのうちイベントハンドラを登録する用法が 1.9 では
廃止予定であり 3.0 で削除されました。.unload()
に至ってはメソッド自体が
削除されています。
修正するには$().load(fn)
と$().unload(fn)
の使用を全て
$().on("load", fn)
と$().on("unload", fn)
に変えて下さい。
JQMIGRATE: deferred.pipe() is deprecated
jQuery 1.8 から.then()
メソッドが同じ機能を実行するように変更されたので、
jQuery.Deferred
オブジェクトの.pipe()
メソッドが廃止予定になりました。
修正するには、大抵は.pipe()
を.then()
に変更すればできますが、
jQuery 3.0 以降 Promises/A+ 規格に沿うように仕様が変わったので、
コードが仕様変更前の挙動(例えばコールバックが同期的に呼ばれる等)に
依存している場合はそれを解消する必要があります。
JQMIGRATE: jQuery.fx.interval is deprecated
jQuery 3.0 からアニメーションはsetInterval()
を使わずに
requestAnimationFrame()
を利用するため、
アニメーションの間隔を設定するjQuery.fx.interval
プロパティは、
requestAnimationFrame()
をサポートしていないブラウザ(IE 9 とAndroid Browser)
以外では使用されなくなり、廃止予定になりました。
修正するには、jQuery.fx.interval
の値を変更もしくは使用しているコードを
削除します。この値を変更してもアニメーションの間隔は変わりません。
もしこの値を何かに利用しているのなら、デフォルトの値である13
を代わりに
使うといいと思います。
JQMIGRATE: jQuery.fn.andSelf() is deprecated and removed, use jQuery.fn.addBack()
.andSelf()
は現在の jQuery オブジェクトが保持する DOM 要素の集合に
前の結果の集合を追加するメソッドです。
このメソッドの機能をより良く反映するために.addBack()
に改名され、
.andSelf()
は廃止予定になり 3.0 で削除されました。
修正するには、.andSelf()
を使っているところを全て.addBack()
に換えて下さい。
JQMIGRATE: jQuery.fn.size() is deprecated and removed; use the .length property
.size()
メソッドは現在の jQuery オブジェクトが保持する要素数を返しますが、
.length
プロパティも同じ機能で効率も良かったため
jQuery 1.9 から.length
プロパティの使用が推奨され
.size()
は廃止予定になり、3.0 で削除されました。
修正するには.size()
の使用箇所を全て.length
に換えて下さい。
JQMIGRATE: jQuery.data() always sets/gets camelCased names
jQuery 3.0 からは.data()
API を通して data オブジェクトにアクセスする時、
ケバブケース(例:my-data
)のキーは変換され、
常にキャメルケース(例:myData
)をキーにするようになりました。
そのため、例えば直接 data オブジェクトにmy-data
をプロパティ名にして
値を設定した場合、.data()
API を使ってmy-data
をキーとした値を
取り出そうとしても、data オブジェクトのキャメルケース(myData
)の
プロパティを探すだけでケバブケースのプロパティの値を取り出しません。
var target = $("<div>").get(0);
var data = $.data(target);
data["my-data"] = "kebab-case";
console.log( $.data(target, "my-data") ); // → undefined
data["myData"] = "camelCase";
console.log( $.data(target, "my-data") ); // → camelCase
修正するには、ケバブケースでの data オブジェクトの直接アクセスと
.data()
API を使ったアクセスを混在させないようにします。以下のような
方針が挙げられています。
- data に値を設定・取得するのに
.data()
API を常に使う。 - data オブジェクトに直接プロパティを設定する時は常にキャメルケースの プロパティ名を使う。
- data に値を設定・取得するのに
.data()
API を使わずに常に直接 data オブジェクトのプロパティにアクセスするようにする。
※なお、jQuery Migrate はjQuery.data()
を使用した時のみ警告を発し、
jQuery.fn.data()
には警告がでません(jQuery.fn.data()
がその内部で
jQuery.data()
を使用しなくなったことを失念している?)。
普通、jQuery.fn.data()
の方も使うと思うので、.data()
API を使っている方は
警告が出なくてもコードに問題があるかもしれませんので注意して下さい。
JQMIGRATE: jQuery.fn.removeAttr no longer sets boolean properties
jQuery 3.0 より前は、checked
、selected
、readonly
のような
真偽値を取る属性に対して.removeAttr()
を使うと、属性を削除するだけでなく
同名のプロパティにfalse
を設定することも行ってました(古い IE で
必要だったそうです)。もう必要がないのでこの挙動は行わなくなりました。
属性は「初期値」を表してプロパティは「(動的な)現在値」を表しますので、
修正するには.prop("checked", false)
のように.prop()
でfalse
に設定するように
書き換えればほぼ大丈夫です。
例外はその DOM 要素の状態を HTML ソースにシリアライズする場合です。
この場合はプロパティではなく属性がシリアライズされるので.removeAttr()
や
.attr()
を使う必要があります。
JQMIGRATE: jQuery.fn.offset() requires a valid DOM element
JQMIGRATE: jQuery.fn.offset() requires an element connected to a document
.offset()
は、jQuery オブジェクトが不正なもの(テキストノード、
window オブジェクト、素の JavaScript オブジェクト、
DOMツリーに接続されてない要素など)を保持している場合、
undefined
や{ top: 0, left: 0 }
を返してきました。
jQuery 3.0 ではこの状況でエラーを throw することがあります。加えて
jQuery はこの状況での.offset()
の実行が、エラーとなるか何らかの値が返るかを
定めていません。
そのため、不正なものを保持して.offset()
を実行しないようにする必要があります。
JQMIGRATE: jQuery.param() no longer uses jQuery.ajaxSettings.traditional
jQuery.param()
は、jQuery.ajaxSettings.traditional
の値を見てデフォルトの
挙動が変えられましたが、jQuery 3.0 からは参照しなくなりました。
挙動を変えるには呼び出すたびに
jQuery.param(myObject, true)
のように第二引数で指定する必要があります。
jQuery.ajax()
はjQuery.ajaxSettings.traditional
フラグを用いるので
注意しましょう。
もしjQuery.ajaxSettings.traditional
を使ってjQuery.param()
の挙動を
換えていて、このフラグをこれからも使い続けたい場合は、
jQuery.param(myObject, jQuery.ajaxSettings.traditional)
とすることが考えられます。
JQMIGRATE: jQuery.swap() is undocumented and deprecated
jQuery.swap()
メソッドは CSS のプロパティの集合を一時的に交換して
何らかの処理を行うメソッドでした。
このメソッドは API としてドキュメント化されておらず、パフォーマンスに問題を
起こす恐れがあるため、jQuery Migrate 1.x で廃止予定の警告が出てましたが、
jQuery 1.12.0(2.2.0) で削除されました(内部では使っています)。
警告を無くすにはjQuery.swap()
を実行しないようにコードを書き直して下さい。
JQMIGRATE: jQuery.fn.bind() is deprecated
JQMIGRATE: jQuery.fn.unbind() is deprecated
JQMIGRATE: jQuery.fn.delegate() is deprecated
JQMIGRATE: jQuery.fn.undelegate() is deprecated
これらのメソッドは、推奨される.on()
と.off()
で同じことができるので
廃止予定になっています。早ければ次のメジャーバージョンの更新で
削除されるかもしれないそうです。
警告文を消すには、これらのメソッドを.on()
、.off()
に書き換えます。
.bind()
と.unbind()
についてはメソッド名を.on()
と.off()
に換えるだけで
OKです。
$( elements ).bind( eventType, eventData, handler );
$( elements ).unbind( eventType, handler );
// ↓
$( elements ).on( eventType, eventData, handler );
// または $( elements ).on( eventType, null, eventData, handler );
$( elements ).off( eventType, handler );
// または $( elements ).off( eventType, null, handler );
.delegate()
については引数の順番が異なります。
$( elements ).delegate( selector, eventType, eventData, handler );
// ↓
$( elements ).on( eventType, selector, eventData, handler );
.undelegate()
については引数の順番の他に、.undelegate( namespace )
や
.undelegate()
等のセレクタを指定しない用法の場合は.off()
のセレクタに"**"
を
設定して、委譲イベント以外のイベントを削除しないようにする必要があります。
// jQuery 3.2.1 の undelegate のソースを参考にしました
$( elements ).undelegate( selector, eventType, handler );
// ↓
$( elements ).off( eventType, selector, handler );
$( elements ).undelegate( namespace );
// ↓
$( elements ).off( namespace, "**" );
$( elements ).undelegate( );
// ↓
$( elements ).off( undefined, "**" );
リストに戻る
JQMIGRATE: 'ready' event is deprecated
"ready"
イベントは、例えば$( document ).on( "ready", fn )
のように
登録し、document
が準備された時に発生します。しかし、
ブラウザのDOMContentLoaded
イベントが起きる前に登録しないと発生しません。
ページの読み込み後に jQuery やプラグインを非同期で読み込んだりすると
もう実行されません。
"ready"
イベントは廃止予定になり 3.0 で削除されました。
修正するには$( document ).on( "ready", fn )
となっているところを全て
$( fn )
に換えます
(jQuery Migrate 1.x では$( document ).ready( fn )
も挙げられていましたが
jQuery 3.0 からは$( fn )
のみが推奨されるようです
(API ドキュメントより))。
交換後のメソッドはdocument
の準備が完了した後でも確実に動きます。
JQMIGRATE: 'jQuery.easing.NAME' should use only one argument
jQuery のアニメーションで利用する easing 関数の追加方法は 以前の記事で書きましたが、これは公式のドキュメントには 書いてありませんでした。
現在(jQuery 3.2.1)、easing 関数にはまだ5つの引数が渡されますが、
jQuery Migrate は2つ以上の引数を持つ easing 関数が使われると
この警告文を表示し、その easing 関数を"linear"
に換えてしまいます。
この警告文の表示、"linear"
への変更を止めるには、easing 関数の引数を
一つだけ取るように書き換えて下さい。ここでは、
Cubic 関数(三次関数)の easing の例が挙げられています。
jQuery.easing.easeInCubic = function ( p, t, b, c, d ) {
return c * ( t /= d ) * t * t + b;
}
// ↓
jQuery.easing.easeInCubic = function ( p ) {
return Math.pow( p, 3 );
}
また、もしjQuery Easing プラグインを使っているなら、 バージョン1.4.0以降に更新して下さい。
jQuery-ui のeasing の書き換えのコミットに、 色んな書き換えがありますので参考にして下さい。
リストに戻るJQMIGRATE: jQuery.parseJSON is deprecated; use JSON.parse
最近の jQuery のjQuery.parseJSON()
はネイティブのJSON.parse()
と同じか、
同じ挙動をとります。サポートするブラウザがJSON.parse()
を持つ jQuery 3.0 では
jQuery.parseJSON()
は廃止予定になりました。
修正するには、jQuery.parseJSON()
を使っているところをJSON.parse()
に
換えて下さい。
JQMIGRATE: jQuery.isNumeric() should not be called on constructed objects
jQuery.isNumeric()
は、渡された引数が数値であるか、または
数値に変換できる文字列であるかを判別するために使います。
jQuery 3.0 でjQuery.isNumeric()
の挙動が変更され、
前の jQuery のそれと同じ判別を行わない場面があります。
特に数値と文字列、String オブジェクトとNumber オブジェクト以外は問答無用で
数値と見なされなくなりました。例えそのオブジェクトの.toString()
メソッドが
数値に変換できる文字列を返すとしても、数値とみなされません。
修正するには、別の数値判定を使う、もしくは String と Number 以外の
オブジェクトも判定させたい場合は、
jQuery.isNumeric( anObject.toString() )
のように、
あらかじめ.toString()
を実行して文字列にしておくことが考えられます。
JQMIGRATE: jQuery.unique is deprecated; use jQuery.uniqueSort
jQuery.unique()
は DOM ツリーにある順にソートされて返されることを
知らないで使う人が多いらしく、その誤解を無くすために jQuery 3.0 からは
jQuery.uniqueSort()
と改名しました。
jQuery.unique()
はまだ使えますが廃止予定になり jQuery Migrate は警告を
出します。警告を消すにはjQuery.unique()
の使用箇所をjQuery.uniqueSort()
に
換えて下さい。
JQMIGRATE: jQuery.expr[':'] is deprecated; use jQuery.expr.pseudos
JQMIGRATE: jQuery.expr.filters is deprecated; use jQuery.expr.pseudos
jQuery でカスタムセレクタを追加する標準の方法はjQuery.expr.pseudos
を
使うことです。他のエイリアスであるjQuery.expr[':']
とjQuery.expr.filters
は
廃止予定になりました(まだ使えます)。
修正するにはjQuery.expr[':']
とjQuery.expr.filters
の使用箇所を
標準のjQuery.expr.pseudos
に換えて下さい。
JQMIGRATE: jQuery.fn.toggleClass( [ boolean ] ) is deprecated
.toggleClass()
の、引数無しまたは真偽値一つを引数とした用法
(jQuery.fn.toggleClass( [ boolean ] )
)は廃止予定になりました。
この用法の挙動はあまり詳しくドキュメントに記載されませんでしたが、
実行時に class 属性値を持つなら引数に関わらずその属性値を data に保存して
削除し、実行時に class 属性値を持たないなら引数がfalse
以外の時は data に
保存した属性値を復元します。
この用法を使った覚えが無いのにこの警告文が出る場合は、クラス名を引数として
渡そうとしてundefined
を渡している可能性があります。
もしこの機能がまだ必要なら、.attr("class")
や.data()
等を使って
似た機能を独自に実装して下さい。
// ソースから適当に抜粋、改変
// elems は jQuery オブジェクト
function myToggleClass( elems, bool ){
elems.each( function(){
var elem = jQuery(this);
var className = elem.attr("class");
if ( className ) {
elem.data("myClassName", className);
}
elem.attr( "class",
className || bool === false ?
"" :
elem.data( "myClassName" ) || ""
);
});
}
リストに戻る
JQMIGRATE: jQuery.event.props are deprecated and removed
JQMIGRATE: jQuery.event.props.concat() is deprecated and removed
JQMIGRATE: jQuery.event.fixHooks are deprecated and removed
jQuery.event.props
やjQuery.event.fixHooks
を使っていると上の警告がでます。
これらは前のバージョンで、ネイティブの Event オブジェクトから
jQuery の作る Event オブジェクトにコピーされるプロパティの種類に介入するために
使われていました。これらは性能低下の恐れがあるため削除されたそうです。
jQuery Mobile のバージョンが 1.5 より前だとこれらを利用していて、正しく動作 させるためにはこの機能を復元する jQuery Migrate が必要だそうです。 記事作成時、1.5 のアルファ版が出ています。
これらはだいたい touch や pointer イベントのためのプロパティ追加の目的で 使われているそうで、jQuery 3.0 ではもうサポートしているので、 関連するプラグイン( pointerTouch や touchHooks など)は もう削除して良いそうです。
リストに戻るJQMIGRATE: jQuery(window).on('load'...) called after load event occurred
ページ全体が既に読み込まれた後にwindow
に"load"
イベントを
追加しようとした場合に警告されます。この場合、"load"
イベントハンドラは
実行されませんので、意図した挙動ではないだろうと思われます。
これは、jQuery の ready ハンドラ内で"load"
イベントハンドラの登録が
遅すぎた場合に起こることがあります。また、ページの読み込み完了後
$.getScript()
メソッドでスクリプトを動的に読み込み、
そのスクリプトが"load"
イベントハンドラの登録をしていた時にも起こります。
解決するには、その"load"
イベントハンドラの関数fn
が、サブリソースの
読み込み完了に実際は依存していないのなら、$(fn)
に切り替えられます。
$(fn)
ならページ読み込み完了後でもfn
の実行が保証されます。
fn
がサブリソースの読み込み完了に依存しているなら、document.readyState
の値を
調べて、その値が"complete"
ならfn
を実行させ、そうでないなら
$(window).on( "load", fn )
で"load"
イベントに登録するようにします。
JQMIGRATE: jQuery.holdReady() is deprecated
jQuery.holdReady()
は ready ハンドラの実行の差し止め、差し止め解除を行う
メソッドですが、その影響はページ全体に及び、ページ上のコードの初期化処理を
全て延期させ性能に悪影響を与える恐れがあるため廃止予定になりました。
修正するには、jQuery.holdReady()
を使う必要が無いように、jQuery の
ready ハンドラの実行を延期する必要が無いようにページを書き換えます。
例えば、遅延が必要なコードだけ安全に実行可能になるまで読み込みを遅らせる、とか。
このメソッドは複雑なため jQuery Migrate で復元するつもりはないそうで、
後のバージョンの jQuery がjQuery.holdReady()
を持たなくなった場合、
jQuery Migrate を使っても警告が表示されるだけでコードは失敗に終わるそうです。
JQMIGRATE: jQuery.fn.click() event shorthand is deprecated
イベントの登録や発火には.on()
や.trigger()
を使いますが、クリックなどの
特定のイベントには別名のメソッド(jQuery.fn.click()
など)が用意されていました。
中では.on()
や.trigger()
をイベントを指定して呼び出すだけです。
jQuery Migrate 3.0.1 ではこの省略系のメソッドを deprecated として警告します。
click 以外の省略系のメソッド( blur, focus, focusin, focusout, resize, scroll, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, contextmenu )も警告されます。
警告を無くすには、該当のメソッドの代わりに.on()
や.trigger()
を使います。
.click([eventData], handler)
なら.on("click", [eventData], handler)
に、
.click()
なら.trigger("click")
に書き換えます
JQMIGRATE: jQuery.fn.hover() is deprecated
.hover()
は mouseover と mouseout イベントを同時に登録するメソッドです。
これは領域に入った(出た)瞬間にイベントハンドラが実行されるので、これを使って
ドロップダウンメニュー等を作ると、ポインタが領域を意図せず通ってしまうと
即座に発火してしまう、あまり親切でないユーザインターフェースとなってしまいます。
この場合、発火に一定時間猶予を置く方が親切でしょう (そのようなプラグインもあります)。
警告が出ないようにするには、.hover()
を使わないように書き換えます。
単純に置き換えるなら、.hover(fn1, fn2)
を
.on("mouseenter", fn1).on("mouseleave", fn2)
に、.hover(fn1)
を
.on("mouseenter", fn1).on("mouseleave", fn1)
に置き換えることができますが、
上の例のように発火に猶予を持たせたりする方がいい場合もありますので
検討してみて下さい。