jQueryとは

jQuery

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


https://jquery.com/



 

jQueryの特徴

jQueryの使い方

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

jQueryのバージョン

jQuery本体はバージョンが1系、2系、3系に分類されていて、新しいバージョンは古いブラウザーに対応させる記述を無くしている分、データが軽くなっています。
jQueryは特にIEに対応させる為に多くのデータを使用しているので、IEに対応させる必要がない場合は必ず3.x系を使用するようにしましょう。



www.atmarkit.co.jp


 

バージョンのルール

X.Y.Z
  • X: メジャーバージョン 見た目や操作性に影響を及ぼすような大きな変更やページの追加など
  • Y: マイナーバージョン 細かな機能向上や部分的な情報の追加やページの修正など
  • Z: パッチバージョン バグ修正や誤字脱字の訂正など
本体をダウンロードして使う場合

上記の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本体を最初に記述しましょう。

jQuery本体をダウンロードしている場合

<head>
　・・・
<script src="js/jquery-3.4.1.min.js"></script>
</head>

もしくは

<body>
　・・・
<script src="js/jquery-3.4.1.min.js"></script>
</body>
CDNの場合
<head>
　・・・
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

 

基本形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  //jQueryを利用したコード
</script>
</head>
<body>
</body>
</html>

 


CDNを使用する場合、万が一ネットワークが不安定になった時の事も考えて、バックアップ用にダウンロードしたjQueryと両方を記述する方法もあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
window.jQuery || document.write('<script src="jquery-3.4.1min.js"><\/script>');</script>
</script>
</head>
<body>
</body>
</html>