Torisugariの日記: HTML5のscript要素
"HTML5 script要素"というキーワードで検索すると、async属性(及びdefer属性)に注目している人が多いようです。確かに、こういう細かい挙動も、ひいてはビジターの快・不快(いわゆるUser Experience)に影響を与えるので、決して軽んじていいわけではありませんが、これを使いこなせるほど重い処理をスクリプトにやらせるのか、と考えると、AJAX万歳な時代の趨勢に漠然とした不安を覚えます。
ところで、私が個人的に注目しているのは、script要素の中身です。4.01では、
The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1
となっていた部分が、5のドラフトでは
The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user.
http://www.w3.org/TR/2009/WD-html5-20090825/semantics.html#script
という表現になっています。
script要素の中にスクリプトを書くのは、なんというか、当たり前すぎて説明の必要もないでしょうが、「データブロック」は経緯を知らなければ、あまりピンと来ないかもしれません。規格では、このデータブロックについても、詳しく解説されています。
- script要素は文書中に(レンダリングされない)データを埋め込むのにも使える。
- この用途ではtype属性必須。逆に、src属性は禁止。あくまで、文書中にインラインに埋め込むためだから、srcは必要ないはず。
- 例:ゲームのマップ
<script type="text/x-game-map">
........U.........e
o............A....e
.....A.....AAA....e
.A..AAA...AAAAA...e
</script>The data in this case might be used by the script to
generate the map of a video game. The data doesn't
have to be used that way, though; maybe the map data is
actually embedded in other parts of the page's markup,
and the data block here is just used by the site's search
engine to help users who are looking for particular features
in their game maps.
つまり、投げっぱなしのコメント開始タグ("<!--")と終了タグ("</script*")以外なら、どんなテキストデータを放り込んでも良い、ということです。むしろ、こういう(第三者的に)意味不明な生データはscript要素内に書くのがエヴァンゲリズム的に正しい、ということでしょう。これが"data blocks"です。
結局、コメントと似たような機能です。だからこそ、規格でも"just used by the site's search engine to help users"(自作サーチエンジン以外は読まない)と言っているわけですが、コメントと違ってDOM的に意味がある、という点が異なります。つまり、
document.getElementsByTagName("script")[0]
.firstChild.nodeValue;
のように中身を読み書きできるわけです。かく言う私も、かつて"display:none"な要素にデータを放り込むことをやった記憶がありますが、それだとスタイルシートをオフにしたとき見えてしまうので、script要素を使うのが、便利でかつ安全、というわけです。
<div>
<h1>I'm John.</h1>
</div>
<script type="text/x-bible">
<p>I'm Peter.</p>
</script>
<div>
<span>I'm Luke.</span>
</div>
という例を考えると、ジョンとルークは表示されますが、ピーターは表示されません。それどころか、p要素はパースすらされていないのが正しい挙動なのです。
HTML5が存在しなかったころから、script要素が空要素になれない問題に引っかかった人も多いかと思います。つまり「script要素は終了タグまで何があってもレンダリングされない」という挙動自体は、既にデファクトスタンダードなので、規格以外に何が変わったというわけではありません。ただ、安心して使える/奨められる、という点は魅力だと思いませんか?
HTML5のscript要素 More ログイン