jQueryとは - WEBサイト制作の勉強

jQuery（ジェイクエリー）とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリのスタンダードと呼ぶ者もいる

f:id:yachin29:20160425030539j:plain
https://jquery.com/

jQueryの特徴

クロスブラウザー対応
オープンソース（MITライセンス+GPLライセンス）
DOMによる操作が可能
HTML・CSS操作が可能
エフェクトとアニメーション
拡張性が高い（jQuery プラグイン）
Ajax通信が可能（GoogleMapなどに使われている非同期型通信）

jQueryの使い方

jQueryを使用する際には、jQuery本体をダウンロード、もしくはCDN（Content Delivery Network）を使い、HTMLファイルにリンクさせる必要があります。

jQueryのバージョン

jQuery本体はバージョンが1系、2系、3系に分類されていて、新しいバージョンは古いブラウザーに対応させる記述を無くしている分、データが軽くなっています。

本体をダウンロードして使う場合

上記のjQuery公式サイトからダウンロードしましょう。jQueryはバージョンにより動かないメソッドがあるのでバージョンコントロールが必要です。

古いjQueryのバージョンはこちらからダウンロード出来ます
code.jquery.com

また、公式サイトからダウンロードする際に「compressed」と「uncompressed」の２種類のファイルが用意されています。

compressed～……改行などを除去してファイルサイズを抑えたファイル
uncompressed～……圧縮前の元ファイル。構造が見やすいがファイルサイズは大きい

通常、jQuery本体の記述を触る事はほとんど無いので、ファイルにサイズの軽い「compressed」版を使用しましょう。

本体をCDNで使う場合

CDN(Content Delivery Network)とは、ネットワーク経由でコンテンツを提供するサービスで、jQuery本体をダウンロードする事無くネットワーク上にあるjQuery本体を使用する方法です。
CDNを使用する場合のメリットは、他のサイトでも同じCDNのjQuery本体を使用している場合、ユーザーがそのサイトを先に閲覧してればブラウザにキャッシュされるのでjQueryを読み込む必要が無い。つまり、使うサイトが多いほど事前にキャッシュされてる可能性が上がります。
CDNの場合、一見メリットだらけのように見えますが、CDN元でシステムトラブルがあったり、ネットワークが不安定な所では動かないので注意が必要です。またCDNの場合は、Minified（改行が除かれた圧縮版）を使用しましょう。

CDNはjQueryの公式サイト以外にもGoogleやMicrosoftにも用意されています。

developers.google.com

www.asp.net

記述方法

HTMLファイルは上から順番に読み込まれるという原則から、jQueryを使用する際は必ずjQuery本体を最初に記述しましょう。

CDNの場合

<body>
　・・・
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>

coco-factory.jp