このような疑問の解決記事です。
jQueryを実装したものの「動かない・・・」ということはないでしょうか？
その原因は複数ありますが、慣れてくればパッと対処することができます。
そこで本記事では、どのような視点で原因を探っていけば良いか、また、その対処法について解説していきます。
【原因①】jQuery本体が読み込まれていない
まず、最初に確認すべき点です。
jQueryを使用しようと思ったら、「jQuery本体」が読み込まれていないといけません。
確認方法としては、該当ページのソースコードを検索し、以下のようなファイルが読み込まれているかを確認します。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=5.7.2' id='jquery-js'></script>
jQueryにはバージョンがあり、必ずしも上記のような記述（Ver 1.12.4）とは限らないので、”jquery“などのワードでページ内検索をかけると良いです。
検索しても見つからない場合はは、jQuery公式サイトなどからソースコードを取得し、読み込ませましょう。
jQueryの読み込ませ方
jQuery本体の読み込ませ方は、下記の2通りです。
- CDNを利用する
- ファイルを自サーバー内に設置して利用する
ここでは②は割愛し、よりカンタンな①の「CDNを利用する」の方法で解説します。
※CDN利用の場合は、プロトコルを統一する
CDN利用する時に注意点があります。プロトコルを統一することです。
自サイトURLが”https“になっている場合、読み込ませるjQuery本体のパスも”https“になっていないといけません。
例えば、本サイトのURLはhttps://corecolors.net/ですが、読み込ませるjQueryも
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=5.7.2' id='jquery-js'></script>
で、src属性内はhttpsになっているのが分かるかと思います。
これが↓のようだと動作しません。
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=5.7.2' id='jquery-js'></script>
違いは、src属性内のパスが”http“か”https“かです。自サイトとjQueryリンクのプロトコルは揃えるようにしましょう。
※jQuery本体の設置について、もっと詳しく知りたい方は、下記記事をご参考ください。
【原因②】ライブラリが読み込まれていない
jQuery本体を読み込んだら、次はライブラリが読み込まれているかをチェックします。
使いたいjQueryのメソッドを一度検索してみます。
解説記事がヒットするので、それを確認し、ライブラリを読み込ませる必要があれば、読み込ませます。
もし読み込まれていない場合は、読み込ませましょう。
※ライブラリが不要なjQueryもある
例えばスムーススクロールなどは、ライブラリがなくても実装することが可能です。
下記記事で紹介されているものなどです。
jQueryでスムーススクロールを実装する方法【初心者向け】現役エンジニアが解説
jQuery本体と、上記記事より引用した、↓のJavaScriptの記述があれば動きます。
$('a[href^="#"]').click(function() {
// スクロールの速度
let speed = 400; // ミリ秒で記述
let href = $(this).attr("href");
let target = $(href == "#" || href == "" ? 'html' : href);
let position = target.offset().top;
$('body,html').animate({
scrollTop: position
}, speed, 'swing');
return false;
});
スムーススクロールのようなライブラリが不要なものは、読み込み速度などに影響しますので書かない方が良いでしょう。
【原因③】自サイトに適用させる記述がない
jQuery本体と、（必要であれば）ライブラリを読み込んだら、動作させる記述を追加します。
例えば、使いたいものがスムーススクロールの場合、「jQuery スムーススクロール」などど検索し、解説記事を参考に、自サイトのファイルに追記しましょう。
例えば、下記記事の場合。
slickの使い方からカスタマイズまで【スライダープラグイン決定版】
（2021年7月現在）以下の記述が記載されています。
HTMLファイル
<ul class="slick01">
<li><img alt="画像1" src="img/photo1.jpg" /></li>
<li><img alt="画像2" src="img/photo2.jpg" /></li>
<li><img alt="画像3" src="img/photo3.jpg" /></li>
</ul>
JavaScript（JS）ファイル
$('.slick01').slick({ //{}を入れる
autoplay: true, //「オプション名: 値」の形式で書く
dots: true, //複数書く場合は「,」でつなぐ
});
これを自サイトのHTMLコードに合わせる形で、クラス名を変更します。
JSファイルの”.slick01“のクラス名が一致していないと、メソッドを実行できないので、これを揃えます。上記記述をそのままコピペするのであれば、一致しているので変更不要です。
もし、自サイトでクラス名が”slider“などであれば、JSファイルもそれに合わせて、
$('.slider').slick({
autoplay: true,
dots: true,
});などと書き換えます。
このように、自サイトに適用させる記述が必要です。
【その他】jQuery本体とライブラリのバージョンにも注意
最後にもう一つ、注意点があります。
読み込ませるライブラリによっては、jQuery本体のバージョンに対応しておらず、動かないことがあります。
例えば、「本体が新しく、ライブラリが古いもの」だと動かない場合などです。
その場合、本体バージョンを古くすると動作することがあります。
他のライブラリが動かなくなる可能性も
ただ本体バージョンを古くした場合、読み込ませている他ライブラリが動作しなくなる恐れもあります。
そうなると本末転倒です。
【対策】同じ機能を持つ、別ライブラリを探す
万が一、上記のようであれば、同じことができる別ライブラリを探すと良いでしょう。
例えば、「slickslider」であれば、他にも「bxslider」という同じような機能を持ったものがあります。
もし、「ライブラリバージョンが古くて動かない」のが原因であれば、検索してみて別ライブラリで実装ができないかと試してみてください。
まとめ
本記事では、「jQueryが動かない時の原因と対策」について、以下のことを解説しました。
- jQuery本体が読み込まれていない
- ライブラリが読み込まれていない
- 自サイトに適用させる記述がない
- 【その他】jQuery本体とライブラリのバージョンにも注意
動かない時は原因を探り、特定したらそれぞれの対策方法を取ってみましょう。
何度も対応していれば、パッと閃くようになります。
