HTML5が巨人の川相なら、data-属性はHTML5の川相
意味不明なタイトルですんません。増田にインスパイアされました。
さて HTML5 界隈が騒がしい今日このごろですが、data- 属性というものを皆さんご存知でしょうか？
Twitter のツイートボタン作成ページで作った HTML に入ってる data-via とかのことです。最近色んなところでよく目にしますが、これを使うと任意の DOM 要素に任意の値をセットできるみたいです。
で、この data- 属性なんですが HTML5 の仕様の一部だったみたいです。恥ずかしながらちゃんとした仕様だということを最近知ったのですが、個人的には canvas とか video とかをブッちぎって一番重要な HTML4 からの変更点じゃないかと思います。
てことで本日は、努力家だけど恥ずかしがり屋さんの data- 属性さん(46歳)が実はいぶし銀のスーパースターだということをプロバガンダをしようと思います。
data- 属性は HTML5 の規格の一部
まず超基本的なことですが、data- 属性は HTML5 の規格の一部です。
W3C の HTML5 draft の 3.2.3.8 Embedding custom non-visible data with the data-* attributes に定義されています。
Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
3.2.3.8 Embedding custom non-visible data with the data-* attributes
W3C では data- 属性のことを Custom data attributes と呼んでいるようです。日本語では独自データ属性と表記しているサイトが多いと思います（独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP とか）。
重要なのは↓の部分。（英語の仕様を貼っててもアレなんで HTML5.JP さんから引用）
すべての HTML 要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。
独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP
どの要素に何個でも付けれるらしいです(´・ω・`)便利だねー
てことで HTML5 の独自データ属性を使うと、meta タグとか（Twitter がやってた）、type=”hidden” の input タグとか（form の下位要素じゃないと HTML 的にまずいような）、display:none にした span とか div とか（なんだかねーって感じ）、id や class 属性とか（属性値に制限あり）に、無理やりセットしてたデータをスマートにコーディングできるようになります。
使い方
まず HTML は以下のように書きます。data- に続けてアルファベットと – で任意のキー名を指定します。
data-weapons="laser 2" data-shields="50%"
data-x="30" data-y="10" data-z="90">宇宙船ちきう号</div>
DOM を使って JavaScript から値を参照する場合は以下のようにコーディングします。
if (spaceship.dataset) {
alert(spaceship.dataset.weapons);
alert(spaceship.dataset.shipId);
} else {
alert(spaceship.getAttribute("data-weapons"));
alert(spaceship.getAttribute("data-ship-id"));
}
上のコードでは dataset プロパティが存在するかチェックして dataset に対応していないブラウザをフォールバックしています。手元の Firefox4 が dataset プロ