SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery 3で何が変わったのか?

jQuery 3での変更点 ~ Promises/A+互換となったDeferred機能を中心に

jQuery 3で何が変わったのか? 後編

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

Ajax機能

 Ajax機能に関しては、破壊的な変更が3つと、新機能が1つあります。

特殊なDeferredメソッドを削除

 $.ajaxメソッドの戻り値は、jqXHRオブジェクトで、これはDeferredオブジェクトでもありますが、このオブジェクトにあったsuccess、error、completeメソッドが削除されました。jQuery 3では、Deferred機能標準の、done、fail、alwaysメソッドを使うようにします。あるいは、Promises/A+仕様のthen、catchメソッドを使います。

 なお、$.ajaxメソッドの引数のオプションであるsuccess、error、completeのコールバックは、従来どおり利用可能で、非推奨にもなっていません。あくまで、jqXHRオブジェクトのみの変更です。

// jQuery 3では利用できない
$.ajax({
    url: "data.json",
    dataType: 'json'
}). success(function(json) {
      console.log("success");
});

// Deferred標準のメソッドの例
$.ajax({
    url: "data.json",
    dataType: 'json'
}). done(function(json) {
});

// Promises/A+仕様の例
$.ajax({
    url: "data.json",
    dataType: 'json'
}).then(function(json) {
});

// successコールバックを使った例
$.ajax({
    url: "data.json",
    dataType: 'json',
    success: function(json) {
    }
});

クロスドメインのスクリプト参照は明示的な宣言が必須に

 $.ajaxや$.getメソッドで、クロスドメインのスクリプトを参照する場合、dataTypeオプションで、scriptの指定が必須になりました。これは、意図しないスクリプトの実行を防止するためです。なお、$.getScriptメソッドでは、従来よりdataTypeにscriptが指定されていますので、特に変更はありません。

$. ajax( {
    url: "http://sample.com/create_js.php",
    dataType: "script",
    success: function( ) {
    }
} );

URLのハッシュを保持するように

 $.ajaxメソッドで指定するURLに、ハッシュ(#記号に続く文字)が含まれていても、削除せずに、そのまま送信するようになりました。

$.get、$.postメソッドの機能追加

 $.get、$.postメソッドのパラメータに、$.ajaxメソッド同様、オブジェクトによるオプション指定が可能になりました。指定できるプロパティも、$.ajaxメソッドと同じです。

// オブジェクトによる設定
$.get({
    url: "data.json",
    dataType: 'json',
    success: function(json) {
    }
});

イベント

 イベント機能では、5つの破壊的変更と、非推奨になった機能が1つあります。

$.load、$.unload、$.errorメソッドの削除

 非推奨になっていた$.load、$.unload、$.errorメソッドが削除されました。これらのイベントを扱う場合は、$.onメソッドを利用します。

// 利用できない
$("img").load(function() {
      console.log("load");
})
// $.onメソッドを使う
$("img").on("load", function() {
      console.log("load");
})

$.on("ready", fn)の削除

 jQuery 3では、$.onメソッドのイベントとして、readyイベントには対応しなくなりました。バージョン1.8から非推奨となっており、今後は、$(fn)を利用します。

$(document).on("ready", function() {
      console.log("ready");    // jQuery 3では実行されない
})

event.pageX、event.pageYの内部処理の変更

 jQuery 3がサポートするブラウザでは、イベント発生時のマウス座標であるpageX、pageYプロパティをサポートしたため、jQuery側で計算して求めていた処理が削除されました。

$.event.propsプロパティと$.event.fixHooksメソッドの削除

 jQuery 3では、イベントのプロパティ管理を見直し、パフォーマンスが向上しています。プロパティの計算やコピーは、最初にアクセスされたときに行うようになったため、イベントオブジェクトのプロパティ$.event.propsと、イベントオブジェクトのコピー時に利用する$.event.fixHooksメソッドは削除されました。

不正セレクタのイベントは即座に例外

 従来は、イベントをデリゲートされたセレクタは、イベントが発生した時点でチェックされていました。そのため、不正な文法のセレクタを見つけるのが難しい場合がありました。

 jQuery 3では、イベントがアタッチされた際にセレクタの文法が不正かどうかをチェックして、即座に例外をスローします。この機能により、不正なセレクタの影響で、イベントが補足できない事態を回避することができるようになりました。

try {
    // ":abc"は、不正な文法のセレクタ
    $("#parent").on('click', ":abc",  function(){
       console.log("click");
    });
} catch(e) {
    console.log(e); // jQuery 3では例外になる
}

$.bind、$.delegateメソッドの非推奨

 jQuery 1.7から、イベントのアタッチ、解除を行う$.on、$.offメソッドが追加されています。jQuery 3では、古いメソッドの、$.bind、$.unbind、$.delegate、$.undelegateは非推奨となりました。削除はまだされていませんが、$.on、$.offメソッドの使用が推奨されています。

次のページ
セレクタ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery 3で何が変わったのか?連載記事一覧
この記事の著者

WINGSプロジェクト 高江 賢(タカエ ケン)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9588 2016/08/18 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング