jQuery Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

そしてJavaScriptをシンプルに記述できるようにしたものがjQueryとなります。

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

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

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

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

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

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

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

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

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

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

jQuery公式サイト

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

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本体読み込みコード

jQuery本体読み込みコード

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

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

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

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

<!-- headタグ内の場合 -->
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<!-- body閉じタグ直前の場合 -->
<html>
  <head></head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 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.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script src="js/main.js"></script>
  </body>
</html>

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

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

 

CDNの種類

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

jQuery公式以外のCDN一覧

jQuery公式以外のCDN一覧

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

 

jQuery公式サイト(先ほどと同じ)

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

jQuery公式サイト

 

Google CDN

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

Google CDN

 

Microsoft CDN

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

Microsoft CDN

 

CDNJS CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CDNJS CDN

 

jsDelivr CDN

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

jsDelivr CDN



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

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

Download jQuery | jQuery

2023年9月現在の最新は『Download the compressed, production jQuery 3.7.1』となります。

jQueryダウンロードページ

jQueryダウンロードページ

これを単純にクリックしてもコードが羅列されたページが表示されるので、jsファイルとして保存しましょう(ファイル名は『jquery-3.7.1.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.7.1.min.js"></script>
  </body>
</html>

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

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

まとめ

ここまででjQueryは使えるようになったはずですが、実際にjQueryを使ったアニメーションなどを作ってみないとちゃんとjQueryが使えるようになったか分からないと思います(動くはずなのに動かないなど)

当ブログではjQueryを使った実装についても書いているので、ぜひ参考に実装してちゃんと動くか試してみて下さい。

関連記事jQuery関連記事

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-jQuery, Web制作