<script></script>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ / スクリプトサポート要素 |
| 利用場所 | メタデータ・コンテンツが置ける場所 / フレージング・コンテンツが置ける場所 / スクリプトサポート要素が置ける場所 |
| 内容 | src属性がある場合：空、またはスクリプトの説明（コメント） / src属性がない場合：JavaScriptのコード、またはデータブロック |
script要素は、文書内にJavaScript、またはデータブロックを埋め込むための要素です。この要素は、head要素内とbody要素内のどちらにも配置することができます。
外部のスクリプトファイルを読み込むか、script要素内にスクリプトを記述して使用します。
<script src="example.js"></script>
<script>
ここにスクリプトを記述します
</script>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
src="" |
外部スクリプトの指定 | URL | 読み込むスクリプトファイルのURL |
type="" |
スクリプトのタイプ | text/javascript |
スクリプトが一般的なJavaScriptであることを示す（既定値） |
module |
スクリプトがJavaScriptモジュールであることを示す | ||
importmap |
スクリプトがJSONを含むインポートマップであることを示す | ||
| その他のMIMEタイプ | スクリプトがデータブロックであることを示す | ||
crossorigin="" |
別オリジンにあるリソースの処理方法 | anonymous |
認証情報を使用せずにCORSリクエストを送信 |
use-credentials |
認証情報を使用してCORSリクエストを送信 | ||
| 空 | anonymous と同じ |
||
async |
利用可能な時点で実行 | （async） |
値は省略可能、構文解析と並行して読み込み、スクリプトが利用可能になった時点で実行する |
defer |
読み込み完了後に実行 | （defer） |
値は省略可能、構文解析と並行して読み込み、解析が完了した時点でスクリプトを実行する |
referrerpolicy="" |
 リソースを読み込む際のリファラーポリシー |
リファラーポリシー | 既定値は strict-origin-when-cross-origin |
fetchpriority="" |
外部スクリプトを取得する際の相対的な優先度 |
high |
他の外部スクリプトと比較して取得の優先度が高いことを示す |
low |
他の外部スクリプトと比較して取得の優先度が低いことを示す | ||
auto |
取得の優先度は自動的に決定（既定値） | ||
integrity="" |
サブリソースの改ざんの有無を確認 |
文字列 | Base64でエンコードされた文字列 |
nomodule |
スクリプトを実行しない |
（nomodule） |
値は省略可能、モジュールスクリプトに対応したブラウザではスクリプトを実行しない |
blocking="" |
外部リソースの読み込み中にブロックする処理 |
render |
文書のレンダリングをブロック ※値（ブロッキングトークン）は追加される可能性がある |
- 一般的なJavaScriptの場合は、src属性がある場合に限り、async属性とdefer属性を指定することができます。
- JavaScriptモジュールスクリプトの場合は、defer属性とnomodule属性は指定することができません。
- インポートマップの場合はインラインでのみ利用が可能で、src属性、crossorigin属性、referrerpolicy属性、async属性、defer属性、integrity属性、nomodule属性は指定することができません。
- データブロックの場合はインラインで埋め込む必要があり、src属性、crossorigin属性、referrerpolicy属性、fetchpriority属性、async属性、defer属性、integrity属性、nomodule属性は指定することができません。
- crossorigin属性の値を省略した場合は
anonymousになります。属性そのものを省略した場合はCORSリクエストを行いません。 - integrity属性は、src属性がある場合に指定することができます。
- この要素に定義されていたnonce属性は、グローバル属性として再定義されました。
type属性、referrerpolicy属性、async属性、defer属性の詳細については、下記のページを参考にしてください。
外部スクリプトの読み込み
外部スクリプトを読み込む場合は、src属性の値に外部スクリプトファイルのURLを指定します。具体的には次のような記述になります。
<script src="example.js"></script>
src属性が指定されたscript要素の内容には、コメント（/* ～ */ または // ～）を入れることができます。このコメント部分には、外部スクリプトに関する説明や著作権情報などを記載しておくことができます。
<script src="example.js">
/*
合計金額を計算するJavaScript
作成日：2022年5月26日
*/
// Copyright (C) 2022 TAG index
</script>
-
/* ～ */は1行または複数行、// ～は1行のコメントとして扱われます。
script要素内にスクリプトを記述
script要素内にスクリプトを記述する場合は、src属性を指定せずに次のように記述します。
<script>
ここにスクリプトを記述します
</script>
nomodule属性について
nomodule属性は、モジュールスクリプトに対応しているブラウザでは、スクリプトを実行しないことを指定します。
この属性を指定することで、ブラウザにより実行するスクリプトを振り分けることができます。
<script type="module" src="module.js"></script>
<script src="classic.js" nomodule></script>
上記のように指定しておくと、モジュールスクリプトに対応しているブラウザでは module.js が読み込まれ、nomodule が指定された classic.js は無視されます。
モジュールスクリプトに未対応のブラウザでは、type="module" が認識できないため module.js は無視され、nomodule も認識できないため classic.js が読み込まれることになります。
- 旧HTMLからの変更点
-
- HTML5：language属性が廃止され、async属性とcrossorigin属性が追加されました。
- HTML5：スクリプトの言語がJavaScriptの場合、type属性が省略可能になりました。（既定値が
text/javascriptになったため） - HTML5.1：nonce属性が追加されました。
- HTML LS：charset属性が廃止され、nonce属性がグローバル属性に移り、referrerpolicy属性、integrity属性、nomodule属性、blocking属性が追加されました。
- HTML LS：type属性の値に
importmapが追加されました。［2023/04/20］ - HTML LS：fetchpriority属性が追加されました。［2023/04/20］
使用例
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
<script src="example1.js"></script>
</head>
<body>
<script src="example2.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
<script>
function test(){
alert('アラートのテスト');
}
</script>
</head>
<body>
<script>
document.write("サンプルテキスト");
</script>
</body>
</html>