<script> …… スクリプトを表す

<script>タグは、スクリプトを表す際に使用します。

script要素を使用すると、HTMLドキュメント内に動的スクリプトやデータブロックを含めることができます。 script要素は、ユーザー向けのコンテンツを表すものではありません。

一般的なscript要素の使い方は、src属性でリソースのアドレスを指定して、type属性でスクリプトのタイプを指定します。

■属性

■使用例

以下のサンプルは、 script要素を使用して関数を定義しています。 ドキュメントの他の部分からその関数を呼び出して使用しています。

<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要素はデータブロックを表します。 データブロックの部分は、例えばゲームのマップ作成に利用されるのかもしれません。

<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 の内容が評価されます。

<script type="module" src="app.mjs"></script>

■使用例

以下のサンプルは、 最新のユーザーエージェント用のJavaScriptモジュールスクリプトと、 旧いユーザーエージェント用のクラシックスクリプトを振り分けて適用させています。

JavaScriptモジュールスクリプトをサポートしているユーザーエージェントでは、 type属性の値に"module"を指定したscript要素をフェッチして評価します。 また、nomodule属性をサポートしているため、nomodule属性を指定したscript要素は無視されます。

JavaScriptモジュールスクリプトをサポートしていないユーザーエージェントでは、 type属性の値に"module"を指定したscript要素は未知のスクリプトタイプであるため無視されます。 一方で、nomodule属性をサポートしていないため、 nomodule属性を指定したscript要素であってもフェッチして評価します。

<script type="module" src="app.mjs"></script>
<script nomodule defer src="classic-app-bundle.js"></script>

■使用例

以下のサンプルは、 JavaScriptモジュールスクリプト内から JSONモジュールスクリプトをインポートしています。

<script type="module">
 import peopleInSpace from "http://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属性の指定とスクリプト実行のタイミングを示した概略図です。

■関連項目

Sponsors