<script>: スクリプト要素

HTML の <script> 要素は、実行できるコードを埋め込んだり参照したりするために使用されます。ふつうは JavaScript のコードの埋め込みや参照に使用されます。 <script> 要素は WebGL の GLSL shader プログラミング言語等の他の言語にも使用することができます。

属性

この要素にはグローバル属性があります。

async HTML5

これは論理属性で、スクリプトを可能であれば非同期で実行すべきであることを示します。

ブラウザーはふつう、最も悪いシナリオを想定し、 HTML の解釈中は同期的にスクリプトを読み込みます (つまり、 async=false です)。

(document.createElement を使用して) 動的に挿入されたスクリプトは、既定で非同期に実行されますので、同期的に実行する (すなわち読み込まれた順に実行する) スクリプトには async=false を設定してください。

ブラウザーの対応状況についてはブラウザーの対応をご覧ください。 asm.js 向け非同期スクリプトもご覧ください。

crossorigin

通常の script 要素は標準の CORS チェックに通らないスクリプトに対して、 window.onerror に最小限の情報しか渡しません。別のドメインを使用するサイトに静的メディアへのエラーログ出力ができるようにするためには、この属性を使用してください。有効な値について、詳しくは CORS 設定属性をご覧ください。

defer

この論理属性は、スクリプトを文書の解析完了後かつ DOMContentLoaded が発生する前に実行することをブラウザーに示します。

defer 属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで、 DOMContentLoaded イベントの発生が抑制されます。

動的に挿入されたスクリプトで同様の効果を得るには、代わりに async=false を使用してください。 defer 属性の付いたスクリプトは文書内に出現する順で実行されます。

integrity

この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータを含みます。 Subresource Integrity をご覧ください。

nomodule

この論理属性は、 ES2015 モジュールに対応するブラウザーでスクリプトを実行するべきではないことを示します。要するに、モジュール式の JavaScript コードをサポートしない古いブラウザー向けのフォールバックスクリプトを提供するために使用できます。

nonce

script-src コンテンツセキュリティポリシー内の行内スクリプトをホワイトリストに入れるための暗号ノンス（ワンタイム番号）です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスを推測できないノンスを提供することが重要です。

src

この属性は外部スクリプトの URI を指定します。文書に直接スクリプトを埋め込む代わりに使用することができます。

text

textContent 属性と同じように、この属性は要素のテキストコンテンツを設定します。textContent 属性との違いは、ノードが DOM に挿入された後に実行可能なコードとして評価されることです。

type

スクリプトを表すタイプを指定します。この属性の値は、以下の種類のいずれかにします。

• 省略または JavaScript の MIME タイプ: HTML5 に準拠するブラウザーでは、これはスクリプトが JavaScript であることを示します。HTML5 仕様書では、冗長な MIME タイプを指定せずに属性を省略するよう主張しています。過去のブラウザーでは埋め込まれている、あるいは (src 属性で) インポートされたコードのスクリプト言語を指定していました。JavaScript の MIME タイプは仕様書に掲載されています。
• module: HTML5 HTML5 に準拠するブラウザーは、コードを JavaScript モジュールとして扱います。スクリプトの処理は、charset および defer 属性の影響を受けません。 module の仕様に関する情報について、 ES6 in Depth: Modules をご覧ください。 module キーワードが使用されていると、コードは異なるふるまいをするかもしれません。
• その他の値: このタグで埋め込んだコンテンツを、ブラウザーによって処理されないデータブロックとして扱います。開発者はデータブロックを記述するために、 JavaScript の MIME タイプではない有効な MIME タイプを使用しなければなりません。 src 属性は無視されます。

メモ: Firefox では <script> 要素の type 属性の中に標準外の version 引数を含めることで (例えば type="application/javascript;version=1.8")、内部の JavaScript のバージョンを指定することができました。これは Firefox 59 で削除されました (バグ 1428745 を参照)。

非推奨属性

charset

存在する場合、値は ASCII で大文字小文字を区別せずに "utf-8" と一致する文字列でなければなりません。 charset 属性は、文書が UTF-8 でなければならないこと、及び script 要素が文書から文字エンコーディングを継承することから、指定する必要はありません。

language

type 属性と同じように、この属性は使われているスクリプト言語を指定する際に用いられます。しかし、 type 属性とは異なり、この属性に指定可能な値が標準化されませんでした。代わりに type 属性を使用してください。

メモ

async 属性または defer 属性を持たないスクリプトは、インラインスクリプト同様に、ブラウザーがページの解析を続けるより先に、ただちに読み込みおよび実行されます。

スクリプトは text/javascript の MIME タイプで提供するべきですが、ブラウザーは寛大であり、画像 (image/*)・動画 (video/*)・音声 (audio/*)・text/csv のタイプで提供されたスクリプトに限りブロックします。スクリプトがブロックされると、 load イベントではなく error イベントが発生します。

例

基本

これらの例は HTML4 と HTML5 の両方で、 <script> 要素を使用してスクリプトをインポートする方法を紹介します。

<!-- HTML4 および (x)HTML -->
<script type="text/javascript" src="javascript.js"></script>

<!-- HTML5 -->
<script src="javascript.js"></script>

モジュールフォールバック

type 属性でモジュールに対応するブラウザーは、 nomodule 属性の付いたスクリプトを無視します。これによって、モジュールを非対応のブラウザーのためのフォールバック付きで使用する方法があります。

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

仕様書

ブラウザーの対応

以下の情報は MDN の Github (https://github.com/mdn/browser-compat-data) から抽出されたものです。

互換性のメモ

async 属性に対応していない古いブラウザーでは、パーサーによって挿入されたスクリプトはパーサーをブロックします。スクリプトによって挿入されたスクリプトは、 IE および WebKit では非同期的に実行されますが、 Opera およびバージョン4より前の Firefox では同期的に実行されます。 Firefox 4 では、スクリプトが生成したスクリプトの async DOM プロパティの既定値が true であるため、既定の動作が IE や WebKit の動作に一致します。

document.createElement("script").async が true と評価されるブラウザー（Firefox 4 など）で、スクリプトによって挿入された外部スクリプトを挿入順に実行することを要求するには、順序を制御したいスクリプトに対して .async=false を設定します。

関連情報

• document.currentScript
• Ryan Grove's <script> and <link> node event compatibility chart