<script>: スクリプト要素

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

属性

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

asyncHTML5

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

この属性は src 属性がない場合 (つまり、インラインスクリプトの場合) に使用してはいけません。そのような場合は効果がありません。

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

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

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

crossorigin

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

defer

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

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

この属性は、 src 属性がない場合 (すなわちインラインスクリプト) に使用してはいけません。そのような場合は効果がありません。

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

integrity

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

nomodule

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

nonce

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

referrerpolicy

スクリプトを読み込んだり、スクリプトがリソースを読み込んだりする際に、どのリファラーを送信するかを示します。

• no-referrer: Referer ヘッダーは送信しません。
• no-referrer-when-downgrade (既定値): Referer ヘッダーは、オリジンに TLS (HTTPS) がない場合には送信しません。
• origin: 送信するリファラーを、参照しているページのオリジン (スキーム、ホスト、ポート番号) のみに制限します。
• origin-when-cross-origin: 異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポート番号に制限します。同一オリジンへの移動では、リファラーのパスも含めます。
• same-origin: リファラーは同一オリジンには送信しますが、オリジン間リクエストにはリファラー情報が含めません。
• strict-origin: プロトコルのセキュリティ水準が同等 (例えば HTTPS→HTTPS) である場合は文書のオリジンのみをリファラーとして送信しますが、宛先の安全性がより低い場合 (例えば HTTPS→HTTP) には送信しません。
• strict-origin-when-cross-origin: 同一オリジンのリクエストを行う際は URL 全体を送信しますが、プロトコルのセキュリティ水準が同等 (例えば HTTPS→HTTPS) である場合は文書のオリジンのみをリファラーとして送信し、宛先の安全性がより低い場合 (例えば HTTPS→HTTP) にはヘッダーを送信しません。
• unsafe-url: リファラーはオリジンおよびパスを含みます (ただし、フラグメント、パスワード、ユーザー名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。

メモ: 既定値および referrerpolicy に対応していない場合の代替値は空文字列 ("") です。 referrerpolicy が <script> 要素で明示的に指定されていない場合はより高次元、つまり文書全体やドメイン全体のリファラーポリシーに合わせられます。より高次元のポリシーが利用できない場合は、空文字列は no-referrer-when-downgrade と同等のものとして扱われます。

src

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

script 要素に src 属性が指定した場合は、自身のタグ中に埋め込みスクリプトを持たせないでください。

text

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

type

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

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

メモ: Firefox では <script> 要素の type 属性の中に標準外の version 引数を含めることで (例えば type="text/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 -->
<script type="text/javascript" src="javascript.js"></script>

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

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

type 属性で module の値に対応しているブラウザーは、 nomodule 属性の付いたスクリプトを無視します。これによって、モジュールスクリプトを提供しつつ、非対応のブラウザーの場合は nomodule でマークされたフォールバックスクリプトを提供することもできます。

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

仕様書

ブラウザーの対応

互換性のメモ

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
• Flavio Copes' article on loading JavaScript efficiently and explaining the differences between asnyc and defer