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

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

IE 6, 7, 8 をサポートしない

表題の通りです。 IE 6-8 を対象にいれたいサイトは jQuery 1.9 と 2.0 は同じ API を持ちますので、 1.9 の方を使用するようにします。 jQuery 1.9 の系統(1.X)も数年はサポートするそうです。

IE 9, 10 でも互換表示モードだと影響を受けます。 そのためmetaタグで X-UA-Compatible を使うか HTTP ヘッダを使って互換表示モードにしないようにします。 (パフォーマンスは HTTP ヘッダの方がわずかに良いそうです) (互換モード指定方法は例えば こちら )

新しいブラウザには 2.0 、古い IE には 1.9 を使いたい場合は 例えば条件付きコメントを使用します。 

<!--[if lt IE 9]>
    <script src="jquery-1.9.1.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

単に古い IE にも対応したい場合には条件付きコメントを 使わなくとも 1.9系(1.X)を読み込ませるだけで大丈夫です。

リストに戻る

jQuery 1.9 と同じ API

2.0 は 1.9 と同じ API になります。そのため 1.9 と同じように、 1.8 から結構な規模の API の整理が行われています。 1.8 以前からアップグレードする場合は 更新ガイド を見て(更新ガイドに書かれている内容は 2.0 でも当てはまります) jQuery Migrate plugin を使用することを推奨しています。

※更新ガイドの変更点や jQuery Migrate plugin については過去に
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ
jQuery Migrate plugin の使い方と警告文の自分なりのまとめ
で記事にしました。

リストに戻る

最近の JavaScript 環境にも

古い IE 用のコードを削除したこともあって、 ブラウザ環境ではない、web サイトではない環境への対応が 強くなっています。そのため、以下の環境では 1.X でのサポートを止め 2.0 の方でサポートします。

  • Google Chrome add-ons
  • Mozilla XUL apps や Firefox の拡張機能
  • Firefox OS apps
  • Chrome OS apps
  • Windows 8 Store (“Modern/Metro UI”) apps
  • BlackBerry 10 WebWorks apps
  • PhoneGap/Cordova apps
  • Apple UIWebView class
  • Microsoft WebBrowser control
  • node.js (jsdom 等と連携)
リストに戻る

サイズが12％小さくなった

表題の通り、2.0.0 のファイルサイズは 1.9.1 よりも 12％小さくなったそうです。 もっとサイズを減らすには Android/WebKit 2.x ブラウザがネックだそうで、 Android 2.x の市場シェアを見てそのサポートを切るつもりのようです。

リストに戻る

カスタムビルド

カスタムビルド自体は jQuery 1.8 から行えたそうですが、 より強化されたらしいです。 12 のモジュールから選択して除外することで サイズをさらに小さくできます。 カスタムビルドの方法については README に書いてあります。 しかし、プラグインもカスタムビルドされた jQuery に 対応する必要があるので、大抵のユーザにとっては フルバージョンの jQuery がベストだろうと jQuery の中の人も思っているようです。

以下、README のカスタムビルドに関する内容を適当にまとめます。 ろくに試してなく、内容もすぐに古くなると思うので、 参考程度にして下さい。

リストに戻る

ビルドの準備

ビルドするには Node.js/npm の最新版と git の 1.7 以降が 必要です。Windows ユーザの場合、git をインストールするには msysgit か Cygwin の git をインストールします。

インストールしたら jQuery のリポジトリから clone します。 

git clone git://github.com/jquery/jquery.git

現在、jQuery は grunt という Node.js を使って動く タスクツールでビルドされています。 grunt をインストールするために grunt-cli パッケージをインストールします。 これは-gをつけてグローバルにインストールします。 

npm install -g grunt-cli

jQuery のフォルダに移動して jQuery が必要とする Node.js の モジュールをインストールします。 この時 grunt もインストールされます。 こっちは-gをつけないでローカルにインストールします。 そうすれば他のプロジェクトに影響を与えません。 

cd jquery && npm install

grunt がインストールされたかを確認します。 

grunt -version

これで grunt を実行すれば jQuery がビルドされます。 引数なしで grunt を実行するとサブモジュール(Sizzleとか)が 備わっているかもチェックしてくれるので カスタムビルドする前に一度引数なしで grunt を実行しておきます。 

grunt

ビルドした jQuery は dist フォルダに 縮小化されたバージョンとソースマップも一緒に置かれます。

リストに戻る

カスタムビルドの方法

grunt に除外するモジュールを指定して実行すれば カスタムビルドを作成できます。 現在のところ除外できるモジュールは以下のようになります。 (※古い可能性があるので README で確認した方がいいと思います)

ajax
全ての AJAX の機能: $.ajax(), $.get(), $.post(), $.ajaxSetup(), .load(), transports, そして .ajaxStart()のような ajax イベントの簡易版
ajax/xhr
XMLHTTPRequest での AJAX 通信のみ
ajax/script
<script> タグでの AJAX 通信のみ; スクリプトの取得に使う
ajax/jsonp
JSONP での AJAX 通信のみ; ajax/script 通信に依存
css
.css()と アニメーションしない .show(), .hide(), .toggle()
deprecated
deprecated として文書に記されているがまだ削除されてない メソッド; .andSelf()とか.size()
dimensions
.width()と.height()。 inner- とか outer- も含む
effects
.animate()と .slideUp()や.hide("slow") のような簡易版
event-alias
.click()や.mouseover()といった イベントをアタッチ/トリガーする簡易メソッド
offset
.offset(), .position(), .offsetParent(), .scrollLeft(), .scrollTop()
wrap
.wrap(), .wrapAll(), .wrapInner(), .unwrap()
sizzle
セレクタエンジン Sizzle 。 このモジュールを除外した場合、 ブラウザのquerySelectorAllメソッドをベースにした 基本的なセレクタエンジン(jQuery の拡張セレクタなどを サポートしない)に置き換わる。 詳細は selector-native.js ファイルを見ること。

例えば event-alias モジュールを除外してビルドするには 以下のようにします。 

grunt custom:-event-alias

モジュールには他のモジュールが必要なものがあります。 例えば effects モジュールはアニメーション処理に .css()を使っているため css モジュールを必要とします。 ビルドではこのようなモジュール間の依存性を判断して、 指定したモジュールに依存するモジュールも除外します。

そのため、以下のように指定すると依存するモジュールも含めて css, effects, offset, dimensions モジュールが 除外されます。 

grunt custom:-css

モジュールの依存関係は Gruntfile.js に書かれています。

全てのモジュールを除外するには以下のようにします。 Sizzle を除外するとquerySelectorAllをベースにした セレクタエンジンを使用するようになります。 

grunt custom:-ajax,-css,-deprecated,-dimensions,-effects,-event-alias,-offset,-sizzle
リストに戻る

これからの予定

jQuery 1.10 をリリースする予定です。 1.10 は 1.9 の後継バージョンで、 2.0 との API の違いやバグを修正したものです。

これからは、1.10 と 2.0、1.11 と 2.1 といった具合に 機能をそれぞれの対応するバージョンで同じになるように 維持していくそうです。 リリースは足並みをそろえることはしないで、 それぞれの系統のスケジュールでリリースするようです。

リストに戻る

スポンサードリンク