JavaScriptをHTML内に記述する場所
Webページに動きをつけるJavaScript。HTMLファイルに直接記述する場合、どこに書くのが最適なのでしょうか？
基本はbodyタグの最後
結論から言うと、JavaScriptコードは<body>タグ内の最後に記述するのが一般的です。つまり、HTMLのコンテンツがすべて読み込まれた後、という位置付けになります。
<!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>
なぜbodyタグの最後が良いのか？
JavaScriptを<head>タグ内に記述することもできますが、推奨されません。その理由は主に以下の点が挙げられます。
| 理由 | 説明 |
|---|---|
| HTMLの読み込み blokcing | JavaScriptが<head>タグ内に記述されている場合、ブラウザはHTMLの解析中にJavaScriptの読み込みと実行を行います。そのため、HTMLの読み込みが一時的にブロックされ、ページ表示が遅くなる可能性があります。 |
| DOMContentLoaded イベント発生前の実行 | JavaScriptコード内でHTML要素を操作する場合、<head>タグ内に記述していると、HTML要素がまだ読み込まれていない段階で実行されるため、エラーが発生する可能性があります。 |
<body>タグの最後に記述することで、これらの問題を回避することができます。
例外：defer属性とasync属性
<script>タグにdefer属性またはasync属性を付与することで、JavaScriptの読み込み方法を変更できます。
defer属性：HTMLの解析が終わるまでJavaScriptの読み込みを遅延させ、HTMLの解析が完了した後、DOMContentLoadedイベント発生前に実行されます。async属性：JavaScriptを非同期で読み込み、読み込みが完了次第実行されます。HTMLの解析とは並行して行われるため、読み込み順序は保証されません。
これらの属性を使用する場合、JavaScriptは<head>タグ内に記述することも可能です。
参考資料
よくある質問
Q1. JavaScriptを外部ファイルに記述する場合は？
A1. 外部ファイルに記述したJavaScriptを読み込む場合も、<script>タグは<body>タグの最後に記述するのが一般的です。
Q2. JavaScriptフレームワークを使用する場合は？
A2. ReactやVue.jsなどのJavaScriptフレームワークを使用する場合、フレームワークの推奨する記述方法に従ってください。
Q3. JavaScriptを<head>タグ内に記述する必要がある場合は？
A3. defer属性またはasync属性を使用することで、HTMLの読み込みをブロックすることなくJavaScriptを読み込むことができます。
その他の参考記事:JavaScript の概要