HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<script>
スクリプト要素。JavaScriptなどの実行可能コードをページに埋め込んだり、外部ファイルとして読み込んだりするために使用されます。
info
概要
<script> 要素は、Webページにクライアントサイドのスクリプト（主にJavaScript）を埋め込む、あるいは外部ファイルから読み込むために使用されます。
スクリプトはページを動的に操作したり、ユーザー操作に応答したり、コンテンツを生成したりする能力を提供します。
外部ファイルからの読み込みには src 属性を使用します。
play_circle
デモ (静的表示)
HTML (Source)
<!-- 外部スクリプトの読み込み -->
<script src="main.js" async></script>
<!-- インラインスクリプト -->
<script>
console.log("Hello, World!");
// このコードは実際には実行されません (静的表示のため)
</script>
Preview (Result)
コンソール出力のシミュレーション:
Hello, World!
※この領域ではJavaScriptは実行されません。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| src | 外部スクリプトファイル（.js）のURIを指定します。この属性がある場合、要素の内容は無視されます。 |
| async | ブール属性。スクリプトが非同期的に（バックグラウンドで）ダウンロードされ、ダウンロード完了後すぐに実行されることを示します。HTMLの解析は中断されません。 |
| defer | ブール属性。スクリプトが非同期的にダウンロードされ、HTMLの解析が完了した直後に、DOMContentLoadedイベントの前に実行されることを示します。 |
| type | スクリプトのMIMEタイプを指定します。デフォルトは text/javascript であり、省略可能です。Moduleスクリプトの場合は module を指定します。
|
| crossorigin | 外部サイトからのリソース取得時のCORS設定（例: anonymous, use-credentials）を指定します。 |
| integrity | Subresource Integrity (SRI) チェックのためのハッシュ値を指定し、改ざんされたスクリプトの実行を防ぎます。 |
code
実用例
1. 外部JavaScriptファイルの非同期読み込み
<script src="path/to/my-functions.js" async></script>
<!-- deferはDOMContentLoaded前に実行したい、依存関係があるスクリプトに適しています -->
<script src="path/to/vendor.js" defer></script>
2. インラインスクリプト
<script>
// DOMContentLoaded の後に実行されることを保証したい場合
document.addEventListener('DOMContentLoaded', () => {
const element = document.getElementById('data');
element.textContent = 'スクリプトが実行されました。';
});
</script>
3. JavaScript Module (ES Modules) の読み込み
<script type="module" src="./modules/main.js"></script>
<!-- moduleスクリプト内でのimport/exportが可能になります -->
lightbulb
知っておくべき重要事項
speed
パフォーマンスに関する注意 (async と defer)
通常、
通常、
<script> 要素を読み込む際、ブラウザはHTMLの解析を停止します。ページ表示速度を向上させるため、ほとんどの外部スクリプトには **async** または **defer** 属性を付与することが強く推奨されます。
priority_high
従来の配置の習慣
async や defer がない場合、ブラウザのブロッキングを防ぐため、従来のベストプラクティスでは **<body> 終了タグの直前**にスクリプトを配置していました。現在では、パフォーマンス属性の使用が推奨されています。