投稿日:2022/06/11 最終更新日:2022/06/19
WebページでJavaScriptが動かない場合の解決法
LPやホームページを作成するときにJavaScriptを使います。
画像のスライダーやスクロール連動のアニメーションなど現代のWebでは使わない方が少ないのかもしれません。
ただ、たまーにあるのがなぜか「アニメーションが動作しない」。
そんなときの解決法をまとめていきます。
パスを間違えている
別ファイルのJavaScriptをWEBページに読み込むときは以下の形をよく使うと思います。
<script src="./sample/abc.js"></script>こんなときにやってしまいがちなのはファイルのパスを間違えてしまうことです。
例えば、現在地から1つ上のディレクトリにあるjsフォルダーのabc.jsにアクセスしなければいけないとしたら、上記のパスは間違っていることになります。
正解↓↓
<script src="../js/abc.js"></script>このようにパスのミスが無いか確認してみましょう。
JSの読み込み順序が違う
JavaScriptよりもjQueryなどのライブラリを使用する際によく起こるエラーです。
読み込み順序が違うと、正しくjQueryなどのライブラリーが読み込むことが出来ず、アニメーションが動作しないことがあります。
では、正しい読み込み順序は何か見ていきましょう。
今回はjQueryの有名なライブラリであるSlickを例に説明をします。
＜CSS＞
<head>
・・・
<link href="js/slick-theme.css" rel="stylesheet" type="text/css">
<link href="js/slick.css" rel="stylesheet" type="text/css">
// 追加したい自作のCSSはここに
</head>SlickはCSSの読み込みが必要なライブラリです。
上記のようにライブラリのCSSを読み込む場合はなるべく<head>タグ内の上部に書くようにしましょう。
ただし、<link>タグの並び置ける上部なので<meta>タグよりは下に書きましょう。
また、</body>付近にCSSを書く人がいますが、CSSの読み込みは先に必要なのでこの場合は<head>タグに書く方がいいです。
＜JavaScript＞
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
// 追加したいスクリプトはここに
</body>よくある間違いはここです。
SlickなどのJQueryのライブラリを使用する場合は先にJQueryを読み込む必要があります。
jQueryの読み込みを先に書き、その下にSlickを読み込むようにしなければ正しく動作はしません。
また、Slickを使用する際にスクリプトを書いてアニメーションをさせますが、自分で書いたコードは更に下に書かなければいけません。
なので、順序をまとめると、
・jQueryを読み込む
・Slickをその下に読みこませる
・その下に自作のスクリプトを読み込む
この間違いは知っていないと必ずエラーを起こすので、注意したほうがいいですね。
バージョンが古いor新し過ぎる
これは基本的にJavaScriptのみで書く場合は起こりえませんが、先ほどのようなjQueryを使用する場合に起こりやすいエラーです。
例えば、SlickはjQueryを元にして動作をします。
しかし、jQueryも不具合や便利な機能を追加する度にバージョンアップをします。
現在、jQueryはバージョンは3.6.0であり、2021年3月2日に更新されています。
Slickもその間に問題なく動作するようバージョンアップすれば問題はないですが、JQeuryが大規模なバージョンアップをした場合にはバージョン違いで動作しないことがあります。
なので、もし「パスは間違えていない」「読み込み順序は合っている」場合に疑うべきはバージョン違いによるエラーになりますので、少し古めのバージョンであるJQeuryに差し替えることで解決するかと思います。
