このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

script要素:スクリプト

記事May 2nd,2015
July 10th, 2020
動的なスクリプトのコードを埋め込む要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

script”要素は動的なスクリプトのコードやデータブロックを文書に埋め込むための要素です。

スクリプトのコードはscript”要素の中に直接記述するか、src”属性“によって読み込む外部スクリプトファイルに記述します。

属性の指定の仕方は埋め込むスクリプトがJavascriptのモジュールスクリプトであるか、そうでない従来のJavascriptなのかによって変わります。

ユーザーの設定によりスクリプトが無効化されている場合や、スクリプトに対応していない場合に使用されるコンテンツをnoscript”要素で表すことができます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script src="sample-script.js" async></script>
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
<script>
now = new Date()
document.write("今日は" + now.getFullYear() + "年"
+ (now.getMonth() + 1) + "月"
+ now.getDate() + "日です")
</script>
...
...



...

属性と値

現行の仕様で定義されている属性

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
src="" 埋め込む外部スクリプト URL 埋め込む外部スクリプトのURL
type="" 埋め込むスクリプトの種類 text/javascript モジュールスクリプトではないJavascript
module モジュールスクリプトであるJavascript
その他のMIMEタイプ 埋め込まれた内容はデータブロック
nomodule="" モジュールスクリプトに対応する環境での無効化 nomodule モジュールスクリプトに対応する環境での無効化
async=""HTML5で追加 スクリプトをパースと並行して読み込み、使用可能になった時点で実行する async スクリプトをパースと並行して読み込み、使用可能になった時点で実行する
defer="" スクリプトをパースと並行して読み込み、パースの完了後に実行する defer スクリプトをパースと並行して読み込み、パースの完了後に実行する
crossorigin=""HTML5で追加 スクリプトを読み込む時のCORSリクエストを設定 anonymous CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
use-credentials CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する
integrity=""HTML Living Standardで定義 外部スクリプトの整合性を確認 ハッシュ値 BASE64でエンコードした外部リソースのハッシュ値
referrerpolicy=""HTML5.2で追加 リファラーポリシーを指定 リファラーポリシー リファラーポリシーを指定

過去に定義された属性

属性
属性 説明 説明
charset=""注意 外部スクリプトの文字エンコーディング 文字エンコーディング 外部スクリプトの文字エンコーディング
language=""注意 スクリプトの記述言語 スクリプトの記述言語 スクリプトの記述言語
nonce=""HTML5.1で追加 コンテンツセキュリティポリシーのためのワンタイムトークン ワンタイムトークン 自動生成したBASE64でエンコードされた暗号

要素の内容

src”属性が指定されている場合
空もしくはスクリプトに関する注釈
src”属性が指定されず、type”属性の値が“text/javascript”か“module”、もしくはtype”属性を省略した場合
スクリプトのコード
src”属性が指定されず、type”属性の値が“text/javascript”か“module”ではない場合
データブロック

ただし、いずれの場合もタグやコメントとして読み取られてしまう記述はできません。“<!--”は“<!\--”、“<script”は“<\script”、“</script”は“<\/script”にそれぞれ置き換える必要があります。

script”要素を配置する場所

script”要素はhead”要素の中にもbody”要素の中にも配置することができます。しかし、近年はbody”要素内の一番最後に“script”要素を配置するのが一般的です。

通常ブラウザがウェブページを読み込む時、パースの途中でスクリプトを見つけるとパースを中断し、スクリプトを読み込んで実行するまでパースが再開されません。これはスクリプトによってHTMLが書き足される可能性があるためなのですが、その分ウェブページが表示されるのが遅れてしまいます。

パースはHTML文書のソースに記述された順に行われるので、一番最後に“script”要素を配置すれば他の内容がほぼすべて読み込まれた後にスクリプトを読み込ませることができ、ウェブページの表示を早めることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
<!--コンテンツ-->
...
<script src="sample-script.js"></script>
</body>
</html>

スクリプトの読み込みによるパースの中断はdefer”属性async”属性の指定でも解消することができます。

仕様書

script”要素はHTML3.2から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<script>
定義あり

定義あり

定義あり

定義あり

定義あり
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク