HTML

The HTML script tag is used to incorporate JavaScript code, which adds dynamic features and behaviors to a web page.

script要素

　HTMLの <script>タグは、Webページに動的な振る舞いを追加するために使用されます。これにより、ページ上でユーザーとのインタラクションが可能になり、静的な文書をはるかに興味深く有用なものに変えることができます。一般的に、JavaScript（JS）というプログラミング言語がこの目的のために使われます。<script>タグは HTMLドキュメント内のどこにでも配置することができますが、主に <head>セクションか、<body>セクションの最後に配置されます。

　<script>タグを使用する基本的な方法は、直接 JavaScriptコードを HTML内に書き込むか、外部の JavaScriptファイルを参照するかの二つがあります。直接書き込む場合は、<script>タグの内部に JavaScriptコードを記述します。外部ファイルを参照する場合は、src属性を使用してファイルの場所を指定します。

　src属性で JavaScriptの外部 jsファイルを読み込む場合には、例えば以下のように記述します。

HTML

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

script要素の内容はブラウザ上には表示されないことになっていますが、<script>～</script> の中にスクリプトを記述する場合、その内容を  でコメントアウトしておくのが一般的でした。これは、<script>タグに対応していない旧式のブラウザで、スクリプトの記述がそのままテキストとして表示されてしまうのを防ぐためですが、現在、script要素は主要なブラウザでサポートされているので、コメントアウトしなくても問題が起きることはほとんどないようです。

HTML

<script>
	<!-- インラインでJavascriptコードを入れる -->
</script>

セキュリティ面の考慮

　Web開発では、セキュリティは極めて重要です。スクリプトの使用にあたっては、クロスサイトスクリプティング（XSS）のような攻撃から保護するため、信頼できるコードのみを使用し、ユーザー入力を適切にサニタイズすることが重要です。また、可能な限り HTTPS経由で外部スクリプトを読み込むことを推奨します。

属性

src属性: 外部スクリプトファイルの URLを指定する。
type属性: スクリプトの言語タイプやデータ形式を指定するために使用されます。
async属性: 利用可能な時点でスクリプトを実行する。
defer属性: HTML文書を読み込んだ時点でスクリプトを実行する。
charset属性: 外部スクリプトファイルの文字エンコーディングを指定する。

src属性

　src属性は、外部のスクリプト・ファイルのアドレスを指定します。src属性を指定した場合は、script要素の中に、インラインでコードを記述する事はできません。

　type属性を使ってスクリプトのタイプを指定した場合、src属性を使って読み込まれるスクリプトのプログラム言語の種類と一致しなければいけません。

　type属性を指定しない場合は、そのスクリプト・ファイルのプログラム言語は JavaScriptでなければいけません。

src属性のマークアップ例

HTML

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

type属性

　type属性は、主にスクリプトの言語タイプやデータ形式を指定するために使用されます。しかし、HTML5以降では、JavaScriptがデフォルトのスクリプト言語となっているため、type属性を指定しなくても JavaScriptとして解釈されます。それでも、特定のケースや古いブラウザの互換性、またはスクリプトがデータブロックとして扱われるべき場合に type属性が利用されることがあります。

　以下は、HTMLの <script>要素で使用される type属性の値と、それぞれの簡単な説明です。

text/javascript（デフォルト）: これが最も一般的に使用される値で、JavaScriptコードを示します。HTML5では、type属性を省略した場合、この値がデフォルトとして扱われます。
module: JavaScriptモジュールを指定します。<script type="module">は、ES6以降のJavaScriptモジュール機能を利用する際に使用され、importやexport文が使えるようになります。
text/ecmascript, application/javascript, application/ecmascript: これらはすべて JavaScriptのコードを指定するために使用されることがありますが、text/javascriptが推奨されるため、現在はあまり使われていません。
text/plain: スクリプトとして実行されるべきでない、純粋なテキストデータを埋め込む際に使用します。この値を使用すると、ブラウザはスクリプトとして解釈しないため、HTML内でスクリプトのサンプルを安全に表示することができます。
カスタムMIMEタイプ（例: application/x-my-custom-type）: 特定のスクリプト処理システムやライブラリ用にカスタマイズされた MIMEタイプを使用することもあります。これらは通常、データブロックとしてスクリプトを埋め込む際や、特定の処理をトリガーするために用いられます。

　現代の Web開発では、特に指定する必要がない場合は type属性を省略し、JavaScriptコードとしての解釈を前提とするのが一般的です。また、モジュールスクリプトを利用する際には type="module" を使用することが推奨されます。

　なお、旧来から使われてきた language属性は、HTML5では非準拠となりますので注意してください。

charset属性

　charset属性は、src属性を使って外部から読み込まれるスクリプトファイルの文字エンコーディングを指定する際に使用します。src属性が指定されていない場合や、スクリプトを HTML文書の <script>～</script> の中に直接記述する場合には、charset属性を使用することはできません。

