---

僕は一つの命題に悩んでいた。


タグにどうやって通し番号付けようって。


やりたいこととしては、何らかのタグをクリックするとそのデータのIDを取得する、みたいなやつですね。
これをjavascriptでやろうとすると結構めんどくさくて、数字onlyのクラス名というのは存在してはいけないことになっているので、通し番号クラスみたいなのは作れないんですね。
するとまぁ正規表現マッチングしてそこから数字の部分だけ取り出して･･････みたいなことをやらなくちゃいけなくなります。


Anonymousでも似たようなことをやっていたのですが、あの場合はimgタグが存在していたのでimgタグのname属性に通し番号を埋め込むというゴリ押しで突破していました。
しかしMuselでは画像を使いません。さてどうしたものか･･････。



ということで、もっと良い解決方法はないものかと探してたらありました。
それが今回お話する独自データ属性と呼ばれるものです。HTML5で追加されたようです。

<xx data-名前="データ"></xx>

こんな書式になっています。これで自分の好きなデータが定義できるようになったわけですね。ちなみに配列なんかも扱うことができたりします。面白いですね。
Muselではdata-idとして、IDを定義させてもらいます。jQueryからattr()やdata()なんかでアクセスできるようです。
この2つは微妙に挙動が異なってて、混在させると予期せぬエラーを生む可能性があります。dataは型変換して、さらにキャッシュを読み書きするもののようです。
直感的に扱いやすいのはattr()の方だと思うので、基本的にはattr()を使ったほうが良いような気がします。





ちなみに現状はこんな感じです。WebStorageめっちゃ便利です。クッキーみたくPHP側から読み込めたら便利なんですが、たぶんそれはクッキーが常にHTTP通信を介してるからできることであって、WebStorageだと不可能なんでしょうね。javascriptありきのWebアプリってあんまり宜しくないとは思うんですが、まぁ仕方ないかな。javascript切ってる人の割合がどれぐらいいるか、ですしね。
頑張ればクッキーでも実装できることなので悩みどころではありますが、SessionStorageとLocalStorageの使い分けはとても便利なので、まぁそれにしばらくはあやかるとしましょう。