jQuery 3.0時代のコーディングお作法 / 廃止メソッド編

本エントリーは「to-R JavaScript Advent Calendar 2015」2日目のエントリー、現在α版が公開されているjQuery 3.0時代のコーディングお作法について解説を行います。

あくまでα版を元にした情報になるので注意してください。

前回はブラウザサポートやshow()/hide()の扱いに関して解説しましたが、今回はjQuery 3.0で廃止されるメソッドと廃止されたメソッドはjQuery 3.0ではどのように記述すれば動作するかについて解説を行います。

jQuery 3.0で廃止が予定されているメソッドは以下のメソッドです。

これらは廃止されてしまいますが、かなり昔から非推奨がアナウンスされていたメソッドで拙著「Web制作の現場で使うjQueryデザイン入門」でも2013年3月の改訂のタイミングでこれらのメソッドを利用したサンプルを変更しておりますので、利用している人は少ないのでないかと思います。

Ajax通信成功時の処理を設定できる.success()が廃止されます。

$.ajax({
	url:"bar.json",
}).success(function(){
	//do something
});

同名のコールバックは存在しますので以下のように書き換える事ができます。

$.ajax({
	url:"bar.json",
	success : function(){
		//do something
	}
});

また、同様の処理を行う.done()を利用して以下のように書き換える事もできます。

$.ajax({
	url:"bar.json",
}).done(function(){
	//do something
});

Ajax通信失敗時の処理を設定できる.error()が廃止されます。

$.ajax({
	url:"bar.json",
}).error(function(){
	//do something
});

同名のコールバックは存在しますので以下のように書き換える事ができます。

$.ajax({
	url:"bar.json",
	error : function(){
		//do something
	}
});

また、同様の処理を行う.fail()を利用して以下のように書き換える事もできます。

$.ajax({
	url:"bar.json",
}).fail(function(){
	//do something
});

Ajax通信終了時(成功でも失敗でも)の処理を設定できる.complete()が廃止されます。

$.ajax({
	url:"bar.json",
}).complete(function(){
	//do something
});

同名のコールバックは存在しますので以下のように書き換える事ができます。

$.ajax({
	url:"bar.json",
	complete : function(){
		//do something
	}
});

また、同様の処理を行う.always()を利用して以下のように書き換える事もできます。

$.ajax({
	url:"bar.json",
}).always(function(){
	//do something
});

ページや画像の読み込みが終了した際の処理を設定できる.load()が廃止されます。

$(window).load(function(){
	//do something
});

これは.on()に書き換えることで利用可能です。

$(window).on("load",function(){
	//do something
});

ページから離脱する前の処理を設定できる.unload()が廃止されます。

$(window).unload(function(){
	//do something
});

これは.on()に書き換えることで利用可能です。

$(window).on("unload",function(){
	//do something
});

画像などの読み込みが失敗した場合の処理を設定できる.error()が廃止されます。

$("img").error(function(){
	//do something
});

これは.on()に書き換えることで利用可能です。

$("img").on("error",function(){
	//do something
});

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