charset属性の利用例

HTML

<script src="example.js" charset="UTF-8"></script>

　なお、charset属性で、外部ファイルの文字エンコーディングを指定する場合は、その外部ファイルが Webサーバから送信される際に使われる HTTPレスポンス・ヘッダの Content-Type に指定される charsetパラメータと同じでなければいけません。もし利用しているサーバが、デフォルトで Content-Typeに charsetパラメータを使って文字エンコーディングをセットする設定になっている場合には注意してください。

async属性

　async属性は、src属性で指定された外部のスクリプトファイルを非同期で読み込んで、そのスクリプトが実行できるようになったらすぐに実行されるよう指示するための論理属性です。この属性は、src属性が指定されている場合にのみ利用可能です。

async属性の利用例

HTML

<script src="example.js" async="async"></script>

　例えば、もし body要素の中に script要素を入れると、それが読み込まれて実行が完了するまで、ブラウザの処理はブロックされてしまいます。つまり、ページの読み込みに、その分、時間がかかってしまいます。

　しかし、async属性が指定されていると、外部ファイルのロードと実行が非同期に行われるため、ブラウザの処理がブロックされる事がなくなり、ページのロードを遅らせる事がなくなります。

　async属性は HTML5で新たに導入された属性です。2009年12月時点で、async属性をサポートしたブラウザはありません。

defer属性

　defer属性は、ブラウザがページの読み込みが完了した時点で、スクリプトが実行されるように指示するための論理属性です。この属性は、src属性が指定されている場合にのみ利用可能です。

defer属性の利用例

HTML

<script src="example.js" defer="defer"></script>

　では、いくつかサンプルを見てみましょう。ここでは、次の JavaScriptの外部ファイルを使います。

example.js

document.getElementById("st").innerHTML = "読み込み完了";

サンプルコード

HTML

<script src="example.js"></script>
<div id="st">ページロード中...</div>

　このサンプルは、JavaScriptエラーになります。なぜなら、example.js は、div要素がブラウザに読み込まれる前に実行されてしまうからです。

次のように、script要素に defer属性を指定してみましょう。

defer属性を入れたサンプルコード

HTML

<script src="example.js" defer="defer"></script>
<div id="st">ページロード中...</div>

　この場合は、ページのロードが完了してから example.js が実行されるため、JavaScriptエラーになる事はありません。

　この defer属性は、onloadイベント・ハンドラ属性の代わりとして利用する事が可能ですが、JavaScriptが実行されるタイミングは若干異なります。defer属性が指定された script要素のスクリプトは、ドキュメントから loadイベントが発生する前に実行されます。そのため、onloadで指定されたスクリプトより先に実行されることになります。

　defer属性は、HTML4から規定された属性です。しかし、全てのブラウザが対応しているわけではありません。2009年12月現在で、defer属性に対応しているのは、Internet Explorer、Firefox だけです。Safari、Chrome、Opera は対応していません。

Data on support for the script-defer feature across the major browsers from caniuse.com

スクリプトの説明文

　src属性を指定して外部のスクリプト・ファイルを読み込む場合には、通常は、script要素の中にコードを入れる事はできません。しかし、スクリプトの説明文を入れる事は可能です。

スクリプトの説明文の例

HTML

<script src="example.js">
	// (c) Yugien 2004-2024.
	// 使い方
	// var o = new Example();
	// o.add(string);
	// o.del(string);
</script>

　この例のように、スクリプトの使い方や、著作権表記などに使えます。script要素の中に説明を入れる場合は、全ての行の先頭にスラッシュを 2つ入れます。スラッシュの前に半角スペースやタブを入れても構いません。

script要素の概要

カテゴリー

メタデータ・コンテンツ

フロー・コンテンツ

フレージング・コンテンツ

コンテンツ･モデル

src属性がない場合：type属性によって変わる。

src属性がある場合：空、もしくは、スクリプトの説明のみ。

利用可能な場所

メタデータ・コンテンツが期待される場所

フレージング・コンテンツが期待される場所

開始タグ

必須

終了タグ

必須

要素固有のコンテンツ属性

src: 外部のスクリプトを読み込む場合に、そのアドレスを指定します。
async: スクリプトが利用可能になったら、出来る限り早くそれが実行されるようにします。
defer: ドキュメントがパースされた後にスクリプトが実行されるようにします。
type: スクリプトの言語、または、データのフォーマットを表す MIMEタイプを指定します。
charset: src属性で指定した外部のスクリプトの文字エンコーディング名を指定します。

標準的なスタイル

script {
	display: none;
}

　以下は、W3Cの公式サイトに script要素の使用例として掲載されているものです。２つの script要素が使用されていますが、一つは外部 jsファイルを指定しており、もう一つはデータブロックを記述しています。これは、“外部 jsファイルのスクリプトが、ビデオゲームの地図を作成するためのデータブロックを利用する…”という想定のサンプルのようです。

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>