May 2nd,2015
＃
“type”属性について
“type”属性は埋め込まれるスクリプトの種類を示します。
“type”属性を省略した場合や“type”属性の値を省略した場合は埋め込まれたスクリプトがモジュールスクリプトではない従来のJavascriptであることを示します。JavascriptのMIMEタイプ(“text/javascript”)を値に指定した場合も同様の意味になりますが、仕様書では代わりに“type”属性を省略することが推奨されています。
埋め込まれるスクリプトがJavascriptのモジュールスクリプトである場合は値に“module”を指定します。この場合“defer”属性は無視されます。
値にその他のMIMEタイプを指定する場合は埋め込まれた内容はブラウザによって処理されないデータブロックを表します。データブロックは後になって新しい種類のスクリプトができたときにスクリプトとして処理されるようになることがないように既存の有効なMIMEタイプで示す必要があります。埋め込まれる内容がデータブロックである場合は“type”属性以外の“script”要素固有の属性はいずれも指定できません。
＃
指定できる値
| 属性値 | 説明 |
|---|---|
| text/javascript | モジュールスクリプトではないJavascript |
| module | モジュールスクリプトであるJavascript |
| その他のMIMEタイプ | 埋め込まれた内容はデータブロック |
埋め込むスクリプトがモジュールスクリプトではない従来のJavascriptである場合は“type”属性に“text/javascript”と指定するよりも“type”属性を省略することが推奨されます。
＃
サンプルコード
スクリプトの埋め込み
<!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-1.js" type="module" async></script>
<script src="sample-script-2.js" async></script>
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
データブロックの埋め込み
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "CreativeWork",
"name":"枕草子",
"dateCreated":"1001",
"locationCreated":"平安京",
"genre":"随筆",
"author": {
"@type": "Person",
"name":"清少納言",
"familyName":"清原",
"givenName":"諾子",
"jobTitle":"女流歌人",
"colleague":"紫式部"
},
"text":"夏は夜月のころはさらなり、闇もなほ、蛍の多く飛びちがひたるまた、ただ一つ二つなど、ほのかにうち光て行くもをかし雨など降るもをかし"
}
</script>
<p>
下に書かれている文章は<time datetime="1001">長保3年</time>に平安京で書かれたとされる“枕草子”という随筆の一節です。 “枕草子”は清少納言という平安時代の女流歌人により執筆されました。“清少納言”はペンネームのようなもので本当の名前は清原諾子であったと言われますが諸説あります。清少納言は紫式部とライバル関係にあったといわれることが多いですが、当時は面識すらなかったのではないかという見方が有力です。
</p>
<blockquote>
<p>
夏は夜<br>
月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる<br>
また、ただ一つ二つなど、ほのかにうち光て行くもをかし<br>
雨など降るもをかし<br>
</p>
</blockquote>
