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

webデザイナーimane🍪できることから少しずつ

jQuery使ってみたいけどどうやって使うの？
私も、1年使っていなかったら忘れました。
今後のアーカイブ的に、頭の整理のためにこちらに残しました。

ぜひご覧ください！

CSSでもアニメーションなどの動きを付けることが出来ますが、JavaScriptというプログラミング言語を使うとよりカッコいいアニメーションを実装することが出来たり、様々なことが出来るようになります。
そしてJavaScriptをシンプルに記述できるようにしたものがjQueryとなります。
今回はこのjQueryを使えるようにする準備について解説していきます。



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つあります。

  1. CDNで読み込む

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

どちらでも大丈夫なので、両方解説していきます（一般的にはCDNの方が主流かと思います）
まずはCDNを使って読み込む方法です。
CDNとは『Content Delivery Network』の略で、インターネット経由でファイルを配信する仕組みのことになります。
つまりファイルをダウンロードする必要がないのですが、その代わりネット環境がない場所では動きません。
CDNを使うメリットとしては、ブラウザにキャッシュされることによってサイト表示の高速化が期待できるという点です。
そしてCDNを利用できるサイトは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』をクリックするとこちらが表示されます。


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

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

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" 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ですが、他にもいくつか種類がありこちらに載っています。


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


今回はこちらの記事を参考に制作させていただきました！
ありがとうございました。
https://junpei-sugiyama.com/jquery-body/

いいなと思ったら応援しよう！