CodeZine(コードジン)

特集ページ一覧

いよいよ正式版が登場! jQuery 3での変更点と前バージョンからの移行のポイント

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/07/26 14:00

目次

コア機能(2)

追加機能

1. for...ofループが利用可能に

 ES2015(2015年に公開された次世代のJavaScript言語仕様)で導入されたfor...ofループが、jQueryのコレクションでも使えるようになりました。

var elems = $("li");
// 従来の記述方法
elems.each( function( i, elem ){
    console.log( $(elem).text() );
});
// ES2015の記述方法
for (let elem of elems) {
    console.log( $(elem).text());
}

2. $.readyが正式にPromiseオブジェクトとして利用可能に

 従来より、$.readyは、非同期処理の仕様であるPromiseに準じた振る舞いになっていましたが、正式にPromiseオブジェクトとして利用可能になり、$.whenメソッドや、JavaScriptのPromise.resolve()でも利用できるようになりました。

// whenメソッドでの例
$.when( $.ready, $.getJSON("test.json") ).then(function() {
    // ready状態で、test.jsonが読み込めたら
    console.log("ready");
}).catch( function() {  // エラーの場合
    console.log("error");
});

非推奨

1. jQuery.uniqueメソッドの名称がuniqueSortに変更

 動作がわかりやすいように名称が変更されました。名称のみで処理内容は変わりません。

2. $.parseJSONメソッドの非推奨

 jQuery 3.0がサポートするブラウザでは、JavaScriptのJSON.parseメソッドをサポートしているため、$.parseJSONは非推奨になりました。

3. document-readyハンドラの$(function)以外の非推奨

 document-readyハンドラの書き方には、次のようにいくつかありましたが、jQuery 3.0では、$(fn);という記法が推奨されるようになりました。

  • $(fn);
  • $().ready(fn);
  • $(document).ready(fn);
  • $("selector").ready(fn);

要素のプロパティ

 要素のプロパティを取得するAPIにも、破壊的な変更が2点あります。

1. .width、 .height、.css("width")、.css("height")が整数以外も返すようになった

 従来これらのメソッドは、DONのoffsetWidth、 offsetHeight.widthプロパティを参照して整数値のみが返されていましたが、jQuery 3.0ではDOMのgetBoundingClientRect APIを利用して、小数値を返すようになりました。

2. windowのouterWidth、.outerHeightの値にスクロールバーの幅、高さが含まれるようになった

 $(window).widthメソッドの値には、スクロールバーの幅を含みませんが、$(window).outerWidthはスクロールバーの幅が含まれるようになりました。この値は、DOMのwindow.innerWidthと同じです。$(window).outerHeightも同様です。

まとめ

 今回は、 正式にリリースされたjQery 3.0についての概要とコア機能まわりの変更点を紹介しました。次回は、Ajax、Deferred機能などを中心に紹介する予定です。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2016/07/28 11:26 ジョークライブラリであるVanilla JSを本物のライブラリであるかのように記述してしまっていた箇所があり、関連する内容を削除しております。申し訳ございませんでした。

バックナンバー

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

著者プロフィール

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

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

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5