8/30〜|ライターのダイチが運営している個人メディア「ダイブログ」とPENGIN BLOGを統合しました

【最新版】jQueryのCDNを読み込む方法【超簡単です!】

jQueryを使用する時にCDNの読み込ませることは必須です。

CDNを誰でも迷わず読み込ませられる方法をご紹介します。

jQueryとは

jQueryとはJavaScriptのライブラリの一つです。

ライブラリとは、プログラムの処理をまとめたものを意味します。
JavaScriptで書くと何行にも及ぶ処理が、jQueryを使用することで短縮して記述することができます。

jQueryを使用すると、JavaScriptの記述が短くて済むと覚えておけば問題ないです。

CDNとは

そもそもCDNについて知らない方も多いかと思いますので解説をしていていきます。

CDN(Contents Delivery Network, CDN)とは、外部のファイルをリンク1つで使用することができる仕組みのことです。

本来なら、ファイルをダウンロードしてという手間がかかりますが、このCDNを使用することでその手間を省くことができます。

CDNを読み込む方法

jQueryCDNトップページ

CDNのコードは公式サイトからもコピーできます。

jQueryのCDN

  • uncompressed・・・通常盤
  • minified・・・圧縮版
  • slim・・・非推奨の API を削除したもの
  • slim minified・・・slimの圧縮版

CDNはコードを読み込むだけなので、軽いminifiedを選んでおけばよいです。

また、3.X、2.X、1.Xとバージョンがありますが、基本的に最新の3系統を選択しておきます。

jQueryのCDNを読み込む方法は、</body>の直前で、jsファイルよりも上(先)に読み込ませましょう!

以下、CDNのコードです!

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

※バージョンが変わると「jquery-◯.◯.◯」の◯の箇所が変わるので、最新版を確実に知るなら上の公式サイトから確認しておきましょう。

HTMLに記述する箇所は以下の記述です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery基礎</title>
</head>
<body>
  
 // →この部分にCDNの記述をコピペする//

  <script src="script.js"></script>
</body>
</html>

※cssなどと同様に<head></head>の中に記述することを推奨している記事もありますが、読み込まれないトラブルが発生するケースが多いので必ず</body>の直前で、jsファイルよりも上(先)に読み込ませてください!

CDNの種類

上記では、jQueryの公式から出ているjQueryのCDNを紹介しましたが、他にもjQueryを使用する際に使用できるCDNがありますので紹介していきます。

jQueryのダウンロード

こちらのページ内に、公式以外のCDNページが記載されています。

jQueryダウンロードページ

jQueryのCDN

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

こちらは、先ほどから紹介しているjQueryの公式から出ているjQueryのファイルを読み込ませるためのCDNです。

GoogleのCDN

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

Google jQueryCDN

こちらは、Googleから出ているjQueryのファイルを読み込ませるためのCDNです。基本的には、jQueryの公式から出ているものを使用して問題ありません。

MicrosoftのCDN

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

Microsoft jQueryCDN

こちらは、Microsoftから出ているjQueryのファイルを読み込ませるためのCDNです。スクリプトタグの中のsrc属性値(URL)を、最新のものに書き換えて使用すればOKです。

Googleと同様に基本的には、jQueryの公式から出ているものを使用して問題ありません。

jQueryの学習方法

jQueryの学習方法は、様々ありますが当ブログでは以下のステップをおすすめしています!

  1. 【これだけ覚えて!】jQueryの書き方
  2. 【jQuery入門】頻出メソッド・文法の基礎を徹底解説します!
  3. jQueryのイベントを一覧で紹介!シーン別の使い方も解説します!
  4. 【コピペでできる!】jQueryを使用したハンバーガーメニューの作り方

あとは実践あるのみです!デザインカンプから実装してみよう!

【デザインカンプ無料配布】未経験からのコーディング学習ステップ