<script> - スクリプト

概要
説明
属性
使用例
詳細
関連項目
リンク

概要

形式: <script>～</script>
サポート: https://caniuse.com/mdn-html_elements_script
カテゴリ: メタデータコンテンツ; フローコンテンツ; フレージングコンテンツ; スクリプトサポート要素
親要素: メタデータコンテンツ, フレージングコンテンツ, スクリプトサポート要素を子要素に持てるもの
子要素: src 属性がない場合: type 属性の値に従い、スクリプトコンテキストの制約に合致したもの。; src 属性がある場合: 空、もしくは、スクリプトコンテキストの制約に合致したスクリプト文書。
タグの省略: 開始タグ:必須 / 終了タグ:必須
属性: グローバル属性; src; type; nomodule; async; defer; crossorigin; integrity; referrerpolicy; blocking; fetchpriority

説明

<script> は、JavaScript などのスクリプトを記述するために用います。主に JavaScript を実行するために使用されますが、VBScript など別のスクリプトも実行可能です。JavaScript に関する詳細は「とほほのJavaScriptリファレンス」などを参照してください。

属性

グローバル属性

詳細はグローバル属性を参照してください。

type=type

LS/H4/e4/Ch/Fx/Sa/Op/N4

スクリプトの言語を type="text/javascript" のような MIMEタイプで指定します。HTML4.01では必須の属性として定義されていましたが、HTML5 では省略時は type="text/javascript" とみなされるようになりました。

src=url

LS/H4/e4/Ch/Fx/Sa/Op/N3

外部スクリプトファイルのURLを指定します。詳細は後述の外部スクリプトファイルを参照してください。

async

LS/H5/Ch/Ed/Fx/e/Op/Sa

スクリプトを非同期に読み込み・実行します。詳細は後述。

defer

LS/H4/Ch/Ed/Fx3.5/e10/Sa

スクリプトを非同期に読み込みます。詳細は後述。

crossorigin=state

LS/H5

CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。

integrity

LS/Ch45/Fx43

スクリプト改竄チェックで使用されるハッシュ値を指定します。詳細は後述のスクリプト改竄チェックを参照してください。

charset=charset

スクリプトのキャラクタセットを指定します。HTML Living Standard には採用されていません。

nonce=nonce

H5.1

CSP(Content Security Policy)チェックで用いられるワンタイムトークンを指定します。

referrerpolicy=referrerpolicy

リソースにアクセスした際のリファラー(Referer)送信ポリシーを指定します。詳細は <a referrerpolicy="..."> を参照してください。

blocking=mode

LS/Ch/Ed/Op

blocking="render" を指定するとスクリプトを読み込む際にレンダリングをブロッキングすることを提示します。(→ サポート状況)

nomodule

LS/Ch/Fx

ES6 modules に対応していないブラウザに対するスクリプトを実行する場合に指定します。ES6 modules 対応ブラウザではこのスクリプトの実行を抑制します。詳細は後述の ES6 modules を参照してください。(→ サポート状況)

fetchpriority=priority

LS/Ch/Ed/Sa

ファイルを読み込む優先度を指定します。(→ サポート状況)

high: 通常より高い優先度でファイルを読み込みます。
low: 通常より低い優先度でファイルを読み込みます。
auto: 通常の優先度でファイルを読み込みます。(デフォルト)

language=lang

[非推奨] H4T-4T/e2/N2

スクリプト言語を指定します。現在では type属性を使用することが推奨されています。

event=event

[非推奨] H4-4/e4

将来の機能のために予約されていましたが、HTML5 では廃止されました。

for=id

[非推奨] H4-4/e3

将来の機能のために予約されていましたが、HTML5 では廃止されました。

使用例

HTML

<script>
alert("Hello world!");
</script>

外部 JavaScript ファイルを読み込む場合は次のように指定します。

HTML

<script src="js/example.js"></script>

詳細

スクリプトのコメント化()

以前は、スクリプトに対応していないブラウザのために、スクリプトを下記の様に HTML のコメントとして記述していました。現在は、<script> に対応していないブラウザは皆無のため、コメント化しないことが多くなりました。

HTML

<script>
<!--
alert("Hello world!");
// -->
</script>

スクリプト種別(type)

type 属性でスクリプト種別を指定します。HTML 4.01 では type 属性は必須とされていましたが、HTML5 では省略時は "text/javascript" とみなされるようになりました。JavaScript 以外の言語を使用する場合に type 属性を指定します。例えば、IE3～IE10 でサポートされていた VBScript(text/vbscript) を用いるには次のように指定していました。

HTML

<script type="text/vbscript">
msgbox "Hello world!"
</script>

VBScript は IE11 で基本的には廃止されました。IE11 で VBScript を動かすためにはヘッダ部に下記を記述する必要があります。

HTML

<meta http-equiv="x-ua-compatible" content="IE=10">

外部スクリプトファイル(src)

src 属性を用いると、JavaScript ファイルを外部ファイルで記述することができます。例えば、sample.js ファイルに下記の内容を記述しておきます。<script> は不用です。

sample.js

alert("Hello!!");

これを、HTMLファイルから下記のように呼び出します。

HTML

<script src="sample.js"></script>

