Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした