IEの条件付きコメントを使ったjQuery1系2系の使い分け

jQuery2.xとIE

jQueryの1系と2系、実は機能的に大きな違いはありませんが、2系は1系に比べて軽量でかつ高速です。
なぜ軽量で高速なのかというと、2系はIE6～8をサポートしなくなったから。

私は常に最新のバージョンのものを使用したいので、迷わず2系を使用していましたが、やはり古いIEを使用している人はいるもの。サポートしません、という手もありますが、古いIEもサポートするには、やはりjQuery1系を使用しなければいけません。

IEの条件付きコメント

条件付きコメントとは、Microsoft Internet Explorerによって解釈されるHTMLソースコード中にある条件付きのステートメントである。条件付きコメントは、マイクロソフトのInternet Explorer 5ブラウザーで初めて登場し、バージョン9までサポートされた。なお、バージョン10以降はこの機能は廃止され、他のブラウザと同様、単なるコメントとして扱われる事となった。 Wikipedia

この条件付きコメントを使用することで、古いIEはjQuery1系を使用し、IE9以上かつIE以外のブラウザは2系を使用するということが可能になります。

なお、jQueryの1.10と2.0、1.11と2.1のようにペアになっておりそれぞれ互換性をもっています。1系は1.10、2系は2.1.1を使用するなどバージョンの齟齬がおきないようにしましょう。

使用可能な演算子

IE6以上だの未満だのIE6を含むとか含まないとかいろいろ指定はできますが、今回は、jQuery1系2系をそれぞれ使用する場合を想定し、IE8以下か、IE9以上かを判定する方法を説明します。

IE8以下かどうか

<!--[if lte IE8]>
<script type="text/javascript" src="/jquery/1.11.1/jquery.min.js"></script>
<![endif]-->

ltの場合、IE8を含まない、e(=equal)をつけるとIE8を含む

IE9以上かどうか

<!--[if gte IE9]>
<script type="text/javascript" src="/jquery/2.1.1/jquery.min.js"></script>
<![endif]-->

gtの場合、IE9を含まない、e(=equal)をつけるとIE9を含む

IE9以上、かつIE以外のブラウザに対応する場合

<!--[if gte IE 9]><!-->
<script type="text/javascript" src="/jquery/2.1.1/jquery.min.js"></script>
<!--<![endif]-->

jQuey Migrate

1系だの2系だのいってきましたが、1系の中でもバージョン1.9から大きな変更が加えられ、いくつかの機能が削除されました。

現在は削除されていないものの削除予定のものや、今後削除されていく機能はあると思います。
バージョンがあがることで突如機能が削除されることはなく、削除予定段階を経て削除されるわけですが、それでもすぐにバージョンアップに対応するのは難しいということもあります。

そんなときは、jQuery Migrate機能を使用することで、最新のjQueryを使用しつつ、削除済み機能を使用するということが可能になります。

非圧縮版のMigrateを使用した場合、Firebugなどのコンソールに、使用中のjQueryバージョンではdeprecatedだよーとかremovedだよーといった警告を表示してくれます。

デバッグやバージョンアップのためのテストを行っている場合であれば、この警告を利用してdeprecatedやremovedな機能を最新のものに置き換えるヒントになるかもしれません。

使用方法は簡単、ただMigrateファイルを読み込むだけです。
サンプルはCDNのファイルを使用した方法です。

非圧縮版

削除予定、もしくは削除済みのメソッドを使用した場合、コンソールに警告を発します。

<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

圧縮版

非圧縮版と異なり、警告はでません。通常使用時と違和感無く使用できます。

<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>