scriptタグ -JavaScript を HTML 文書内で実行する｜HTML辞典
<script>タグとは？
<script> タグは、JavaScript を HTML 文書内で実行するためのタグです。
内部スクリプトや外部ファイルの読み込みに使用され、Web ページの動的な動作を制御できます。
コンテンツモデル
メタデータコンテンツ（Metadata Content）、フローコンテンツ（Flow Content）。
閉じタグの有無
<script> は 開始タグ（<script>）と閉じタグ（</script>）の両方が必要 です。
（ただし src 属性を指定する場合は、自己終了タグ <script> は使用できません。）
基本的な記述方法
<script>
console.log("Hello, World!");
</script>
使用できる主な属性
<script> タグには、JavaScript の読み込みや実行方法を制御するための属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
src | 外部スクリプトの URL を指定 | <script src="script.js"></script> |
async | スクリプトを非同期で実行（他の処理と並行） | <script src="script.js" async></script> |
defer | スクリプトを HTML の解析後に実行 | <script src="script.js" defer></script> |
type | スクリプトの MIME タイプ（通常 text/javascript） | <script type="module"></script> |
nomodule | 古いブラウザでの実行を防ぐ（type="module" と併用） | <script nomodule src="legacy.js"></script> |
CSSを使ったデザイン変更
<script> 自体にはデザイン変更は適用されませんが、JavaScript を使ってスタイルを変更できます。
<script>
document.body.style.backgroundColor = "lightblue";
</script>
適切な使用例
✅ 内部 JavaScript を記述する
<script>
alert("ページが読み込まれました！");
</script>
✅ 外部 JavaScript ファイルを読み込む
<script src="main.js"></script>
✅ async 属性でスクリプトを非同期に実行する
<script src="script.js" async></script>
✅ defer 属性で HTML の解析後に実行する
<script src="script.js" defer></script>
適切でない使用例（誤った使い方）
❌ src と JavaScript の直接記述を同時に使用する
<!-- NG: src を指定しているのに、スクリプトを記述している -->
<script src="script.js">
console.log("Hello");
</script>
✅ 正しい書き方（src を指定する場合はスクリプトを記述しない）
<script src="script.js"></script>
❌ <script> を <head> 内に記述し、実行をブロックしてしまう
<!-- NG: head 内にスクリプトを記述 -->
<head>
<script src="script.js"></script>
</head>
✅ 正しい書き方（defer を指定する）
<head>
<script src="script.js" defer></script>
</head>
<script>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<script> | JavaScript を実行 | src または内部スクリプトを記述 | ページの動的制御 |
<noscript> | JavaScript が無効な場合の代替表示 | <script> のフォールバック | JavaScript 非対応時のメッセージ表示 |
<link> | 外部 CSS を読み込む | rel="stylesheet" を指定 | スタイルシートの適用 |
使用上の注意点
✅ async と defer の違いを理解する
asyncはダウンロード完了後すぐに実行 され、他のスクリプトの順番が保証されない。deferは HTML の解析が終わってから順番通りに実行 されるため、安全に利用できる。
✅ type="module" を活用して ES6 モジュールを利用する
type="module"を指定すると、スクリプトを ES6 のモジュールとして扱える。
関連タグ
<noscript>– JavaScript が無効な場合の代替表示<link>– 外部 CSS を読み込む<meta>– メタデータの設定
まとめ
<script> タグは、HTML文書内で JavaScript を実行するためのタグ です。
内部スクリプトや外部ファイルを指定し、Web ページの動的な処理を実装する際に活用されます。
