jQueryを使うなら知っておきたい基礎知識

  • 公開日:
  • 更新日:
jQuery

この記事の目次

jQueryの特徴

JavaScriptライブラリの中で最もよく使われているがjQueryです。jQueryの最大の特徴は、ブラウザによって異なるJavaScriptの仕様の違いを吸収し、同じコードで同じ動作を実現してくれることです。

バージョンによる違い

jQuery 1.x系

ターゲットブラウザにIE8以下が含まれている場合には、jQuery 1.x系を用います。

1.12.0以降は、機能追加などはなく、バグ修正のみが行われます。

jQuery 2.x系

jQueryはブラウザによるJavaScriptの差異を吸収してくれるという大きな利点があります。その一方で、対象となるブラウザが多いほどファイルサイズが大きくなるという問題点もあります。

2013年4月にリリースされたjQuery 2.0では、より軽く・より速いjQueryを実現するために、IE6〜8が対象ブラウザから外されました。同時にリリースされた1.12.4と2.2.4のファイルサイズを比較すると、1.12.4が97KBに対して、2.2.4は86KBです。

1.x系と同様に、2.2.0以降はバグ修正のみが行われます。

jQuery 3.x系

jQuery 2.x系の後継として、2016年6月にjQuery 3.0がリリースされました。この記事の執筆時では、以下のブラウザをサポートしています。

  • デスクトップ
    • Chrome:最新バージョンとその一つ前のバージョン
    • Edge:最新バージョンとその一つ前のバージョン
    • Firefox:最新バージョンとその一つ前のバージョン
    • Internet Explorer:9以上
    • Safari:最新バージョンとその一つ前のバージョン
    • Opera:最新バージョン
  • モバイル
    • Android標準ブラウザ(Android 4.0以上)
    • Safari(iOS 7以上)

当初はjQuery 1.x系の後継としてjQuery Compat 3.0もリリースされる予定でしたが、2016年1月にMicrosoftがIE8以下のサポートを終了したためリリースされませんでした。

CDNの活用

CDNとは

CDN(Content Delivery Network)とは、世界中に配置されたサーバに自サイトのコンテンツのコピーを用意して、アクセス元の閲覧者に近いサーバからコンテンツを配信する仕組み(出典:『WordPress 高速化&スマート運用必携ガイド』)のことです。

jQueryを配信しているCDNには、主に以下の5つがあります。

CDNを利用するメリット

高速で配信される

CDNそのもののメリットとして、jQueryが高速に配信される点が挙げられます。

gzip圧縮された状態で配信される

Check GZIP compressionでGoogle Hosted Librariesが配信しているjQuery 3.1.0をチェックすると、ファイルがgzip圧縮されていることが分かります。

ブラウザにキャッシュされる

HTTPヘッダーを見ると、cache-controlヘッダーでブラウザにキャッシュされる期間が1年に設定されています。

jQueryを配信しているCDNのHTTPヘッダー

また、閲覧者が自サイトで参照しているjQueryを過去に読み込んでいる(他サイトで既に同じjQueryを読み込んでいる)場合、そのブラウザキャッシュが利用されます。

jQueryのフォールバック

CDNからjQueryを読み込むことができない場合に備えて、自サーバに配置したjQueryを読み込むように設定しておく必要があります。このように、代替手段を用意しておくことを「フォールバック」と言います。フォールバック用のコードは以下のように記述します。



jQueryプログラミングで役立つサイト

jQuery Cheat Sheet

サイトの上部にあるプルダウンメニューからバージョンを選択できます。そのバージョンで非推奨の機能はグレーアウト、廃止された機能は打ち消し線が引かれて表示されます。また、各機能のリンクをクリックすると、jQueryの公式APIドキュメントが表示されます。

jQuery Cheat Sheet

参考サイト