スクリプトの非同期読み込み(async, defer)

通常は、HTML のパース中にスクリプトの読み込みが指定されると、ブラウザは HTML の解析を中断し、スクリプトを読み込み、実行し、その後、HTML の解析を再開します。

HTML

<script src="sample.js"></script>

async 属性を指定すると、HTML の解析と、スクリプトの読み込み・実行を非同期に平行して行います。

HTML

<script async src="sample.js"></script>

defer 属性を指定すると、HTML の解析と、スクリプトの読み込みを非同期に平行しておこないますが、スクリプトの実行は、HTML の解析が完了した後で行われます。

HTML

<script defer src="sample.js"></script>

async や defer を指定した外部スクリプトは、その実行順序が保障されなくなるため、依存関係のあるライブラリに async や defer を指定することはできません。また、async や defer を指定した外部スクリプトでは、document.write() など、レンダリングに影響のある記述を用いてはなりません。

コンテンツセキュリティポリシー(nonce)

nonce は HTML5.1 で追加された属性で、Web ページ上に悪意を持って埋め込まれたスクリプトの実行を抑制するために用いられます。例えば、HTTP のレスポンスに下記の様な HTTP ヘッダが付与されていたとします。

HTTPヘッダ

Content-Security-Policy: script-src 'nonce-hUygTfgbgFcdRt5eDqpLfB6f==' 'strict-dynamic'

この場合、下記の HTML コードがある場合、正規のスクリプトは実行されますが、正当な nonce 値を持たない悪意のあるスクリプトは実行されません。

HTML

<article>
  ～悪意のある書き込み～
  <script>悪意のあるスクリプト</script>
  ～悪意のある書き込み～
</article>
<script nonce="hUygTfgbgFcdRt5eDqpLfB6f==">正規のスクリプト</script>

スクリプト改竄チェック(integrity)

integrity 属性は、CDN などの中継サーバにおけるスクリプトの改竄をチェックするために用いられます。まず、スクリプトファイルの SHA-384 ハッシュ値を求めます。

Linux

$ cat sample.js | openssl dgst -sha384 -binary | openssl enc -base64 -A
DAPiLw1y9MaVlqwm9UKKTFNXrbtWUdW5Gwh8Zd8uWrccOb+zap1l8sjnv0QEfaGM

このハッシュ値を下記の様に指定します。

HTML

<script
  src="./sample.js"
  integrity="sha384-DAPiLw1y9MaVlqwm9UKKTFNXrbtWUdW5Gwh8Zd8uWrccOb+zap1l8sjnv0QEfaGM"
  crossorigin="anonymous"></script>

ブラウザは、integrity 属性が指定されている場合、ダウンロードしたスクリプトファイルのハッシュ値と integrity 属性の値を比較し、スクリプトの改竄が無いかチェックします。

ES6 modules(nomodule)

ES6(ES2015/ECMAScript 2015) では、ES6 modules と呼ばれる機能が追加されました。PHP の require、Python の import などと同様、import / export で他のスクリプトファイルを読み込むことが可能です。ただし、この機能を用いると、ES6 modules に対応していないブラウザではエラーとなってしまいます。この問題を解決するために、type="module" と nomodule 属性を使用します。

ES6 modules 対応ブラウザのために、export / import を使用した sample-module.js を用意します。ES6 modules 未対応ブラウザのために、読み込むライブラリをすべて展開した sample-classic.js (効率が悪い)を用意します。これらを下記の様に読み込みます。ES6 modules 未対応ブラウザは nomodule 属性を無視し、sample-classic.js を読み込みますが、type="module" は未サポート言語のため sample-module.js は読み込みません。ES6 modules 対応ブラウザは nomodule 属性が指定された sample-classic.js は読み込まず、type="module" が指定された sample-module.js のみを読み込みます。

HTML

<script nomodule src="sample-classic.js"></script>
<script type="module" src="sample-module.js"></script>

スクリプト言語(language)

language 属性には、使用する言語とそのバージョンを指定しするのに用いられていました。HTML5 には採用されておらず、非推奨の属性です。

値	IE				Netscape
値	2.0	3.0	4.0	5.0	2.0	3.0	4.0 ～ 4.05	4.06 4.5
language="JavaScript"	×	○	○	○	○	○	○	○
language="JavaScript1.0"	×	×	×	×	×	×	×	×
language="JavaScript1.1"	×	×	○	○	×	○	○	○
language="JavaScript1.2"	×	×	○	○	×	×	○	○
language="JavaScript1.3"	×	×	○	○	×	×	×	○
language="Jscript"	×	？	○	○	×	×	×	×
language="VBScript"	×	○	○	○	×	×	×	×
language="VBS"	×	？	○	○	×	×	×	×

<noscript>

リンク

初版:1996年9月10日最終更新:2024年7月14日

https://www.tohoho-web.com/html/script.htm

<script> - スクリプト

概要

説明

属性

使用例

詳細

スクリプトのコメント化()

スクリプト種別(type)

外部スクリプトファイル(src)

スクリプトの非同期読み込み(async, defer)

コンテンツセキュリティポリシー(nonce)

スクリプト改竄チェック(integrity)

ES6 modules(nomodule)

スクリプト言語(language)

関連項目

リンク