





<script>タグは、スクリプトを表す際に使用します。
script要素を使用すると、HTMLドキュメント内に動的スクリプトやデータブロックを含めることができます。
script要素は、ユーザー向けのコンテンツを表すものではありません。
一般的なscript要素の使い方は、src属性でリソースのアドレスを指定して、type属性でスクリプトのタイプを指定します。
■属性
- src属性
-
リソースのアドレスを指定します。
script要素にsrc属性を指定すると、HTMLドキュメントから外部スクリプトを呼び出すことができます。
src属性を指定する場合は、空でない有効なURLを指定する必要があります。 - type属性
-
スクリプトのタイプを指定します。
type属性の値に適正なJavaScriptのMIMEタイプを指定すると、JavaScriptとして解釈されます。
type属性の値に空の文字列を指定したり、type属性を省略してもJavaScriptとして解釈されます。
type属性の値に”module”を指定すると、JavaScriptモジュールスクリプトとして解釈されます。
type属性の値に”importmap”を指定すると、インポートマップとして解釈されます。
type属性の値に上記以外のMIMEタイプを指定すると、データブロックと解釈されてスクリプト処理されません。- 適正なJavaScriptのMIMEタイプ …… JavaScriptとして解釈されます。
- 空の文字列 …… JavaScriptとして解釈されます。
- type属性を省略 …… JavaScriptとして解釈されます。
- “module” …… JavaScriptモジュールスクリプトとして解釈されます。
- “importmap” …… インポートマップとして解釈されます。
- 上記以外のMIMEタイプ …… データブロックと解釈されてスクリプト処理されません。
- nomodule属性
- モジュールスクリプトをサポートするユーザーエージェントでの実行を防止します。
- async属性
- 取得中にブロックせずに、利用可能な場合にスクリプトを実行します。
- defer属性
- スクリプトの実行を延期します。
- crossorigin属性
- 要素がクロスオリジンリクエストを処理する方法を指定します。
- integrity属性
- サブリソース整合性チェックで使用される整合性メタデータを指定します。
- referrerpolicy属性
- 要素によって開始されるフェッチのリファラーポリシーを指定します。
- blocking属性
- 要素がレンダリングをブロックする可能性があるかどうかを指定します。
- fetchpriority属性
- 要素によって開始されるフェッチの優先順位を設定します。
■使用例
以下のサンプルは、
script要素を使用して関数を定義しています。
ドキュメントの他の部分からその関数を呼び出して使用しています。
HTMLソース
<script>
function calculate(form) {
var price = 52000;
if (form.elements.brakes.checked)
price += 1000;
if (form.elements.radio.checked)
price += 2500;
if (form.elements.turbo.checked)
price += 5000;
if (form.elements.sticker.checked)
price += 250;
form.elements.result.value = price;
}
</script>
<form name="pricecalc" onsubmit="return false" onchange="calculate(this)">
<fieldset>
<legend>クルマ価格を見積します</legend>
<p>基本価格: £52000.</p>
<p>追加オプション:</p>
<ul>
<li><label><input type=checkbox name=brakes> セラミックブレーキ (£1000)</label></li>
<li><label><input type=checkbox name=radio> 衛星ラジオ (£2500)</label></li>
<li><label><input type=checkbox name=turbo> ターボチャージャー (£5000)</label></li>
<li><label><input type=checkbox name=sticker> ステッカー (£250)</label></li>
</ul>
<p>合計: £<output name=result></output></p>
</fieldset>
<script>
calculate(document.forms.pricecalc);
</script>
</form>
ブラウザ上の表示
■使用例
以下のサンプルは、JavaScriptで作成されたゲームエンジンとデータブロックという想定です。
1つ目のscript要素は外部スクリプトを読み込み、
2つ目のscript要素はデータブロックを表します。
データブロックの部分は、例えばゲームのマップ作成に利用されるのかもしれません。
HTMLソース
<script src="game-engine.js"></script>
<script type="text/x-game-map">
........U.........e
o............A....e
.....A.....AAA....e
.A..AAA...AAAAA...e
</script>
■使用例
以下のサンプルは、script要素のtype属性の値に”module”を指定して、
外部JavaScriptモジュールを組み込んでいます。
この場合、指定したJavaScriptモジュールのソースファイル内の
importステートメントによるすべての依存関係が取得されます。
結果として得られるモジュールの全体がインポートされ、
ドキュメントの解析が完了すると app.mjs の内容が評価されます。
HTMLソース
<script type="module" src="app.mjs"></script>
■使用例
以下のサンプルは、
最新のユーザーエージェント用のJavaScriptモジュールスクリプトと、
旧いユーザーエージェント用のクラシックスクリプトを振り分けて適用させています。
JavaScriptモジュールスクリプトをサポートしているユーザーエージェントでは、
type属性の値に”module”を指定したscript要素をフェッチして評価します。
また、nomodule属性をサポートしているため、nomodule属性を指定したscript要素は無視されます。
JavaScriptモジュールスクリプトをサポートしていないユーザーエージェントでは、
type属性の値に”module”を指定したscript要素は未知のスクリプトタイプであるため無視されます。
一方で、nomodule属性をサポートしていないため、
nomodule属性を指定したscript要素であってもフェッチして評価します。
HTMLソース
<script type="module" src="app.mjs"></script>
<script nomodule defer src="classic-app-bundle.js"></script>
■使用例
以下のサンプルは、
JavaScriptモジュールスクリプト内から
JSONモジュールスクリプトをインポートしています。
HTMLソース
<script type="module">
import peopleInSpace from "https://api.open-notify.org/astros.json" with { type: "json" };
const list = document.querySelector("#people-in-space");
for (const { craft, name } of peopleInSpace.people) {
const li = document.createElement("li");
li.textContent = `${name} / ${craft}`;
list.append(li);
}
</script>
async属性とdefer属性
async属性はスクリプトの非同期実行、defer属性はスクリプトの遅延実行を指定します。
async属性を指定すると、ドキュメントの解析中でもスクリプトが利用可能になるとすぐに実行します。
defer属性を指定すると、ドキュメントの解析が終了したときにスクリプトを実行します。
以下は、type属性、async属性、defer属性の指定とスクリプト実行のタイミングを示した概略図です。
■関連項目
- <script> …… スクリプトを表す
- <noscript> …… スクリプトが無効な環境向けの内容を表す
- <template> …… テンプレートを表す
- <slot> …… データの差し込みスロットを表す
- <canvas> …… スクリプトで図形を描く