HTMLをベタで書いているならまだしも、大抵の人はHTMLをWikiやjadeのようなMarkup言語で作成しているのではないか。
大抵のMarkupではコメントの記述ができるようになっており、HTMLにおけるコメント（<!-- コメント -->）をあえて使うシーンはたぶん少なくなってきている。
そんな今どきのWebで、あえてHTMLコメントを使うときはどんな時があるかまとめてみた。
IEと戯れるコメントタグ
いわゆる条件付きコメント。IE8以下の有象無象を囲んで警棒で叩くために使用。
じっさいかなり助かる。
<!--[if lt IE 6]><html class="legacy lt-ie8 lt-ie7 lt-ie6"><![endif]-->
<!--[if IE 7]><html class="legacy lt-ie8 lt-ie7 lt-ie6"><![endif]-->
<!--[if IE 8]><html class="legacy lt-ie8"><![endif]-->
<!--[if IE 9]><html class="legacy lt-ie8"><![endif]-->
<!--[if !IE]><!--><html class="modorn"><!--<![endif]-->
Webアプリフレームワークと戯れるコメントタグ
RailsにはETagという機能があり、コンテンツの内容（≒bodyの内容）をキャッシュしている。
それとは別に、Finger Printingという機能によってcssやjsファイルを「ファイル名-ハッシュ.css」のような名前に変更し、内容変更時にもキャッシュを破棄して再読み込みさせる。
<html>
<head>
<link rel="stylesheet" href="application-912486a25b14eg31.css">
</head>
<body>
<h1>お花見情報だよ</h1>
</body>
</html>
- ある日、ページタイトルを桜色にしたいと思い、application.cssを変更した。
- その結果、Finger Printingによって"application-11121212121ab31.css"というスタイルシートファイルが作成されるようになった。
- アプリケーションをデプロイしてページにアクセスすると「application-912486a25b14eg31.css ないよー」とエラーになった。
- なんで？
- 正解はETagのせいか
ETagはBody要素の内容をハッシュ化しているため、ヘッダー部分の変更を感知せず昔のページをクライアントに表示させる。
クライアント側で昔のcssファイルだけをリクエストするようなことがあると、もうそんなファイルはないのサーバーが怒る。
こういう事態を防ぐために、例えばbody要素中のメタ情報として、gitのbranch情報などをコメントに出力しておくとよい。
生HTMLにコピペで貼り付けるとかじゃなくて、Webアプリの変数埋め込み機能とかで行う。
<body>
<!-- app var. 13e5461d78e0223d095f019860143be350730e2 -->
<h1>お花見情報だよ</h1>
</body>
こうしておくとWebアプリが更新される度に、キャッシュがクリアされる。
動的なページでは上のようなことが起きることはまず無いが、ほぼ静的なページなどではこういう仕掛けをしておくのもあり。
RailsにかぎらずETagを利用したWebアプリフレイムワーク全般に同じことがたぶん言える。
Javascriptと戯れるコメントタグ
HTMLコメントは、Domとして木構造中に管理されているので、javascriptで取得することが可能。
var d = document.getElementsByTagName("body")[0].childNodes,
i;
for (i=0;i<d.length;i++){
if(d[i].nodeType == 8){
console.log(d[i]) // HTMLコメントの出力
}
}
Domへコメントを挿入することも可能。以下はjQueryを使った例。
niceComment = $("<!-- これもっとクエン酸入れたらどうっすか -->");
$(".newIdea").append(niceComment);
Chrome拡張とかで htmldoc 的なものを作ったり、sprocketのrequireコメント的な仕組みを作るのに使えるかもしれない。具体的なアイデアはないし、そもそもmetaタグでだいたいどうにかできる感はある。