HTML5が巨人の川相なら、data-属性はHTML5の川相

さくら — Thu, 25 Aug 2011 06:31:02 +0000

意味不明なタイトルですんません。増田にインスパイアされました。

さて 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- に続けてアルファベットと – で任意のキー名を指定します。

<div id="spaceship" data-ship-id="92432"
data-weapons="laser 2" data-shields="50%"
data-x="30" data-y="10" data-z="90">宇宙船ちきう号</div>

DOM を使って JavaScript から値を参照する場合は以下のようにコーディングします。

var spaceship = document.getElementById('spaceship');
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 プロパティに対応していないようでしたので、実際にコーディングする際は getAttribute だけで良いような気もします。

dataset プロパティを使用する場合は、キーに – が含まれている場合は Camel にします。（data-ship-id → dataset.shipId）

値をセットする場合は dataset プロパティに代入するか setAttribute を使います。jQuery を使った方が便利ですのでこの辺の例は省略、ってことで興味ある方はご自分でお調べください。

jQuery の場合

jQuery には $.data() と .data() という似たような名前の関数がありまして、HTML5 の独自データ属性と対応するのは .data() の方なのでご注意ください。$.data() も .data() もプレースホルダを提供する関数なのですが、$.data() の方は完全に jQuery 独自の実装となっています。

で、.data() の方は大方の読者の予想の通り↓のようにコーディングできます。

alert($('#spaceship').data('weapons'));
alert($('#spaceship').data('ship-id'));

値をセットする場合はこんな感じ。

$('#spaceship').data('weapons', 'Gatling gun');
alert($('#spaceship').data('weapons'));

ちなみに、.data() で値をセットしても data- 属性には書き込まず $.cache に値がセットされます。data- 属性に書き込みたい場合は .attr() を使ってください。なんかややこい挙動ですが、なんか理由があってこーなってる気がします。（jQuery のサイトでなんで HTML5 の data- に書き込まないの？って感じのコメントしてる人がいますが華麗にスルーされてますし。）

また、.data() の引数を省略するとデータをオブジェクトで返します。

alert($('#spaceship').data().weapons);

値にはオブジェクトも指定できます。

$('body').data('bar', { myType: 'test', count: 40 });
alert($('body').data('bar').myType);

ぶっちゃけ大して難しいところは無いと思いますので説明はこの辺で。

ということで、いぶし銀 JavaScripter を目指す皆様におかれましては data- 属性で千本バント練習に打ち込むのがよろしいかと思います。

さくらたんどっとびーず » HTML5

HTML5が巨人の川相なら、data-属性はHTML5の川相

data- 属性は HTML5 の規格の一部

使い方

jQuery の場合