jQuery入門 | 概要 | jQueryの適用（ダウンロード、CDN）

Tags:

jQueryの適用

jQueryはJavaScriptライブラリなので、jQueryファイルはJavaScriptファイル、つまり.jsファイルの形で存在する。 したがって、WebページでjQueryを使用するには、まずjQueryファイルをWebページに読み込む必要がある。

WebページにjQueryファイルを読み込む方法は次のとおりである。

  1. jQueryファイルをダウンロードして読み込む方法
  2. CDN（Content Delivery Network）を利用して読み込む方法

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

最新バージョンのjQueryファイルは、次の公式サイトからダウンロードできる。

http://jquery.com/download

ファイルには次の2種類のバージョンがある。

  • 本番バージョン（Production version）: ライブWebサイト用。圧縮されており読みにくいコード。
  • 開発バージョン（Development version）: テストおよび開発用。圧縮されておらず読みやすいコード。

ダウンロードしたjQueryファイルをサーバーに保存し、<script>タグをWebページの<head>タグ内に挿入すればよい。あるいは、コンテンツ読み込み速度の性能を高めるためにページ下部へ挿入する場合もある。

<head>
    <script src="/media/jquery-3.3.1.min.js"></script>
</head>

<script>タグ内にtype="text/javascript"がないのはなぜか。 HTML5では不要である。JavaScriptはHTML5とすべての最新ブラウザで既定のスクリプト言語である。

CDNを利用して読み込む方法

CDN（Content Delivery Network）とは、Webサイトの訪問者がサーバーからコンテンツをダウンロードする必要があるとき、自動的に最も近いサーバーからダウンロードできるようにする技術である。 この技術を利用すると、特定サーバーにトラフィックが集中せず、コンテンツ転送時間が非常に速くなる利点がある。

CDNを利用すると、jQueryファイルをサーバーに別途保存しなくてもjQueryを使用できる。 現在利用できるjQueryバージョン3.xのCDNは次のとおりで、どのCDNを利用しても同じように動作する。

jQuery.com CDN

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Google CDN

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

MS CDN

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

CDNJS CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jsDelivr CDN

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