このような疑問の解決記事です。
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にはバージョンがあり、必ずしも上記のような記述とは限らないので、”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本体と、上記記事より引用した、↓の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ライブラリによっては、jQuery本体のバージョンに対応しておらず、動かないことがあります。
例えば、「本体が新しく、ライブラリが古いもの」だと動かないなどです。
その場合、本体バージョンを古くすると動作することがあります。
他のライブラリが動かなくなる可能性も
ただ本体バージョンを古くした場合、読み込ませている他ライブラリが動作しなくなる恐れもあります。
そうなると本末転倒です。
【対策】同じ機能を持つ、別ライブラリを探す
万が一、そのようになるようであれば、同じことができる別ライブラリを探すと良いです。
例えば、上記のslicksliderであれば、他にもbxsliderというライブラリが同じような機能を持っています。
もし、「ライブラリバージョンが古くて動かない」のが原因であれば、検索してみて別ライブラリで実装ができないかと試してみてください。
まとめ
本記事では、「jQueryが動かない時の原因と対策」について、以下のことを解説しました。
- jQuery本体が読み込まれていない
- ライブラリが読み込まれていない
- 自サイトに適用させる記述がない
- 【その他】jQuery本体とライブラリのバージョンにも注意
動作しない時は、上記の上から順に確認し、原因と特定したらそれぞれの対策方法を取ってみましょう。適切な対処ができれば動いてくれるはずです。
