jQueryをCDNで読みこむ

「jQueryってCDNで読み込むの？そもそもCDNって何？ダウンロードしてから読み込むのと何が違うの？その記述はheadタグ内なの？</body>の直前なの？」

上記の質問を友人に聞かれたのでそれに対するアンサー兼備忘録として記しておきます。

ファイルをダウンロードしてきて読みこむ方法

まずjQueryを使えるようにするようには公式ページより必要なバージョンのフォルダ類をダウンロードしてきてそれを自身が制作している環境内のディレクトリに配置し、HTMLファイルにて読み込みます。
読みこむ際の記述は以下のような感じ

<script type="text/javascript" src="保存場所/jquery-x.x.x.min.js"></script>

ただこのやり方ですともう一つのCDNを使って読みこむ方法に比べ手間が増えます。メリットらしいメリットもあまり無いように感じます。
なので下記ではCDNを使って読みこむ方法を書きます。

CDNを使用し読みこむ方法

まずCDNとは簡単にゆうと他のサーバーに置いてあるjQueryのソースコードを読み込んで使う方法で上記のフォルダをダウンロードしてきて自分のサーバーで読みこむ方法より手間が掛からず便利なアレです。
恐らくですがこのCDNで読みこむ方が主流な気がします。。

以下のコードを</body>タグ内の直前に読み込みます
注意点としては本体ファイル読み込んだ後にjQueryを記述していくファイルを読み込みます。先にjsファイルを読み込んでしまうと機能しません。
順番としては以下のように

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

なぜ</body>の前で読みこむのかとゆうと
HTMLは上から順に読み込まれていくためアニメーションなどを担うファイルを最初に読み込んでしまうとサイトの表示速度が遅くなったり影響を受けてしまいます。なのでHTMLやCSSなどのサイトを表示するためのファイルを読み込みおわってからjQueryを読み込みます。

まあこんな感じかな