jQuery 3徹底解説：17の強力新機能と活用法

10年以上Webを牽引するjQuery、メジャーバージョン3.0でスリムかつ高速化

jQueryがWebを席巻し始めて10年以上が経過し、十分な理由で定着しています。2015年7月、jQueryはバージョン3.0の最初のアルファ版を発表——長期間ぶりのメジャーアップデートです。約2年かけて開発されました。新バージョンは、後方互換性を念頭に、よりスリムで高速なjQueryを約束します。現在のバージョン3.1.1は、多数のバグ修正、新メソッド追加、一部関数削除、いくつかの関数振る舞い変更を含みます。追加された新機能とその使い方を見ていきましょう。

17. hide()とshow()メソッドの強化

レスポンシブデザインとの互換性向上のため、jQuery 3では要素非表示処理が強化されました。54サンプルでのテストで、新バージョンは前バージョンより2%高速です。さらに、.hide()、.show()、.toggle()メソッドは、計算済みスタイルではなくインラインスタイルに焦点を当てるようになりました。これにより、ウィンドウリサイズやデバイス再配向などのイベント時にCSSルールが動的に変更可能な場合、スタイルシートのdisplay値をより適切に尊重します。

<script>
$( "#showr" ).click(function() {
  $( "div" ).first().show( "fast", function showNext() {
    $( this ).next( "div" ).show( "fast", showNext );
  });
});
$( "#hidr" ).click(function() {
  $( "div" ).hide( 1000 );
});
</script>

16. wrapAll()とunwrap()関数の改善

jQuery 2では、関数が渡された場合.wrapAll()メソッドは.wrap()のように振る舞いました。これが変更され、.wrapAll(function)は関数を1回呼び出し、関数呼び出しの文字列結果を使用してコレクション全体をラップするようになりました。

jQuery( "div" ).wrapAll(function( /* インデックス引数なし、関数は1回のみ実行 */ ) {
  // contextは最初に見つかった要素と等しい
  return "<h4></h4>";
});

jQuery 3では、unwrap()メソッドにオプションのセレクタパラメータが追加。新しいシグネチャは：

unwrap([selector])

親要素内でマッチするセレクタ式を含む文字列を渡せます。マッチする場合、マッチした子要素がアンラップされ、そうでなければされません。

15. スクロールバー幅/高さを考慮

jQuery 2では、$(window).width()呼び出しはブラウザが追加したスクロールバーを除いた「コンテンツ幅」を返しました。CSSメディアクエリと同等の測定値を提供するため、$(window).outerWidth()と$(window).outerHeight()がスクロールバー幅と高さを含む幅と高さを返すようになりました。これはDOMプロパティwindow.innerWidthと同等です。

14. data()の振る舞い変更

jQuery 3では、data()メソッドの振る舞いがDataset API仕様に合わせてわずかに変更。全プロパティキーをキャメルケースに変換するようになりました。

var $elem = $('#container');
$elem.data({ 'custom-property': 'Hello World' });
console.log($elem.data());

旧バージョンではコンソールに：

{custom-property: "Hello World"}

jQuery 3では：

{customProperty: "Hello World"}

プロパティ名がダッシュなしのキャメルケースになる一方、旧バージョンでは小文字とダッシュを保持していました。

13. クラス操作でSVGサポート

jQueryは依然としてSVGを完全サポートしていませんが、CSSクラス名を操作するメソッド（.hasClass()、.addClass()等）を用いてSVGドキュメントをターゲット可能。jQueryでSVGのクラスを変更（追加、切替、削除）または検索し、CSSでクラスをスタイリングできます。

12. :visibleと:hiddenフィルターの意味変更

jQuery 3は:visibleと:hiddenフィルターの意味を変更。レイアウトボックスを持つ要素（幅と高さがゼロのもの含む）を:visibleと見なします。例えば、br要素や内容のないインライン要素が:visibleフィルターで選択されます。以下のHTMLページがある場合：

<section></section> <div></div> <br />

以下ステートメント実行時：

console.log($('body :visible').length);

jQuery 1と2では結果0ですが、このバージョンでは結果は3になります。

11. 幅と高さの丸め廃止

ブラウザがサポートする場合、jQueryは.width()と.height()の値を整数ではなく浮動小数点数で返すようになりました。ウェブページ設計でサブピクセル精度を求めるユーザーにとっては朗報です。例えば、幅100pxのコンテナ要素内に、3分の1（33.3333333%）幅の3要素がある場合：

<div class="container">
  <div>The car is </div>
  <div>black</div>
  <div>Audi</div>
</div>

子要素の幅取得時：

$('.container div').width();

より正確な結果33.3333333が得られます。

10. 追加セキュリティ層

クロスサイトスクリプティング（XSS）攻撃対策の追加セキュリティ層を統合。開発者は$.ajax()と$.get()メソッドのオプションでdataType:"script"指定必須。リモートサイトが非スクリプトコンテンツを配信しつつ、悪意あるスクリプトを提供する攻撃を防止。jQuery.getScript()は明示的にdataType:"script"設定するため、この変更の影響を受けません。

$.ajax({
  accepts: {
    mynewcustomtype: 'application/abc-some-custom-type'
  },
  // `mynewcustomtype`のデシリアライズ方法
  converters: {
    'text mynewcustomtype': function(result) {
      // 何らかの処理
      return newresult;
    }
  },
  // サーバーから`mynewcustomtype`を期待
  dataType: 'mynewcustomtype'
});

9. 無効なハッシュマーク

jQuery 3では、セレクタ文字列がハッシュマークのみ（jQuery("#")、.find("#")等）で構成される場合、構文エラーをスローします。旧バージョンでは$("#")は空コレクション返却、.find("#")はエラー送出でした。

8. 文字列エスケープ新メソッド

新メソッドjQuery.escapeSelector()で、CSSセレクタで特殊意味を持つ任意の文字列や文字をエスケープ可能。IDやクラス名にCSSで特殊意味を持つ文字（セミコロン、ドット等）が含まれる場合に有用。例えば、ページ上の要素がid="abc.xyz"の場合、$("abc.xyz")では選択不可（セレクタがid「abc」かつclass「xyz」を持つ要素と解析されるため）。しかし、新メソッド$("#" + $.escapeSelector("abc.xyz"))で選択可能。

7. jQuery.when()引数の拡張

jQuery 3では、then()メソッドを持つ入力引数を$.when()に追加すると、Promise互換の「thenable」として解釈されます。これによりBluebird promisesやES6 promises等、より幅広い入力が可能になり、より洗練された非同期コールバック記述が可能。マルチ引数jQuery.when呼び出しはPromise.allのように振る舞い、充足値を充足配列に集約、または最初の拒絶値で拒絶。単一/ゼロ引数呼び出しはPromise.resolveのように振る舞い、thenableと同一に解決するDeferred返却、または非Promise入力で充足。さらに、jQuery.when()メソッドは入力Deferredからの進捗通知を出力Deferredに伝播しなくなりました。

$.when($.ajax("test.apx")).then(function(data,textStatus,jqHXR) {
  alert (jqHXR.status); // 200をアラート
});

6. URLのハッシュ保持

jQuery.ajax()メソッドが完全なURLをトランスポート（script、xhr、jsonp、カスタムトランスポート）に送信するようになりました。URLにハッシュがある場合、もはや剥離しません。ただし、接続先サーバーがURLハッシュを処理できない場合、リクエスト送信前に手動で剥離する必要があります。

5. DeferredオブジェクトのJS Promises互換化

Deferredはコールバックキュー作成を可能にするチェイン可能オブジェクト。jQuery 3でDeferredオブジェクトを新しいPromises/A+標準と互換にしました。.then()メソッドに重要な変更：.then()コールバック内でスローされた例外は捕捉され、拒絶値に変換。拒絶ハンドラから返却されたnon-thenable値は充足値に変換。

旧式Deferredメソッド：

$.ajax("/stat")
  .done(function(data) {
    whoops(); // コンソール: "whoops is not a function"
    // それ以上実行されない
  })
  .fail(function(arg) {
    // 例外が捕捉されなかったため実行されない
  });

新標準Promises/A+振る舞い：

$.ajax("/stat")
  .then(function(data) {
    whoops(); // コンソール: "jQuery.Deferred exception: whoops is not a function"
    // それ以上実行されない
  })
  .catch(function(arg) {
    // argはErrorオブジェクト - "whoops is not a function"
  });

4. アニメーション新API

jQuery 3はアニメーション実行にrequestAnimationFrame()APIを使用。この新APIはアニメーションをより滑らかかつ高速にし、CPU時間消費を削減。サポートブラウザでのみ使用。Internet Explorer 9等古いブラウザでは、従来APIをフォールバックとして使用。

3. jQuery 3はStrict Modeで実行

jQuery 3をサポートするほとんどのブラウザがStrict Mode使用し、新バージョンはこのディレクティブを念頭に構築。jQuery 3自体はStrict Modeで書かれていますが、ユーザーコードをStrict Modeで実行する必要はありません。既存コード書き換えなしで現在バージョンへ移行可能。ただし例外あり——一部ASP.NETバージョンがStrict Modeと互換性なし。ASP.NET 4.0でarguments.caller.calleeを用いてdoPostBack()メソッド内でコールスタックトレース試行している場合、jQuery 2.x以前を継続使用推奨。現代ブラウザはerror.stackでスタックトレースサポートするため、arguments.caller.callee検証は不要。

2. getとpostメソッドの新シグネチャ

jQueryは$.get()と$.post()ユーティリティ関数の新シグネチャを追加し、$.ajax()に整合。新シグネチャは設定パラメータ。

$.get([settings])
$.post([settings])

設定オブジェクトは多くのプロパティを持てます。$.ajax()に提供できる同じオブジェクトです。$.get()と$.post()にオブジェクト渡す場合と$.ajax()の唯一の違いは、methodプロパティが常に無視されることです。なぜなら$.get()と$.post()にはAjaxリクエスト実行用のプリセットHTTPメソッド（GETとPOST）があるため。以下コードを考慮：

$.get({
  url: 'https://www.rankred.com',
  method: 'POST' // プロパティは無視される
});

methodプロパティにもかかわらず、POSTリクエストではなくGETリクエストが送信されます。

1. for...ofループ対応

jQuery 3はECMAScript 6仕様で導入されたfor...ofループをサポート。Map、Set、Array等の反復可能オブジェクトをループ可能。このループ使用時、取得値はjQueryコレクションのDOM要素が1つずつ。for...ofループで従来の$.each()構文を置き換え、jQueryコレクション要素ループをより容易に。ページ上の各input要素に名前割り当てたいと仮定。jQuery 2コード：

var $inputs = $('input');
for(var j = 0; j < $inputs.length; j++) {
  $inputs[j].id = 'input - ' + j;
}

jQuery 3コード：

var $inputs = $('input');
var j = 0;
for(var input of $inputs) {
  input.id = 'input - ' + j++;
}