<script>: スクリプト要素
HTML の <script>
要素は、実行できるコードやデータを埋め込むために使用します。ふつうは JavaScript のコードの埋め込みや参照に使用されます。 <script>
要素は WebGL の GLSL shader プログラミング言語、 JSON 等の他の言語にも使用することができます。
コンテンツカテゴリ | メタデータコンテンツ, フローコンテンツ, 記述コンテンツ |
---|---|
許可されている内容 | text/javascript などの動的スクリプト |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | メタデータコンテンツを受け入れるすべての要素、または記述コンテンツを受け入れるすべての要素 |
暗黙の ARIA ロール | 対応するロールなし |
許可されている ARIA ロール | 許可されている role なし |
DOM インターフェイス | HTMLScriptElement |
属性
この要素にはグローバル属性があります。
async
HTML5-
クラシックスクリプトでは、
async
属性があると、クラシックスクリプトが利用可能になったらすぐに並行して読み込み、解析と評価を行います。モジュールスクリプトでは、
async
属性があると、スクリプトとその依存関係はすべて遅延キューで実行されるので、解析と並行して読み込まれ、利用可能になるとすぐに評価されます。この属性は、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないようなパーサーブロック JavaScript を排除することを可能にします。
defer
はこの場合に同様の効果があります。これは論理属性です。論理属性が要素にあれば真の値を表し、属性がなければ偽の値を表します。
ブラウザーの互換性の状況についてはブラウザーの互換性をご覧ください。 asm.js 向け非同期スクリプトもご覧ください。
crossorigin
- 通常の
script
要素は標準の CORS チェックに通らないスクリプトに対して、window.onerror
(en-US) に最小限の情報しか渡しません。別のドメインを使用するサイトに静的メディアへのエラーログ出力ができるようにするためには、この属性を使用してください。有効な値について、詳しくは 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
属性は無視されます。
- 省略または JavaScript の MIME タイプ: これはスクリプトが JavaScript であることを示します。 HTML5 仕様書では、冗長な MIME タイプを指定せずに属性を省略するよう主張しています。過去のブラウザーでは埋め込まれている、あるいは (
非推奨属性
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>
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <script> の定義 |
現行の標準 | charset 属性を削除 |
HTML5 <script> の定義 |
勧告 | |
HTML 4.01 Specification <script> の定義 |
勧告 |
ブラウザーの互換性
BCD tables only load in the browser
互換性のメモ
async
属性に対応していない古いブラウザーでは、パーサーによって挿入されたスクリプトはパーサーをブロックします。スクリプトによって挿入されたスクリプトは、 IE および WebKit では非同期的に実行されますが、 Opera およびバージョン4より前の Firefox では同期的に実行されます。 Firefox 4 では、スクリプトが生成したスクリプトの async
DOM プロパティの既定値が true
であるため、既定の動作が IE や WebKit の動作に一致します。
document.createElement("script").async
が true
と評価されるブラウザー (Firefox 4 など) で、スクリプトによって挿入された外部スクリプトを挿入順に実行することを要求するには、順序を制御したいスクリプトに対して async="false"
を設定します。
非同期スクリプトから document.write()
を呼び出さないでください。 Firefox 3.6 では document.write()
を呼び出すと予期せぬ影響をもたらします。Firefox 4 では async
スクリプトから document.write()
を呼び出しても効果がありません (エラーコンソールに警告を出力することを除く)。