jQueryを読み込む場所は？

Webサイトに動きやインタラクティブな要素を追加するJavaScriptライブラリ、jQuery。そのjQueryを使用するには、HTMLファイルにjQueryを読み込む必要があります。では、jQueryはどこに読み込むのが最適なのでしょうか？

headタグ内が推奨される理由

jQueryを読み込む場所は、HTMLファイルのタグ内が推奨されています。これは、以下の理由によります。

読み込み場所	メリット	デメリット
headタグ内	ページのレンダリング前にjQueryが読み込まれるため、jQueryを使った処理が遅延なく実行される。 HTMLの構造がシンプルになり、コードの見通しが良くなる。	jQueryの読み込みに時間がかかると、ページの表示速度が遅くなる可能性がある。
bodyタグの終了タグ直前	jQueryの読み込みによるページ表示速度への影響を軽減できる。	jQueryを使った処理が、HTMLの解析が完了するまで実行されないため、ユーザー体験を損なう可能性がある。 JavaScriptのコードがHTMLの後ろに来るため、コードの見通しが悪くなる可能性がある。

CDN（Content Delivery Network）を利用すると、jQueryを高速かつ効率的に読み込むことができます。CDNからjQueryを読み込むには、タグ内に以下のコードを記述します。

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

上記のコードでは、Google Hosted LibrariesからjQuery 3.6.0の縮小版を読み込んでいます。バージョンやCDNプロバイダーは必要に応じて変更してください。

A1. jQueryの読み込み完了後にJavaScriptを実行するには、`$(document).ready()`を使用します。

<script>
  $(document).ready(function() {
    // jQueryを使った処理
  });
</script>

A2. はい、可能です。CDNのURLを、自分のサーバー上のjQueryファイルのパスに変更してください。

<head>
  <script src="/path/to/jquery.min.js"></script>
</head>

A3. 基本的には最新の安定版を利用することを推奨します。ただし、古いブラウザに対応する必要がある場合は、古いバージョンのjQueryを使用する必要があるかもしれません。jQueryのバージョン履歴は、jQueryの公式サイトで確認できます。