大槻さんがHTML5的なものを書くと不思議なことになる。
大槻さんは、
<a class="hogeHoge" data-hoge-someProperty="fuga" data-hoge-anotherProperty="piyo">mogera</a>
みたいなコードを平気で書く。で、
$(function(){$('.hogeHoge').each(function{ this.addEventListner('click',function(e){ this.dataset.hoge-State="running"; // sumthin }); });});
みたいなスクリプト*1を食わせてコードビハインドをくっつける。そんでもって、
.hogeHoge:hover{ /* sumthin */ } .hogeHoge[data-hoge-state="indeterminate"]{ /* sumthin */ } .hogeHoge[data-hoge-state="running"]{ /* sumthin */ }
みたいなコードで各ステートごとの見た目を作って、その間をtransitionでつないでいく*2。
どうしてこんな書き方になってしまったかというと、WPFアプリケーションの書き方に影響を受けている。
CSSがWPFでいうVisualState、ControlTemplate、Styleに対応し、JavaScriptはもちろんコードビハインド。HTMLは各部品のプロパティやデータと、その部品配置の論理構造を書く、まぁ言うなればMainWindow.xaml的なもので、前掲のa要素みたいな機能部品は、そこに付されたクラスでもって、そういうカスタムコントロールであるように取り扱っている。機能部品を使いたい時は、HTML上でクラスとプロパティを設定して呼び出せば勝手に機能が付くのでスクリプトを書く必要はない*3。
他にも、あるクラスのdata-属性を
.parent[data-sumthin="sumthin"] .child{
みたいなセレクタで引っ張り出して、子要素に継承される添付プロパティのように使ったりとかするし、
<a class="baseClass derivedClass">
みたいな書き方で派生クラスを作ったりする。
正直なところ、このやり方が正しいのかどうかは自信がないのだが、特に前半で述べたような分離がされていないと、なんだか居心地が悪いのである。
