SHOEISHA iD

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

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

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

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

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

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

セレクタ

 セレクタについては、破壊的な変更が2つ、機能追加が1つ、非推奨機能が1つになっています。ここでは、破壊的な変更について解説しましょう。

:hidden、:visibleフィルタの仕様変更

 表示、非表示をの要素を選択するフィルタの挙動が変更になりました。JavaScriptのgetClientRectメソッドで要素が返された場合、その要素の高さ、幅ともに0であっても、visibleという判断になります。たとえば、以下のようなDIV要素の場合、従来は、hiddenとなりましたが、jQuery 3では、visibleの扱いになります。

<div  id="sample"  style="width:0;height:0;"></div>

#のみのセレクタは文法エラーに

 「#」のみのセレクタは、不正なセレクタとなり文法エラーとなりました。従来は、$("#")とすると、空のコレクションを返していました。

その他の変更について

 Attributes、Data、Effectsの変更点については、破壊的な変更についてのみ解説します。

$.removeAttrメソッドの処理変更

 従来は、checked、selected、readonlyといった属性(attribute)を持つ要素に対して、$.removeAttrメソッドを利用すると、属性をプロパティとみなしてfalseを指定していました。jQuery 3では、属性自体を削除するようになりましたので、プロパティを変更するには、$.propメソッドを使うようにします。

multiple属性のselectタグの処理変更

 これまでは、multiple属性をもつselectタグで、無選択の場合、$.valメソッドの戻り値はnullとなっていましたが、jQuery 3からは空の配列を返すようになりました。

ハイフンを含むデータ名の扱い

 jQuery 3では、要素に関連づけたdataの名前は、キャメルケース(たとえばclickCount)で保持されます。ハイフンでつないだケバブケース(click-Count)の名前でも動作しますが、内部的にはキャメルケースになっています。

$.show、$.hide、$.toggleメソッドの内部処理変更

 これらのメソッドは、内部の処理が変更されて、スタイルシートのdisplayの値を優先するようになりました。これにより、スタイルシートを動的に変更するレスポンシブデザインとの互換性が上がりました。

jQuery 3.1.0

 7月7日に、jQuery 3.1.0が公開されました。このリリースでは、Deferred処理を改善し、エラー発生時に通知されない場合がある問題が修正されました。

例外ハンドラの追加

 jQuery 3.0では、DeferredオブジェクトがPromises/A+仕様に準拠し、前述したように、処理がreject(異常終了)した場合には、Promiseオブジェクトの状態で通知するようになりました。たとえランタイムエラーが発生しても、Promise オブジェクトがブロックされることはありません。ただしその一方で、処理が失敗した場合のハンドラをcatchメソッドで記述しなければ、例外を補足できないようになっています。

 jQuery 3から、$.readyも、Promises/A+仕様に準拠したDeferredオブジェクトを使うようになっています。ところが、よく使われる$(fn)や$(document).ready(fn)という形式では、戻り値がjQueryオブジェクトのため、catchメソッドを使うことができません。つまり多くの場合で、$.ready内でエラーが発生しても、そのことを知る術がない状態になっていたのです。

 そこでjQuery 3.1.0では、$.ready内で発生したエラーを補足するハンドラが追加されました。このハンドラは、$.ready内に発生したエラーをすべて補足し、デフォルトで、$.ready内のスクリプトの実行を停止してコンソールにログを表示します。

 また、コンソールへの表示の変更など、より細かい制御をしたい場合には、$.readyExceptionメソッドをオーバーライドすることで、エラー時の処理を定義することができます。

$(function(){
    throw new Error("例外発生"); // jQuery 3.1.0ではコンソールにログ表示される
});
// コンソール表示を変更する場合
$.readyException = function( error ) {
  alert(error);
};
コンソールでの出力例
コンソールでの出力例

まとめ

 今回は、Ajax、Deferred機能などを中心に変更点を紹介しました。jQuery 3には、この連載で紹介できなかった変更もありますので、さらに詳しい情報が必要であれば、Upgrade Guideを参照してください。

参考資料

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング