jQuery 1.9.0 での変更箇所の自分なりのまとめ

jQuery 1.9.0 のリリースノートを読んで、自分なりにまとめました。 誤訳して間違ったことをまとめてる可能性も否定できないので 読まれる際はご注意下さい。（※ページをそのまま訳したわけではありません）
箇条書きにすると以下のような感じ：

1.9 と 2.0 について

jQuery 1.9 と 2.0 は同じ API を持ちます。しかし、2.0 の方は IE 6-8 のサポートを行いません。1.9 では引き続きサポート されます。そのため、IE 6-8 が自サイトの対象ブラウザに 入っている場合は 1.9 を使用することになります。 jQuery チームは 1.9 と 2.0 の両方を以降 サポートしていくそうです。

リストに戻る

API の整理

以前のバージョンで deprecated になった機能や 一貫性の無い機能を、文書化されているのもされてないのも 含め削除したりするなど、結構な API の整理を行ったようです。 削除された機能を一部挙げますと以下のようになります。

  • jQuery.browser
  • jQuery.fn.andSelf()
  • jQuery.sub()
  • 擬似イベント名の"hover"
  • jQuery.fn.error()

他にも挙動が変更された機能もあり、移行する際にサイトの コードの変更が必要な場合もありそうです。サイトのコードに 影響がありそうな変更は jQuery 1.9 upgrade guide に掲載されています。

※upgrade guide の影響がありそうな変更部分を自分なりにまとめてみました → jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ

移行作業の負担軽減のため、jQuery は jQuery Migrate plugin を提供していて、移行作業をする際はまずこのプラグインを 使用することを推奨しています。 新バージョンの jQuery と共に読み込ませると、 削除された機能を自分のコードが使おうとした場合に 警告してくれたり、変更された挙動を以前の挙動に戻してくれたり してくれます(限界はあります)。

※jQuery Migrate plugin の使い方を自分なりにまとめてみました → jQuery Migrate plugin の使い方と警告文の自分なりのまとめ

リストに戻る

.css([name1, name2, ...])で複数のプロパティの値を一度に取得可能に

表題の通り、.css()にプロパティ名の配列を 渡すことで jQuery オブジェクトが持つ要素群の中で 最初の要素の CSS プロパティの値を複数一度に取得できるように なりました。返り値は、それぞれのプロパティと値を含めた { name1: value1, name2: value2, ... } という形のオブジェクトが返ります。 

// 該当ページの例
var dims = $("#box").css([ "width", "height", "backgroundColor" ]);
//  { width: "10px", height: "20px", backgroundColor: "#D00DAD" }

これは、今までのように 

var elem = $( element ),
    val1 = elem.css( name1 ),
    val2 = elem.css( name2 ),
    val3 = elem.css( name3 ),
    ...

と、.css()を繰り返して 一つずつ値を取得するよりも、.getComputedStyle()の 返り値を使いまわせるため効率が良くなるそうです。

リストに戻る

CSS3 のセレクタのサポート

表題の通り、以下の CSS3 のセレクタがサポートされました。 IE 6 でも使えるそうです。

  • :nth-last-child
  • :nth-of-type
  • :nth-last-of-type
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :target
  • :root
  • :lang

しかし、以下の3つのセレクタは実装したときの負荷が理由で サポートしないそうです。

  • :link
  • :visited
  • :hover
リストに戻る

.finish()の導入

このメソッドは、 要素の type (第一引数)で指定したキュー(type 未指定だとデフォルトのキュー(fx))にキューされている アニメーション全てをそれぞれ順番に最終地点に移動し完了させます。

.stop()ではこれを実現するのは面倒臭く、また、 .stop()には Boolean 型の引数を複数渡すため 混乱するし可読性も低いため、このメソッドが導入されたようです。

.clearQueue()とこのメソッドを組み合わせることで 可読性を増しつつ.stop()でよく使う機能を 置き換えることができます。 (挙げられていた例： http://jsfiddle.net/dmethvin/AFGgJ/ ) .stop()は 1.9 でもそのまま使えます。

※余談ですが、 .clearQueue()の第一引数には空にするキューの名前を 指定できます(キュー名が未指定の場合はデフォルトキュー(fx)が 空になります)。 一方、.stop()も第一引数でキュー名を指定できます。 しかし、.stop()にキュー名を指定しない場合、 デフォルトキューのアニメーションだけでなく、全てのキューの アニメーションが停止します。それにも関わらず .stop()の引数 clearQueue をtrue にするとデフォルトキューのみが空になります。 つまり、.stop()にキュー名を指定しない場合、 アニメーションを停止する対象は全てのキューで、 空にするキューの対象はデフォルトキューのみということになります。 複数のキューを使う方は注意して下さい(というかバグではないかしら？)。

リストに戻る

ソースマップのサポート

対応ブラウザならソースマップを使用できるようになったそうです。 現在のところ Google Chrome だけが対応していますが、 Mozilla Firefox もサポートする予定です。

ソースマップとは、あらかじめ用意されたマップファイルを 利用して、ある形式のソースファイル(例えば圧縮された ファイル)から他の形式のソースファイル(例えば非圧縮の ファイル)へとマッピングする技術のようです。 ソースマップを使うと、例えば jQuery の圧縮バージョンを使用 しているサイトで例外が発生した時、その位置を 非圧縮バージョンでの位置(行)で知ることができます。 そのためデバッグの効率が上がります。

jQuery, Google, Microsoft の CDN にはソースマップのための マップファイルが置かれるようになります(1.9 以降)。 マップファイルの URL は、圧縮バージョンのファイルの拡張子を .js から .map に変えたものになります。 例えば jQuery の CDN なら http://code.jquery.com/jquery-1.9.0.min.map のようになります。 デバッガのオプションでソースマップを使うように設定すれば 使えるようになるそうです。

自分のサーバに jQuery をコピーする場合は、圧縮ファイルの 他に非圧縮版やマップファイルもサーバの同じフォルダに コピーします。 ファイル名は上と同じように 圧縮版の拡張子を .js から .map に変えたものです。

リストに戻る

スポンサードリンク