jQueryのプラグイン「slick」をCDNで使う際の初歩的な注意点

今回CDN¹を利用し、jQueryのプラグインであるslickを使ってスライドを作成したところ、スライドが動かないという問題に直面しました。
調べてみたところ非常に初歩的なミスだった為、備忘録代わりに書き残します。

あれ？コードを書いたのにスライドが動かない？

html、css、js、画像を用意し、htmlファイルのbody直下に下記コードを記載しましたが、スライドが動きませんでした。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="./js/slideshow.js"></script>

パスは合っているのになぜ・・・？
自己解決はできなかった為、早速グーグル先生に聞いてみました。

jQuery本体を上、slickのスクリプトを下に記載すること！

原因は単純明快、jQuery本体より上にslickのスクリプトを記載してしまっていたことでした。
slickに限ったことではありませんが、jQueryを使う際にはスクリプトよりも上でjQuery本体を読み込む必要があります。
この順番を厳守しないとjQueryのコードは動きません。
原因が分かったところで、下記のようにコードを書き替えました。

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="./js/slideshow.js"></script>

これで問題なくスライドが動きました！

まとめ

プログラミング初心者の皆さん(主に自分)、jQueryを利用する際には、
1.ライブラリ本体のパスを記載
2.スクリプトのパスを記載
この順番を厳守するように気を付けましょう！

参考

slickのスライダーが動かない6つの原因【WordPressのケースも解説】

1. 「Contents Delivery Network」の略。コード内にURLを記載することでオンライン上のライブラリが簡単に利用できる方法。 ↩