JavaScriptをどこに置くべきか？
Webサイトに動きやインタラクティブ性を与えるJavaScript。その記述場所によって、Webページの表示速度やユーザー体験に影響を与える可能性があります。では、JavaScriptはHTMLのどこに記述するのが最適なのでしょうか？
JavaScriptをHTML内に記述する
JavaScriptをHTML内に記述する場合、記述する場所について、`body`タグの最後に書くことが推奨されています。これは、HTMLの読み込み時にJavaScriptの読み込みが始まると、そこでHTMLの読み込みが一旦止まってしまうのを避けるためです。
`script`タグは`body`タグの最後に入れるようにしましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの記述場所</title>
</head>
<body>
<h1>JavaScriptの記述場所</h1>
<p>JavaScriptはここに記述します。</p>
<script>
// JavaScriptのコード
console.log("JavaScriptが実行されました。");
</script>
</body>
</html>
JavaScriptを外部ファイルに記述する
JavaScriptのコード量が多くなると、HTMLファイル内に記述することが煩雑になる場合があります。このような場合は、JavaScriptを外部ファイル（.jsファイル）に記述し、HTMLから読み込む方法が一般的です。
外部ファイルを読み込むには、`script`タグの`src`属性にファイルのパスを指定します。この方法も、HTMLの読み込みを妨げないよう、`body`タグの最後に記述することが推奨されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの記述場所</title>
</head>
<body>
<h1>JavaScriptの記述場所</h1>
<p>JavaScriptは外部ファイルから読み込みます。</p>
<script src="script.js"></script>
</body>
</html>
JavaScriptの記述場所とレンダリング блокировка
JavaScriptをHTMLのどこに記述するかによって、Webページの表示速度に影響を与える可能性があります。JavaScriptはデフォルトでレンダリング блокировкаを引き起こすため、HTMLの解析中にJavaScriptの読み込みが始まると、HTMLの解析が一時停止し、ページの表示が遅れてしまうことがあります。
この問題を避けるためには、以下の方法があります。
| 方法 | 説明 |
|---|---|
| JavaScriptを`body`タグの最後に記述する | HTMLの解析が完了してからJavaScriptの読み込みと実行が行われるため、レンダリング блокировкаを回避できます。 |
| `defer`属性を使用する | `script`タグに`defer`属性を指定すると、HTMLの解析が完了してからJavaScriptが実行されるため、レンダリング блокировкаを回避できます。 |
| `async`属性を使用する | `script`タグに`async`属性を指定すると、HTMLの解析と並行してJavaScriptの読み込みと実行が行われるため、レンダリング блокировкаを回避できます。ただし、スクリプトの実行順序が保証されないため注意が必要です。 |