<script>: スクリプト要素

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

属性

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

asyncHTML5

クラシックスクリプトでは、 async 属性があると、クラシックスクリプトが利用可能になったらすぐに並行して読み込み、解析と評価を行います。

モジュールスクリプトでは、 async 属性があると、スクリプトとその依存関係はすべて遅延キューで実行されるので、解析と並行して読み込まれ、利用可能になるとすぐに評価されます。

この属性は、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないようなパーサーブロック JavaScript を排除することを可能にします。 defer はこの場合に同様の効果があります。

これは論理属性です。論理属性が要素にあれば真の値を表し、属性がなければ偽の値を表します。

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

crossorigin

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

defer

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

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

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

defer 属性はモジュールスクリプトには効果がありません。 — 既定で延期が行われます。

defer 属性のあるスクリプトは、文書に現れた順に実行されます。

この属性により、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないような、パーサーブロッキング JavaScript を排除することができるようになります。 async はこの場合と似た効果があります。

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 を指定します。文書に直接スクリプトを埋め込む代わりに使用することができます。

type

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

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

非推奨属性

charset

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

language

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

注

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

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

例

基本的な使い方

これらの例は <script> 要素を使用して (外部の) スクリプトをインポートする方法を紹介します。

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

また、以下の例は <script> 要素内に (インライン) スクリプトを置く方法を示します。

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

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

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

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

HTML へのデータの埋め込み

また、 <script> 要素を使用して、 type 属性に JavaScript 以外の有効な MIME タイプを指定することで、サーバー側で表現したデータを HTML に埋め込むこともできます。

<!-- Generated by the server -->
<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</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 async and defer
• JavaScript モジュールガイド