LoginSignup
39

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-07-15

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>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39