JavaScriptはどこに書くべき？
Webサイトに動きやインタラクティブ性を与えるJavaScript。しかし、JavaScriptをどこに記述するべきか迷ったことはありませんか？ この記事では、JavaScriptの記述場所について解説し、HTML内に記述する方法を具体的に紹介します。
HTML内にJavaScriptを記述する
JavaScriptを記述する方法はいくつかありますが、HTMLファイル内に直接記述する方法が一般的です。記述場所としては、<head>タグ内と<body>タグ内の2箇所が考えられます。
<head>タグ内に記述する場合
<head>タグ内にJavaScriptを記述する場合、以下の様な形になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<script>
// JavaScriptのコード
</script>
</head>
<body>
<!-- HTMLのコンテンツ -->
</body>
</html>
<body>タグ内に記述する場合
<body>タグ内にJavaScriptを記述する場合、以下の様な形になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<!-- HTMLのコンテンツ -->
<script>
// JavaScriptのコード
</script>
</body>
</html>
記述する場所の推奨
JavaScriptを記述する場所は、<body>タグ内の最後が推奨されています。これは、HTMLの読み込みとJavaScriptの読み込みが並行して行われるためです。HTMLの読み込み中にJavaScriptの読み込みが始まると、HTMLの読み込みが一時停止してしまう可能性があります。HTMLの表示速度を向上させるためには、JavaScriptは<body>タグ内の最後に記述するのが良いでしょう。
記述場所による違いを比較
記述場所による違いを以下の表にまとめました。
| 項目 | <head>タグ内 |
<body>タグ内（最後） |
|---|---|---|
| 読み込み順序 | HTMLの読み込み前に読み込まれる | HTMLの読み込み後に読み込まれる |
| ページ表示速度 | HTMLの表示が遅くなる可能性がある | HTMLの表示速度に影響を与えない |
| 推奨度 | 推奨されない | 推奨される |
まとめ
この記事では、JavaScriptをHTML内に記述する方法を紹介しました。JavaScriptの記述場所によって、ページの表示速度に影響が出ることがあります。最適なパフォーマンスを実現するためには、<body>タグ内の最後にJavaScriptを記述することを心がけましょう。
参考文献
よくある質問
Q1. JavaScriptを外部ファイルに記述することはできますか？
A1. はい、可能です。外部ファイルにJavaScriptを記述し、HTMLから読み込む方法もあります。外部ファイルに記述する場合は、<script>タグのsrc属性にファイルのパスを指定します。
Q2. async属性やdefer属性は何ですか？
A2. これらの属性は、JavaScriptの読み込みと実行を制御するために使用されます。async属性は、JavaScriptを非同期で読み込み、読み込みが完了次第実行します。defer属性は、JavaScriptを非同期で読み込み、HTMLの解析が完了した後に実行します。
Q3. JavaScriptを学ぶには、どのような教材がおすすめですか？
A3. オンライン学習プラットフォームや書籍など、様々な教材があります。初心者向けの教材を選ぶようにしましょう。おすすめは、MDN Web DocsやProgateなどです。
その他の参考記事:JavaScript VScode