【jQuery】超簡単！CDNのjQueryを読み込む方法

もはやWeb制作に必須と言って過言ではないjQueryです。だからこそ、なるべく無駄な手間は省き、制作効率を上げていきたいところです。

CDNを使用すれば、最新版を常に読み込むことができたり、バージョン管理ができたりと便利です。そこで今回はCDNのjQueryを読み込む方法をやっていきたいと思います。

Contents

1 CDNとは？
2 メリット・デメリット
- 2.1 メリット
- 2.2 デメリット
3 jQueryのCDNホストと設定方法
4 まとめ

CDNとは？

まずは基本的な「CDN」とは何かを確認しましょう。

コンテンツデリバリネットワーク(英: content delivery network、CDN)とは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。コンテンツ配信網とも。
コンテンツデリバリネットワーク – Wikipedia

要は、Web上に「jQuery」やその他プラグインを置いておくから自由に使ってね、ということです。

メリット・デメリット

メリット

毎回jQueryをダウンロードしてきて、サーバーへアップしてHTMLで読み込んで、というのは面倒です。CDNはWeb上にありますので「CDNへのリンクを設定するだけなので便利」です。

また、ブラウザが一度Web上からダウンロードしたコンテンツはキャッシュされますので、2回目以降、ダウンロードが発生せず「表示の高速化が期待できるのでユーザビリティの向上」につながります。

デメリット

自分のサーバーにアップしているわけではないので、CDN配信元が配信をしなくなったり、サーバがダウンしたら使えなくなります。

jQueryのCDNホストと設定方法

jQueryをホストしている主なCDNは以下の3つになります。いずれも「head」内に下記のリンクを設置するだけです。

jQuery

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

jQueryのCDNにはサードパーティによる改変が行われていないことを証明する「integrity」属性と「crossorigin」属性があります。

Google

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

Microsoft

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

今回はjQuery本体のCDNを使って設置のテストをやってみます。簡単なサンプルで見てみましょう。ボタンクリックでアラートを表示します。

サンプル

HTML＆jQuery

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>超簡単！CDNのjQueryを読み込む方法</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
	$(function(){
		$('button').on('click',function(){
			alert('hello CDN');
		});
	});
</script>
<style>
	button{
		font-size: 20px;
		padding: 20px;
	}
</style>
</head>

<body id="top">
	<div class="contents">
		<button>アラート表示</button>
	</div><!--contents-->
</body>
</html>

6行目でCDNのjQueryを読み込んでいます。たったこの1行だけです。簡単です。