jQueryのCDNの記述場所は？

jQueryを使う際に、CDNを利用する方法があります。 CDNを使うことで、jQueryを自身のサーバーに置く必要がなくなり、ページの表示速度の向上などが期待できます。しかし、CDNの記述場所を間違えると、jQueryが正しく読み込まれず、JavaScriptが動作しないといった問題が発生することがあります。

CDNの記述場所

HTMLにjQueryのCDNを記述する場所は、以下の記述です。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
</head>
<body>

  <!-- ページコンテンツ -->

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

jQueryのCDNを読み込む方法は、`

`の直前で、jsファイルよりも上（先）に読み込ませましょう！

※CSSなどと同様に`<head>`タグの中に記述することを推奨している記事もありますが、読み込まれないトラブルが発生するケースが多くあります。

CDN記述場所に関する注意点

項目	内容
CDNのバージョン	利用するjQueryのバージョンに合わせたCDNのURLを指定する必要がある。バージョンが古いと、最新の機能が使えなかったり、セキュリティ上の問題が発生する可能性があります。
スクリプトの読み込み順序	jQueryのCDNは、jQueryを使用する他のJavaScriptファイルよりも前に読み込む必要がある。jQueryに依存するスクリプトが、jQueryの読み込み前に実行されるとエラーが発生します。
HTTPSとHTTP	ページがHTTPSで配信されている場合は、CDNもHTTPSで配信されているものを使用する。混在コンテンツの問題を避けるため、ページとCDNの通信プロトコルは統一する必要があります。

CDNを利用するメリット

ページの表示速度の向上：CDNは世界中にサーバーが設置されているため、ユーザーに近い場所からファイルが配信され、ページの表示速度が向上する可能性があります。
* サーバー負荷の軽減：CDNを利用することで、自身のサーバーからjQueryを配信する必要がなくなり、サーバー負荷を軽減することができます。
* キャッシュの利用：CDNは広く利用されているため、ユーザーのブラウザにjQueryがキャッシュされている可能性があり、2回目以降のアクセスでjQueryの読み込みを省略できることがあります。

参考資料

* [jQuery CDN](https://jquery.com/download/#using-the-cdn)

よくある質問

Q1: CDNが読み込まれていない場合はどうすれば良いですか？

A1: まずは、CDNのURLに間違いがないか、ブラウザの開発者ツールでエラーが出ていないかを確認しましょう。また、CDNサーバーが一時的にダウンしている可能性もあるため、時間を置いてから再度アクセスするか、別のCDNを試してみましょう。

Q2: jQueryのバージョンはどのように選べば良いですか？

A2: 基本的には最新バージョンを使用することを推奨しますが、古いブラウザへの対応が必要な場合は、対応するバージョンを選択する必要があります。jQueryの公式サイトで、各バージョンが対応しているブラウザを確認することができます。

Q3: CDNではなく、自分のサーバーにjQueryを配置しても良いですか？

A3: はい、可能です。ただし、CDNを利用するメリットを享受できなくなるため、ページの表示速度やサーバー負荷に影響が出る可能性があります。CDNを利用するかどうかは、サイトの規模や要件に応じて判断する必要があります。

その他の参考記事:jquery dropdownplain