CDNにホストされているjQueryファイルの読み込み

当ページのリンクには広告が含まれています。

CDNにホストされているjQueryファイルの読み込み方法を解説します。

jQueryファイルの読み込み

CDNとは

CDN（Contents Delivery Network, CDN）とは、ファイルや画像といったWEBコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。

サーバーが世界各地に分散しているので、最適なパフォーマンスを訪問者に提供することができ、一度ダウンロードしたWEBコンテンツはキャッシュされるので、再ダウンロードする必要がないといった利点もあります。

jQueryファイルの読み込み

jQueryファイルをホストしているCDNは3つあります（記事投稿時）。

jQuery

jQueryのCDNを使ったjQueryファイルの読み込み方法

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

Google

GoogleのCDNを使ったjQueryファイルの読み込み方法

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

Microsoft

MicrosoftのCDNを使ったjQueryファイルの読み込み方法。

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

jQueryファイルの動作確認

ページの読み込み時にアラートを表示するコードで、動作確認します。

<script type="text/javascript">
$(document).ready(function(){
  alert("jQueryファイルの読み込み完了でーす。");
});
</script>

GoogleのCDNからjQueryファイルを読み込んだデモで、動作を確認してみましょう。

デモ

デモのソース（HTML + jQuery）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQueryファイルの読み込み - jQueryプラグインまとめのカルマ</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("jQueryファイルの読み込み完了でーす。");
});
</script>
</head>
<body>
<h1>jQueryファイルの読み込みでーす。</h1>
</body>
</html>