この記事ではHTML5カスタムデータ属性の使い方を説明します。また、Web開発者の仕事に役立つユースケースも紹介します。
なぜカスタムデータ属性か？
多くの場合、DOM要素が異なれば、それに応じた情報を格納する必要がでてきます。そういった情報は読者にとっては不必要かもしれませんが、開発者にとっては簡単にアクセスできれば仕事がずっと楽になります。
たとえば、Webページにいろいろなレストランを載せたリストがあるとします。レストランで出される食事のタイプやレストランまでの距離についての情報を格納する場合、HTML5が登場する前は、 HTMLのclass属性を使っていたと思います。もし、ユーザーが特定のレストランについて知るために、レストランのidも格納する必要が出てきたらどうでしょうか。
HTMLのclass属性を使ったアプローチで問題になる点は以下のようになります。
- HTMLのclass属性の目的は、このようなデータを格納するためではない。主な目的は、開発者が要素の集まりにスタイル情報を割り当てることだ
- 情報が増えるたびに、要素に新しいクラスを追加する必要がある。そうすると、JavaScriptで実際に必要な情報を取り出すためにデータをパースするのが難しくなる
- 数字で始まるクラス名がある場合、あとでクラス名にあるデータに基づいて要素をスタイリングするとき、その数字を除外するか、あるいはスタイルシートで属性セレクターを使わなければならない
これらの問題を回避するために、HTML5ではカスタムデータ属性が導入されました。要素の中で、data-で始まる属性はすべてデータ属性となります。データ属性は要素をスタイリングするのに使えます。
次に、データ属性の基礎について取り上げます。CSSやJavaScriptで属性値にアクセスする方法を説明します。
HTMLの文法
すでに述べたように、データ属性の名前は常にdata-で始まります。例を示します。
<li data-type="veg" data-distance="2miles" data-identifier="10318">
Salad King
</li>
これで、ページ閲覧者がレストランを探したりソートしたりするのに、データ属性を使えるようになりました。たとえば、ある範囲内にあるベジタリアンレストランをすべて示せます。
接頭辞data-以外でカスタムデータ属性の名前に使えるのは、文字、数字、ハイフン（-）、ドット（.）、アンダースコア（_）だけです。大文字は使えません。
データ属性を使うときに、気をつけなければならないことが2つあります。
第1に、データ属性に格納するデータは文字列でなければなりません。文字にエンコードできるものなら、なんでもデータ属性に格納できます。タイプ変換はすべてJavaScriptで実行する必要があります。
第2に、データ属性を使うのは、ほかに適切なHTML要素や属性がない場合だけに限るべきです。たとえば、要素のclassをdata-class属性に格納するのは適切ではありません。
1つの要素は、さまざまな値を持ったデータ属性をいくつでも持てます。
データ属性とCSS
CSSでは属性セレクターを使って要素をスタイリングするのに、データ属性が使えます。 attr()関数を使って、tooltipやそれ以外の方法でデータ属性に格納された情報をユーザーに表示できます。
要素のスタイリング
レストランの例に戻りますが、属性セレクターを使えば、レストランごとに背景を変えて、レストランのタイプや距離に関するヒントをユーザーに示せます。たとえば、次のようにできます。
li[data-type='veg'] {
background: #8BC34A;
}
li[data-type='french'] {
background: #3F51B5;
}
ツールチップの作成
ツールチップを使って、要素に関連した追加的な情報をユーザーに示せます。
この方法は、本番環境ではなくプロトタイプで手軽に試すのにおすすめします。CSSだけで作ったツールチップは、アクセシビリティが不完全なのでなおさらです。
表示したい情報はdata-tooltip属性に格納できます。
<span data-tooltip="A simple explanation">Word</span>
::before擬似要素を使って、ユーザーにデータを示せます。
span::before {
content: attr(data-tooltip);
// More Style Rules
}
span:hover::before {
display: inline-block;
}
JavaScriptでデータ属性にアクセスする
JavaScriptでデータ属性にアクセスする方法は3つあります。
getAtributeとsetAttributeを使う
異なったデータ属性の値を取り出したりセットしたりするのにJavaScriptのgetAttribute()とsetAttribute()が使えます。
取り出そうとした属性がない場合getAttributeメソッドはnullあるいは空文字列を返します。このメソッドを使った例は次のようになります。
var restaurant = document.getElementById("restaurantId");
var ratings = restaurant.getAttribute("data-ratings");
既存の属性の値を変更したり、新しい属性を加えるにはsetAttributeメソッドが使えます。
restaurant.setAttribute("data-owner-name", "someName");
データセットプロパティを用いる
datasetプロパティを使えば、もっと簡単にデータ属性にアクセスできます。カスタムデータ属性ごとに1つのエントリーを持ったDOMStringMapオブジェクトを返します。
datasetプロパティを使うときに注意することがあります。
カスタムデータ属性をDOMStringMapキーに変換するには3段階必要です。
- 属性名からdata-接頭辞を取り除く
- ハイフンのあとに小文字が続く場合、名前からハイフンを取り除き、ハイフンに続く1文字を大文字に変換する
- ほかの文字はそのままにする。つまり、あとに小文字が続かない場合、ハイフンもそのままにする
element.dataset.keynameのようなキーでオブジェクトに格納されたキャメルケース名を使うことで属性にアクセスできます。
属性にアクセスするもう1つの方法はelement.dataset[keyname]のようにブラケット表現を使う方法です。
次のようなHTMLがあります。
<li data-type="veg" data-distance="2miles" data-identifier="10318" data-owner-name="someName">
Salad King
</li>
ブラケット表現を使う例を示します。
var restaurant = document.getElementById("restaurantId");
var ratings = restaurant.dataset.ratings;
restaurant.dataset.ratings = newRating;
var owner = restaurant.dataset['ownerName'];
restaurant.dataset['ownerName'] = 'newOwner';
このメソッドは主なブラウザーではすべてサポートされており、先に示したカスタムデータ属性にアクセスする方法よりも優先して使うべきです。
jQueryを使う
ある要素のデータ属性にアクセスするのに、jQueryのdata()メソッドも使えます。 jQueryバージョン1.6より前では、データ属性にアクセスするには次のコードを使う必要がありました。
var restaurant = $("#restaurantId");
var owner = restaurant.data("owner-name");
restaurant.data("owner-name", "newName");
バージョン1.6からは、jQueryはデータ属性にキャメルケース方式を使い始めました。現在は、次のコードを使って同じことができます。
var restaurant = $("#restaurantId");
var owner = restaurant.data("ownerName");
restaurant.data("ownerName", "newName");
jQueryは、データ属性から得た文字列を内部で数字、真偽値、オブジェクト、配列、nullなどの適切なタイプに型変換しようとすることに気をつけてください。
var restaurant = $("#restaurantId");
var identifier = restaurant.data("identifier");
console.log(typeof identifier);
// number
ほかのタイプに変換せずに属性の値を文字列としてjQueryで取り出したい場合、jQueryのattr()メソッドを使ってください。
jQueryがデータ属性の値を取り出すのは、その属性にはじめてアクセスしたときだけです。以降は、データ属性にはアクセスせず、変更もしません。変更した属性はすべてjQuery内部に限られ、jQuery内でのみアクセスできます。
次のリストアイテムのデータ属性を変更したと仮定します。
<li id="salad" data-type="veg" data-distance="2miles" data-identifier="10318">
Salad King
</li>
下のコードを使ってdata-distance属性の値を変更できます。
var distance = $("#salad").data("distance");
console.log(distance);
// "2miles"
$("#salad").data("distance","1.5miles");
console.log(distance);
// "1.5miles"
document.getElementById("salad").dataset.distance;
// "2miles"
このように、jQueryではなく素のJavaScriptを使ってdata-distance属性の値にアクセスしても、古いままの結果しか得られません。
最後に
この記事では、HTML5データ属性について知っておかなければならない重要事項をすべて取り扱いました。属性セレクターを使って、ツールチップやスタイリング要素を作るの加えて、未読通知などほかのデータを格納したり、ユーザーに見せたりするのに、データ属性が使えます。
（原文：How You Can Use HTML5 Custom Data Attributes and Why）
［翻訳：関 宏也／編集：Livit］
