<script>: スクリプト要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<script>
は HTML の要素で、実行できるコードやデータを埋め込むために使用します。ふつうは JavaScript のコードの埋め込みや参照に使用されます。 <script>
要素は WebGL の GLSL shader プログラミング言語、 JSON 等の他の言語にも使用することができます。
コンテンツカテゴリー | メタデータコンテンツ, フローコンテンツ, 記述コンテンツ |
---|---|
許可されている内容 | text/javascript などの動的スクリプト |
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 | メタデータコンテンツを受け入れるすべての要素、または記述コンテンツを受け入れるすべての要素。 |
暗黙の ARIA ロール | 対応するロールなし |
許可されている ARIA ロール | 許可されている role なし |
DOM インターフェイス | HTMLScriptElement |
属性
この要素にはグローバル属性があります。
async
-
クラシックスクリプトでは、
async
属性があった場合、クラシックスクリプトが利用可能になるとすぐに並行して読み込み、解析と評価を行います。モジュールスクリプトでは、
async
属性があった場合、そのスクリプトとその依存関係はすべて遅延キューで実行されるので、解析と並行して読み込まれ、利用可能になるとすぐに評価されます。この属性により、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないようなパーサーブロック JavaScript を排除することができます
defer
はこの場合に同様の効果があります。これは論理属性です。論理属性が要素にあれば真の値を表し、属性がなければ偽の値を表します。
ブラウザーの対応状況についてはブラウザーの互換性をご覧ください。 asm.js 向け非同期スクリプトもご覧ください。
crossorigin
-
通常の
script
要素は標準の CORS チェックに通らないスクリプトに対して、window.onerror
に最小限の情報しか渡しません。別のドメインを使用するサイトに静的メディアへのエラーログ出力ができるようにするためには、この属性を使用してください。有効な値について、詳しくは CORS 設定属性をご覧ください。 defer
-
この論理属性は、スクリプトを文書の解析完了後かつ
DOMContentLoaded
が発生する前に実行することをブラウザーに示します。defer
属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで、DOMContentLoaded
イベントの発生が抑制されます。警告: この属性は、
src
属性がない場合 (すなわちインラインスクリプト) に使用してはいけません。そのような場合は効果がありません。defer
属性はモジュールスクリプトには効果がありません。既定で延期が行われます。defer
属性のあるスクリプトは、文書に現れた順に実行されます。この属性により、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないような、パーサーブロッキング JavaScript を排除することができるようになります。
async
はこの場合と似た効果があります。 fetchpriority
Experimental-
外部スクリプトをフェッチするときに使用する相対的な優先度のヒントを提供されます。取りうる値は次の通りです。
integrity
-
この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータを含みます。サブリソース完全性を参照してください。
nomodule
-
この論理属性は、 ES モジュールに対応しているブラウザーでは、スクリプトを実行するべきではないことを示します。要するに、モジュール式の JavaScript コードに対応していない古いブラウザー向けの代替スクリプトを提供するために使用できます。
nonce
-
script-src コンテンツセキュリティポリシー内のスクリプトをホワイトリストに入れるための暗号ノンス (ワンタイム番号) です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスを推測できないノンスを提供することが重要です。
referrerpolicy
-
スクリプトを読み込んだり、スクリプトがリソースを読み込んだりする際に、どのリファラーを送信するかを示します。
-
no-referrer
:Referer
ヘッダーは送信しません。 -
no-referrer-when-downgrade
(既定値):Referer
ヘッダーは、オリジンに TLS (HTTPS) がない場合には送信しません。 -
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
: 画面へのコンテンツの描画がブロックされます。
非推奨の属性
メモ
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>
importmap によるモジュールのインポート
スクリプトでモジュールをインポートするとき、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 モジュールガイドのインポートマップを使用したモジュールのインポートの項を参照してください。
HTML へのデータの埋め込み
また、 <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>
仕様書
Specification |
---|
HTML Standard # the-script-element |
ブラウザーの互換性
BCD tables only load in the browser