もはやWeb制作に必須と言って過言ではないjQueryです。だからこそ、なるべく無駄な手間は省き、制作効率を上げていきたいところです。
CDNを使用すれば、最新版を常に読み込むことができたり、バージョン管理ができたりと便利です。そこで今回はCDNのjQueryを読み込む方法をやっていきたいと思います。
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」属性があります。
<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行だけです。簡単です。
まとめ
今回はjQuery本体だけですが、「jQuery UI」や「jQuery Mobile」もホストされていますのでぜひ使ってみてください。