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

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

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

Contents

CDNとは？
メリット・デメリット
- メリット
- デメリット
jQueryのCDNホストと設定方法
まとめ

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行だけです。簡単です。