2024/07/08
2023/11/26 （更新日: 2023/11/28）
JavaScriptとjQueryの読み込み順【効かない問題の対処法】
“ChatGPTやネット検索で出てきたコードをそのままコピペしたのに上手く動かない”
こんな経験はありませんか？
現代ではJavascriptの知識がなくても簡単な機能はほとんどコピペで作れてしまいます。ただ、そのままコピぺしても自分のサイトでは上手く動かないなんて事はしょちゅうです。IDやクラス名をちゃんと合わせているのに動かない、、、そんな時はscriptファイルの読み込み順が正しくないことが非常に多いです。
JavaScript・jQueryの記述はサイト内で読み込む順番に決まりがあります。詳しく解説していきますので、しっかりルールを理解しJavascriptのエラーから解放されましょう。
JavaScriptの読み込み順の基本
JavaScriptコードは、HTML文書内のどこに配置されるかによって、その挙動が異なります。特にDOM要素に依存するJavaScriptにとって重要です。
【DOMとは？】
DOM（Document Object Model）は、ウェブページの各要素（例えば、見出しや段落、画像などhtmlタグ）をプログラムで扱えるようにするためのシステムです。これを使って、ウェブページの内容やスタイルを変更します。
要するに、スクリプトが実行される時点でhtmlコードが読み込まれていない場合はエラーになります。
実例を挙げます。
よくある”サイト訪問時にローディング画面を出す”を実装してみましょう。
<!DOCTYPE html>
<html>
<head>
<title>ローディング画面の例</title>
<script src="script.js"></script>
</head>
<body>
<div id="loading">ローディング中...</div>
<h1>コンテンツ</h1>
</body>
</html>
document.getElementById("loading").style.display = "block";<head>内でJavaScriptを読み込んでおり、スクリプトはid="loading"の要素の表示スタイルを変更しようとします。しかし、スクリプトが実行される時点で<body>内の要素はまだ読み込まれておらず、document.getElementById("loading")はnullを返します。その結果、styleプロパティにアクセスしようとするとエラーが発生するのです。
この問題を解決するためには、JavaScriptを</body>タグ直前に移動させid="loading"の要素が読み込まれた後にスクリプトが実行されるようにするか、DOMContentLoadedイベントを使用して、DOMが完全に読み込まれた後にスクリプトを実行するようにします。
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("loading").style.display = "block";
});Javascriptを<head>タグ内、</body>タグ直前に読み込むのはそれぞれ一長一短があるため、場合によって適切に配置しましょう。
<head>内で読み込む場合の特徴
JavaScriptが<head>内で読み込まれる場合、これはページの他のコンテンツよりも先に読み込まれます。しかし、前述した通りこの方法には重大な欠点があります。スクリプトを実行しようとしてもDOM要素がまだ存在していないという事が起こり得るため、JavaScriptが正しく機能しない可能性があります。
良い点は、特定のスクリプトがページの見た目や挙動に大きく影響する場合、それを早期に読み込むことで、ページの読み込み、動きが早いように感じさせることができます。ただし、大きなスクリプトファイルや外部からの読み込みがある場合はページの表示が遅くなるという事もあるのでスクリプトの内容によって適切に配置する必要があります。
</body>タグ直前で読み込み場合の特徴
スクリプトが実行される時点でDOM要素が存在することが保証されています。結果として、DOM操作が安全に行えるため、多くのJavaScript関連の問題を回避できます。
基本的には</body>タグ直前読み込むようにしておくと良いでしょう。
ただし、ページに対するJavaScriptの影響がある機能（例えば、ユーザーインターフェースの操作や動的なコンテンツのロード）は、HTMLのすべてがロードされるまで利用できないのでページが完全に機能するまでの時間が遅くなる可能性があるので注意が必要です。
jQueryの読み込み
ChatGPTやネット検索で拾ってくる動きや機能はjQueryを使用して書かれている事が多いです。jQueryを使用するにはライブラリ・cssファイル・JSファイル、場合によってはプラグインも必要ですから、自身のサイトに合わせて適切に読み込ませる必要があります。
この読み込みの不具合によって「コピペで動かない！」という現象が起こるのです。
基本的な考え方はJavascriptと同様ですが、独自の注意点もあります。詳しく解説していきます。
ライブラリの読み込み
jQueryライブラリ＝地図
jQueryのライブラリは、それを使用する他のJavaScriptファイル（例えばscript.js）よりも前に読み込みます。jQueryのスクリプトはライブラリが無ければ何も意味のないコードです。
地図も無いのに「〇〇へ行け」と言われてもどうしようもないのと同じで、jQueryのスクリプト（「〇〇へ行け」）はライブラリ（地図）が無ければ動きません。
以下では、jQueryライブラリを先読み込んで、その下のscript.jsにjQueryに関するスクリプト記述しています。この順番が逆になるだけで全く動かなくなります。
<body>
<!-- 最初にjQueryライブラリを読み込む -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQueryに依存するスクリプトを後に読み込む -->
<script src="script.js"></script>
</body>プラグイン
jQueryには様々なプラグインがあります。プラグインのことをライブラリと言うこともありますが、「jquery-3.6.0.min.js」のようなjQurey本体こそが基本のライブラリであり、jQueryの全ての基本的な機能はここに詰まっています。
jQuery本体のライブラリを「地図」に例えましたが、プラグインは「電車」「車」のような移動手段だと捉えられます。
プラグインの読み込みにはCDNを利用したものと、直接ダウンロードしてサイトファイル内に配置する２種類の方法がありますが、どちらの方法でも読み込む順番は同じです。
スライダーを簡単に実装できるプラグイン「slick」を読み込んでみましょう。
<head>
<!-- サイト全体のcssを読み込む -->
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<!-- slick用cssを読み込む -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
</head>
<body>
<!-- 最初にjQueryライブラリを読み込む -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 次にslickプラグインを読み込む -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- jQueryに依存するスクリプトを最後に読み込む -->
<script src="script.js"></script>
</body>CSS
一部例外もありますが、ほとんどの場合cssファイルはhead内に配置します。
基本的にJavascript・jQueryに関係するcssの読み込み箇所は動作に直接影響しません。通常cssはheadタグの中に配置されるのでjQueryプラグインに付随するcssもhead内で問題ありません。
これはcssが先に読み込まれることによってサイトを表示した際にcssが当たらず一瞬スタイルが崩れることを防ぐためです。
ポイントは、サイト全体のCSSファイルより後に読み込むことです。全体のCSSより前に読み込んでしまうと、プラグイン部分を正しく表示ために必要なスタイルが、後から読み込まれたCSSによって一部上書きされてしまい正しく表示されない場合があるからです。
※ただし、JavaScriptがDOM要素を操作してスタイルを変更する場合、その変更はCSSに依存する可能性があるため注意は必要です。
まとめ
Javascript、jQueryの読み込み順について、基本の考え方を解説しました。
特にjQueryに関してはライブラリ〜プラグイン〜スクリプトファイルが親子関係になっていること、これを理解していれば現代ではコピペだけで簡単に高機能のサイトを制作できます。
基本を押さえておけば何だってできる良い時代です。
