[jQuery] CDNでjQueryを使う

投稿日：2017年8月15日更新日：2018年5月2日

jQueryを使うにはjQueryモジュールをダウンロードして使うのが一般的ですが、CDNを利用すればjQueryモジュールをダウンロードしなくてもjQueryを使うことができます。

サンプルソース

モジュールをダウンロードする場合とCDNを使う場合を比較してみます。

例１）jQueryモジュールをダウンロードして使う場合

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="./jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#btn1').click(function(event){
    alert("クリックされました");
  });
});
</script>
</head>
<body>
  <input type="button" id="btn1" value="ボタン">
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#btn1').click(function(event){

alert("クリックされました");

});

</script>

</head>

<body>

</body>

</html>

例２）CDNでjQueryを使う場合

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#btn1').click(function(event){
    alert("クリックされました");
  });
});
</script>
</head>
<body>
  <input type="button" id="btn1" value="ボタン">
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#btn1').click(function(event){

alert("クリックされました");

});

</script>

</head>

<body>

</body>

</html>

違いはjQueryの指定のところです。ダウンロードする場合はダウンロードしたモジュールへのパスを指定しますが、CDNの場合はURLを指定します。

URLに「//」以前を記述しないのはわざとです。記述しないと環境に合わせて自動でhttpかhttpsかを判断して補ってくれます。ただし、ローカルファイルで実行する場合は明示的にhttpもしくはhttpsを指定する必要があります。

CDNの種類

jQueryのCDNは、jQuery公式、Google、Microsoftの３か所が公開しています。
どこを使っても違いはないので、お好みで選んでください。

以下、各CDNのURLです。バージョンやタイプは適時読み替えてください。

【CDNの種類】
CDN	URL
jQuery CDN	//code.jquery.com/jquery-3.2.1.min.js
Google CDN	//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
Microsoft Ajax CDN	//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js

まとめ

CDNを使うとjQueryモジュールをダウンロードして自分で管理する必要がなくなるので運用が楽になるというメリットがあります。また、他のサイトで同じCDNを使っていればキャッシュされているので読込み速度が向上するというメリットもあります。

デメリットとしては、インターネットにつながっていなければ使えないのでインターネット必須というぐらいです。

インターネットにつながる環境であれば、こんな便利なものは使わない手はないと思います。(^^)/

執筆者：とら