【初心者向け】jQueryとは？CDNを使った本体の読み込み方についても分かりやすく解説

jQuery使ってみたいけどどうやって使うの？

CSSでもアニメーションなどの動きを付けることが出来ますが、JavaScriptというプログラミング言語を使うとよりカッコいいアニメーションを実装することが出来たり、様々なことが出来るようになります。

今回はこのjQueryを使えるようにする準備について解説していきます。

今だけ！5大無料特典あり🎁

コーディングの時給アップにはこちら！

800部突破！※ 4月15日値上げ予定

jQueryとは？

jQueryとはJavaScriptのためのライブラリであり、簡単に言えばJavaScriptでよく使う物をまとめて簡単に使えるようにした物がjQueryとなります。

例えばJavaScriptだと数十行にもなるコードを、jQueryだと数行で書けたりします。

そのためWeb制作初心者にはとっつきにくいJavaScriptと比較して、非常に扱いやすい欠かせない物となっています。

jQueryで出来ること

具体的にどんな事が出来るのか、というのは当ブログのjQueryカテゴリーを見て頂ければ分かると思いますが、主にWebサイトの動きに関わる部分を実装することが出来ます。

例えば、

アコーディオンメニュー
タブメニュー
ハンバーガーメニュー
スライダー
フェードイン
モーダルウィンドウ

などなど、Web制作ではどれもよく実装するものですが、これらをJavaScriptで全部書こうとしたらかなり大変です。

そこでjQueryを使えば比較的簡単に実装することが可能です。

また、スライダーのプラグインである『slick』や、スクロールして表示領域に入ったらフェードイン出来る『inview.js』などのプラグインはjQueryを使う必要があります。

つまりjQueryがあれば便利なプラグインを使用することも出来るということです。

ひとまずは『Webサイトで動きに関わるコードを簡単に書くことが出来るもの』と覚えておけば大丈夫です。

CDNを使ったjQuery本体の読み込み方

jQueryの使い方ですが、まずjQuery本体を読み込む必要があります。

そして読み込む方法は2つあります。

CDNで読み込む
ファイルをダウンロードして読み込む

どちらでも大丈夫なので、両方解説していきます（一般的にはCDNの方が主流かと思います）

まずはCDNを使って読み込む方法です。

CDNとは『Content Delivery Network』の略で、インターネット経由でファイルを配信する仕組みのことになります。

つまりファイルをダウンロードする必要がないのですが、その代わりネット環境がない場所では動きません。

CDNを使うメリットとしては、ブラウザにキャッシュされることによってサイト表示の高速化が期待できるという点です。

そしてCDNを利用できるサイトはjQueryの公式サイト以外にもありますが、まずは公式サイトからコピーする方法で進めます。

jQuery公式サイト

公式サイトにアクセスすると以下の画面が表示されます。

jQuery公式サイト：jQueryバージョン一覧

色々書いてありますが、まずjQuery 1.x、jQuery 2.x、jQuery 3.xと3種類あります。

これは最新バージョンである3系でOKです。

さらに3系にも4種類あります。

uncompressed：通常バージョン
minified：圧縮バージョン
slim：ajax、effectsモジュールなど一部の機能を削除したバージョン
slim minified：slimの圧縮バージョン

特に理由がなければ軽量の『minified』でOKです。

そして赤枠の『minified』をクリックするとこちらが表示されます。

jQuery本体読み込みコード

このコードをコピーして使います（右の青いアイコンをクリックしてもコピーできます）

上記コードはこちらになるので、ここからコピーしてもOKです（以下のコードは2022年8月現在の最新版です）

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

そしてこれをheadタグ内、もしくはbody閉じタグ直前で読み込みます。

<!-- headタグ内の場合 -->
<head>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>

<!-- body閉じタグ直前の場合 -->
<html>
  <head></head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  </body>
</html>

headタグ内とbody閉じタグ直前のどちらがいいかですが、body閉じタグ直前の方が推奨されています。

なぜならHTMLは上から順に読み込むので、解析に時間がかかるjQueryが上の方にあるとページの表示速度が下がってしまうからです。

ただし自作したjsファイルなどより、jQuery本体は上に書きましょう。

<html>
  <head></head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  <script src="js/main.js"></script>
  </body>
</html>

こうしないと自作したjQueryのコードなどは動作してくれないのでご注意下さい。

またプラグインなど外部ファイルが増えると読み込む順番によっては動かなくなることもあるので、その場合は順番を変えてみると解決することもあります。

CDNの種類

先ほどはjQuery公式サイトに載っていたCDNですが、他にもいくつか種類がありこちらに載っています。

jQuery公式以外のCDN一覧

どれを使っても問題はありませんが、特に理由がなければ公式か大手のGoogleのCDNを使うのがいいかと思います。

jQuery公式サイト（先ほどと同じ）

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

jQuery公式サイト

Google CDN

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

Google CDN

Microsoft CDN

<script src=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js”></script>

Microsoft CDN

CDNJS CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CDNJS CDN

jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

jsDelivr CDN

ファイルをダウンロードしてjQuery本体を読み込む方法

まず以下のjQuery公式サイトにアクセスし、ファイルをダウンロードします。

Download jQuery | jQuery

2022年8月現在の最新は『Download the compressed, production jQuery 3.6.0』となります。

jQueryダウンロードページ

これを単純にクリックしてもコードが羅列されたページが表示されるので、jsファイルとして保存しましょう（ファイル名は『jquery-3.6.0.min.js』）

Windows：右クリックで『名前を付けてリンク先を保存』をクリックして保存
Mac：右クリックで『リンク先を別名で保存』をクリックして保存

3.6.0がいくつもあるので迷いますが『production』は圧縮されたもので『development』は非圧縮の物となります。

『production』の方がファイルサイズは小さいので読み込みが速いです。

『development』の方はファイルサイズは大きいですがファイルの中身は見やすいです。

特に編集する予定でもない限り、圧縮された『production』を使えばOKです。

そしてこれをCDNと同様にbody閉じタグ直前で読み込みます（index.htmlと同じ階層にあるjsフォルダにファイルがあるとします）

<html>
  <head></head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  <script src="js/jquery-3.6.0.min.js"></script>
  </body>
</html>

あとはプラグインや自作のjsファイルを読み込みますが、これはCDNを使った方法でも書きましたがbodyの閉じタグ直前且つjQuery本体の後に書きましょう。

<html>
  <head></head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/main.js"></script>
  </body>
</html>