jQueryが動かない。もしくはSlickなどのプラグインが動かない

2025.03.24

いくつか原因が考えられます。次の項目を順番にチェックしてください

1. 必要なファイルは全て用意されていますか？また、ファイル名やパスは合っていますか？

HTML内でjQueryファイル (jquery.min.js) やプラグイン用のファイル(slick.min.jsなど)、script.jsの読み込みの記述は全てありますか？
👉🏻すべて読み込まれているけど動かない場合は2へ

HTML内に上記の読み込み記述があっても、ファイル自体が存在していないと動きません。必要なファイルはWebサイトのフォルダ内にきちんと置いておきましょう（CDNで読み込む場合は例外）。
👉🏻まだダメな場合は3へ

読み込み用のタグに記述のフォルダ名やファイル名と、実際のフォルダ名・ファイル名は一致していますか？

👉🏻それでもまだダメな場合は4へ

ファイル名は合っていても、パスが間違えていては正しく読み込めません。ファイルのパスは合っていますか？
👉🏻確認後、まだダメなら次へ行きましょう

jQueryのプラグインを使用する際に、さまざまな参考サイトから単純にコードを丸コピしていると、気づかずにjQuery本体の読み込みの記述が複数回になってしまう場合があります。

jQueryのファイルは最初に1回だけ読み込みます。複数回読み込むとエラーが起こって正しく動かないことがあります。特にjQueryプラグインを読み込んだ後に再びjQuery本体を読み込むとエラーが起こります。

複数回読み込んでいる場合には、最初の一つだけ残して2つめ以降のものは削除しましょう。

👉🏻まだ直らない場合には次へ

HTML内のJSの記述や外部JSファイル内のセレクタが正しく設定できていないと動きません。

JSのセレクタとは、例えば$(‘.slider’) のことです。この中で.sliderの部分（この例ではクラス名）が、HTMLでjQueryを動作させたい箇所（のクラス名など）と一致していますか？下記を参考にしてください。

<!-- HTML -->
<!-- ↓このクラス名と・・・ -->
<div class="slider">
    <img src="image.jpg" alt="image01">
    <img src="image.jpg" alt="image02">
</div>

// JS
$(function(){
// ↓ ・・・このクラス名が同じでないと動きません。
  $('.slider').slick({
    //中略
  });
});