<script>タグの解説
<script>は、HTMLで実行可能なスクリプトをページの中に埋め込む祭に使用します。主に、JavaScriptなどのプログラミング言語を内容に指定します。
使い方は大きく分けて二種類あります。<script>の属性を使って外部ファイルを読み込む方法と、<script>の範囲内に直接ソースコードを書き込む方法です。
<script>タグの特徴
- この要素自体は可視化されません。スクリプトの処理結果がページに反映される場合は、書き出された要素に対して個別のレンダリングが行われます。
<head>、<body>どちらの中にも記述できます。いずれも、外部ファイルを参照して読み込む方法と、直接ソースコードを書き込む方法が使えます。- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<script>要素に指定できる属性
src- 外部スクリプトのファイルを呼び出す場合にURLを指定します。
type- スクリプトを表すタイプを指定します。省略した場合は
"text/javascript"の値とみなされます。指定できる値は以下のいずれかです。JavaScriptのMIMEタイプ：JavaScriptのMIMEタイプを指定する必要がある場合に使用します。通常のJavaScriptのコードを参照する場合は、属性を省略して下さい。module：JavaScriptのモジュールとして扱います。この場合、charset属性とdefer属性は無効になります。importmap：JSONオブジェクトのインポートマップであることを表します。その他：JavaScript以外のMIMEタイプを使用します。
async- スクリプトを非同期に扱う場合に使用します。これは値のない論理属性です。
defer- 外部スクリプトを読み込む祭に、参照中のドキュメントの解析が終わるまで実行を控えます。これは値のない論理属性です。
crossorigin- 外部ドメインに置かれたソースを扱う場合に、CORS（Cross Origin Resource Sharing）とエラーログの扱いを制御します。
integrity- 取得したリソースが改ざんされていないかをチェックするために使用します。
nomodule- モジュール式のJavaScriptに対応していないブラウザ向けの代替スクリプトであることを表します。この属性が指定されている場合、ES modulesに対応しているブラウザはスクリプトを実行しません。これは値のない論理属性です。
nonce- CPS（Content Security Policy）のチェックで用いられるワンタイムトークンを指定します。これを使用する場合、サーバーはポリシーを送信するたびに一意のノンス値を発行する必要があります。
referrerpolicy- スクリプトがリソースを読み込む際に、どのリファラーを送信するかポリシーを定めます。
no-referrer-when-downgrade：リファラ・ヘッダーは、オリジンにTLS/HTTPSがない限り送信しません。既定値です。no-referrer：リファラ・ヘッダーは送信しません。origin：送信するリファラを、参照しているページのオリジンのみに制限します。origin-when-cross-origin：異なるオリジンへ移動する場合、リファラをスキーム、ホスト、ポート番号に制限します。同一オリジンへ移動する場合は、リファラのパスも含めます。same-origin：同一オリジンにはリファラを送信しますが、オリジン間のリクエストにはリファラを含めません。strict-origin：プロトコルのセキュリティ水準が同等であれば、文書のオリジンのみをリファラとして送信しますが、宛先の安全性が低くなる場合は送信しません。strict-origin-when-cross-origin：同一オリジンのリクエストを行う場合はURL全体を送信します。プロトコルのセキュリティ水準が同等であれば、文書のオリジンのみをリファラとして送信しますが、宛先の安全性が低くなる場合は送信しません。unsafe-url：リファラはオリジンとパスを含みます。TLSで保護された環境からセキュアではない生成元へオリジンやパスの情報が漏えいするため、安全ではありません。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<script>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。外部スクリプトを読み込む場合、要素の中は空になりますが、終了タグを省略してはいけません。
<script src="javascript.js"></script>
ソースコードの中に直接スクリプトを記述することも可能です。ブラウザのデベロッパーツールなどでJavaScriptをOFFにすると、<noscript>の部分が表示されます。
<script>
day = new Date();
document.write("表示日時を取得＝");
document.write(day);
</script>
<noscript>このページはJavaScriptを使用しています。</noscript>
async属性を指定した場合
async属性を指定すると、ブラウザはHTMLのパースとは非同期でスクリプトをダウンロードします。読み込みが終わると、スクリプトは実行可能になったタイミングで即時実行されます。
スクリプトのダウンロードは、HTMLのパースなどを行うメインスレッドとは別のスレッドで行われますが、実行はメインスレッドの方で行われるため、HTMLのパースが終わっていなければ中断します。
async属性を持つ<script>要素をひとつのページに複数配置した場合、それらの実行順序はソースコードの記述順通りにはならない点に注意して下さい。
<script src="sample.js" async></script>
defer属性を指定した場合
defer属性を指定すると、ブラウザはHTMLのパースとは非同期でスクリプトをダウンロードします。読み込みが終わると、スクリプトはHTMLのパースが完了するまで待機してから実行されます。
defer属性を持つ<script>要素をひとつのページに複数配置した場合、それらの実行順序はソースコードの記述順通りになります。
<script src="sample.js" defer></script>