<script>: スクリプト要素

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

async

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

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

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

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

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

crossorigin

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

defer

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

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

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

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

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

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

fetchpriority Experimental

外部スクリプトをフェッチするときに使用する相対的な優先度のヒントを提供されます。取りうる値は次の通りです。

high

他の外部スクリプトと比較して、高い優先度でフェッチすることを指示します。

low

他の外部スクリプトと比較して、低い優先度でフェッチすることを指示します。

auto

既定値です。他の外部スクリプトとの相対的なフェッチ優先順位を自動的に決定することを指示します。

integrity

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

nomodule

この論理属性は、 ES モジュールに対応しているブラウザーでは、スクリプトを実行するべきではないことを示します。要するに、モジュール式の 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> 要素で明示的に指定されていない場合はより高次元、つまり文書全体やドメイン全体のリファラーポリシーに合わせられます。より高次元のポリシーが利用できない場合は、空文字列は strict-origin-when-cross-origin と同等のものとして扱われます。

src

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

type

この属性は、表現されるスクリプトの種類を示します。 この属性の値は、以下のいずれかになります。

属性が未設定（既定値）、空文字列、JavaScript の MIME タイプ

スクリプトが「クラシックスクリプト」であること、JavaScript コードを保持していることを示します。 このスクリプトが JavaScript コードを参照している場合、MIME タイプを指定するのではなく、この属性を省略することを推奨します。 JavaScript の MIME タイプは IANA media types specification に掲載されています。

module

コードを JavaScript モジュールとして扱います。 スクリプトコンテンツの処理は延期されます。 charset および defer 属性の影響を受けません。 module の利用についての情報は、 JavaScript モジュールをご覧ください。クラシックスクリプトとは異なり、モジュールスクリプトはオリジンをまたいで読み取る場合、CORS プロトコルを使用する必要があります。

importmap

この値は、要素の本体にインポートマップが格納されていることを示します。 インポートマップ JSON オブジェクトで、開発者が JavaScript モジュールをインポートする際に、ブラウザーがモジュール指定子を解決する方法を制御するために使用できます。

その他の値

このタグで埋め込んだコンテンツを、ブラウザーによって処理されないデータブロックとして扱います。 開発者はデータブロックを記述するために、 JavaScript の MIME タイプではない有効な MIME タイプを使用しなければなりません。 他の属性は、src 属性も含めてすべて無視されます。

blocking Experimental

この属性は、スクリプトのフェッチ時に特定の処理をブロックすることを明示的に示します。ブロックされる操作は、下記のブロッキング属性をスペースで区切って列挙したものでなければなりません。

• render: 画面へのコンテンツの描画がブロックされます。

charset 非推奨;

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

language 非推奨; 非標準

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

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

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

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

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

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

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

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

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

スクリプトでモジュールをインポートするとき、type=importmap 機能を使用しない場合、各モジュールは絶対 URL または相対 URL のどちらかのモジュール指定子を使用してインポートする必要があります。 下記の例では、1 つ目のモジュール指定子 ("./shapes/square.js") は文書のベース URL に対して相対的に解決され、2 つ目は絶対 URL となります。

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

インポートマップを使用すると、一致した場合にモジュール指定子のテキストを置き換えることができる対応表を提供することができます。 下記のインポートマップでは、上に示したモジュール指定子のエイリアスとして使用できるキー square と circle を定義しています。

<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

これにより、（絶対 URL や相対 URL ではなく）モジュール指定子の名前を使用してモジュールをインポートすることができます。

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

インポートマップでできることの例については、JavaScript モジュールガイドのインポートマップを使用したモジュールのインポートの項を参照してください。

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

<!-- サーバーによる生成 -->
<script id="data" type="application/json">
  {
    "userId": 1234,
    "userName": "Maria Cruz",
    "memberSince": "2000-01-01T00:00:00.000Z"
  }
</script>

<!-- 固定 -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>

blocking 属性の中に render トークンを含めることができます。スクリプトがフェッチされ実行されるまで、ページのレンダリングはブロックされます。下記の例では、非同期スクリプトでレンダリングをブロックしています。スクリプトが解釈をブロックすることなく、レンダリングが始まる前に評価されることが保証されます。

<script blocking="render" async src="async-script.js"></script>

• document.currentScript
• Flavio Copes' article on loading JavaScript efficiently and explaining the differences between async and defer
• JavaScript モジュールガイド