<script> HTMLで実行可能なスクリプトを埋め込む
取り扱い | 現行の標準 |
カテゴリ |
メタデータ・コンテンツ フロー・コンテンツ フレージング・コンテンツ |
親にできる要素 | メタデータまたはフレージング・コンテンツを受け入れる要素 |
子にできる要素 | JavaScriptなどのプログラミング言語 |
対応ブラウザ | caniuseで確認 |
<script>タグの説明
<script>
は、HTMLで実行可能なスクリプトをページの中に埋め込む祭に使用します。主に、JavaScriptなどのプログラミング言語を内容に指定します。
使い方は大きく分けて二種類あります。<script>
の属性を使って外部ファイルを読み込む方法と、<script>
の範囲内に直接ソースコードを書き込む方法です。
<script>タグの特徴
- この要素自体は可視化されません。スクリプトの処理結果がページに反映される場合は、書き出された要素に対して個別のレンダリングが行われます。
<head>
、<body>
どちらの中にも記述できます。いずれも、外部ファイルを参照して読み込む方法と、直接ソースコードを書き込む方法が使えます。- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<script>に指定できる主な属性
- type
- スクリプトを表すタイプを指定します。省略した場合は
text/javascript
とみなされます。 - src
- 外部スクリプトのファイルを呼び出す場合にURLを指定します。
- async
- スクリプトを非同期に扱う場合に使用します。これは論理属性です。
- crossorigin
- 外部ドメインに置かれたソースを扱う場合に、CORS(Cross Origin Resource Sharing)とエラーログの扱いを制御します。
- defer
- 外部スクリプトを読み込む祭に、参照中のドキュメントの解析が終わるまで実行を控えます。これは論理属性です。
- integrity
- 取得したリソースが改ざんされていないかをチェックするために使用します。
- nomodule
- ES6 modulesに対応していないブラウザ向けのスクリプトであることを示します。この属性が書かれ場合、ES6 modulesに対応しているブラウザはスクリプトを実行しません。これは論理属性です。
- nonce
- CPS(Content Security Policy)のチェックで用いられるワンタイムトークンを指定します。これを使用する場合、サーバーはポリシーを送信するたびに一意のノンス値を発行する必要があります。
- referrerpolicy
- スクリプトがリソースを読み込む際に、どのリファラーを送信するかポリシーを定めます。
<script>の使い方とサンプル
外部スクリプトを読み込む場合は、以下のように記述します。この場合、要素の中は空になりますが、終了タグを省略してはいけません。
HTML
<script src="javascript.js"></script>
ソースコードの中に直接スクリプトを記述する場合は以下のようになります。ブラウザのデベロッパーツールなどでJavaScriptをOFFにすると、<noscript>
の部分が表示されます。
HTML
<script>
day = new Date();
document.write("表示日時を取得=");
document.write(day);
</script>
<noscript>このページはJavaScriptを使用しています。</noscript>
表示確認
async
属性を指定した場合、HTMLの解析とスクリプトの読み込み・実行を非同期で平行して行います。
HTML
<script src="sample.js" async></script>
defer
属性を指定した場合、HTMLの解析とスクリプトの読み込みを非同期で平行して行い、スクリプトの実行はHTMLの解析が完了した後に行われます。
HTML
<script src="sample.js" defer></script>
<script>に関連するHTMLタグ
オブジェクトやスクリプトを埋め込む要素 | |
---|---|
<img> | 画像を表示する |
<picture> | 特定の画像に対して複数のメディアソースを提供するコンテナを設置する |
<figure> | 写真や図表などの自己完結した要素を表す |
<figcaption> | 参照される写真や図表にキャプションを追加する |
<canvas> | スクリプトで定義したグラフィックスを描画するための領域を配置する |
<audio> | ドキュメント内に音声コンテンツを埋め込む |
<video> | ページ内に動画コンテンツを表示する |
<source> | 再生候補となる動画や音源などのメディアソースを指定する |
<track> | 動画や音声ファイルに字幕やキャプションを追加する |
<embed> | 外部コンテンツを埋め込む |
<object> | 外部リソースのオブジェクトを埋め込む |
<param> | パラメーターを指定する |
<script> | HTMLで実行可能なスクリプトを埋め込む |
<noscript> | スクリプトが動作しない環境での表示内容を指定する |
<meter> | 規定範囲内の数量や測定値を表す |
<progress> | 作業の進捗状況を示すプログレスバーを表示する |
<output> | 計算結果やユーザーアクションの出力欄を作成する |
<dialog> | 任意のタイミングで開くダイアログボックスを作成する |
<template> | ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する |
<slot> | ウェブコンポーネントで独自に扱える枠を提供する |