よく HTML の中にデータを埋め込んでおきたいことはあります。しかし、そのデータをどのように HTML に埋め込むのが良いのでしょうか。多くのシーンでは、data 要素や data-* 属性はまさにその要求に応えてけるはずです。今回は data 要素と data-* 属性の使い方を解説します。
data 要素の解説
data 要素は、特別なセマンティクスは持っておらず、JavaScript やロボットなどから値を読み取りやすくするために用意された要素です。つまりマシンリーダブルな値を埋め込める要素ということです。マークアップは次のようになります。
<data value="10000" id="price">壱万円</data>
value 属性は必須です。この例では「壱万円」が 10000 を表すことを data 要素で表現しています。ただし、これはページ制作者が一方的に「表現」してみたに過ぎず、第三者が理解できるものではありません。仮にロボットがこのページを読んだとしても無視されるだけです。
もっとも役に立つ使い方は、data 要素のコンテンツを JavaScript から読み取りたい場合でしょう。もし何かしらの計算を行いたいなら、「壱万」という表現では困ります。いちいち変換テーブルを用意するのも現実的ではありません。そこで value 属性に JavaScript にとって都合が良い値を入れておくと便利になります。
data 要素の DOM オブジェクトには value 属性の値にアクセスする value プロパティが用意されています。次のような具合に value 属性の値を JavaScript から読み取ることができます。
const data_el = document.getElementById('price');
const price = data_el.value; // "10000"
もちろん、旧来の getAttribute() メソッドを使っても読み取れます。
const price = data_el.getAttribute('value');
マークアップから値を読み取っていますので、ここで得られる値の型は String 型である点に注意してください。もし数値として扱いたいなら、parseInt() または parseFloat() を使って Number 型に変換してください。
日時を表す time 要素との関係
マシンリーダブルな要素といえば、data 要素のほかに time 要素が存在します。time 要素は data 要素とは異なり明確に日時というセマンティクスを持ちます。では、日時を扱う場合、data 要素を使ってはいけないのでしょうか。
<data value="2022-01-08">令和4年1月8日</data>
実はそんなことはありません。日時に data 要素を使っても何ら問題はありません。単にそれが日時であること明示的に表さないだけのことです。おそらく、ほとんどの場合で困ることはないでしょう。
WHATWG HTML 仕様では「日時なら time 要素も使える」と書かれています。time 要素を使うべき、とも、使ったほうが良い、とも、使うことを推奨する、とも書かれていません。もし data 要素のほうが都合が良いなら、遠慮なく data 要素を使いましょう。
data-* 属性の解説
data-* 属性はカスタムデータ属性と呼ばれ、"data-" から始まる名前を自由に決められる属性です。例えば、"data-nickname" や "data-member-code" といった具合に命名することができます。”data-" 以降は次のルールに従わなければいけません。
"a ～ z","0 ～ 9","_","-","."が使える- 少なくとも 1 文字以上が必要
- 先頭は
"a ～ z","_"のいずれか
アルファベット大文字を含んではいけない点に注意してください。なお、仕様では ASCII 文字以外の文字も使えることになっていますが、ここでは割愛します。
カスタムデータ属性はグローバル属性ですので、任意の要素にマークアップすることができます。
カスタムデータ属性を使って前述の「壱万円」のマークアップを書き換えると、次のようになります。
<span data-price="10000" id="price">壱万円</span>
const span_el = document.getElementById('price');
const price = span_el.dataset.price;
console.log(price); // "10000"
このように、カスタムデータ属性をマークアップした HTML 要素のオブジェクトの dataset プロパティから値を取り出すことができます。
カスタムデータ属性は、data 要素の value 属性とは違い、属性名を変えれば複数の属性をマークアップすることができます。
<span data-price="10000" data-product-code="C00321" id="price">壱万円</span>
const span_el = document.getElementById('price');
const price = span_el.dataset.price;
const code = span_el.dataset.productCode;
console.log(`${code}: ${price}円`); // "C00321: 10000円"
ここで注目してほしいのは、マークアップの "data-product-code" 属性の値を取り出す際に、JavaScript では "productCode" を使っている点です。属性名の "data-" 以降にハイフンが含まれる場合、JavaScript 側ではキャメルケースになります。
data 要素と data-* 属性の使い分け
data 要素と data-* 属性は、都合が良いと思う方を使えば良く、ケースに応じて使い分ける必要はないでしょう。一つの HTML 要素に複数の値を埋め込みたいなら data-* 属性を使わざるを得ませんが、そうでなければ、どちらを使っても構いません。
筆者はほぼすべてのシーンで data-* 属性を使っています。なぜなら data-* 属性のほうが柔軟性があると思うからです。複数の値を埋め込めますし、もし何かしらのセマンティクスをマークアップしたい場合にも、data-* 属性なら HTML 要素を選ばないからです。
まとめ
みなさんは、データをマークアップに埋め込む方法として、data 要素と data-* 属性のどちらを使いますか？
これだけ data 要素を解説しておきながら、実は data 要素の存在意義が良く分からないというのが率直な意見です。マークアップにマシンリーダブルな値を埋め込むという目的は同じなのに、なぜ data 要素が追加されたのでしょうか。
HTML5 仕様が作り始められた時から data-* 属性は存在していました。しかし、W3C で HTML5 仕様が勧告になる直前あたりに data 要素が新たに追加されました。筆者はその経緯は知りませんが、たぶん、data 要素を必要とするシーンが存在するのでしょう。筆者はそのようなシーンに出くわしたことがないため、今は data 要素の存在意義が分かりませんが、分かったら追記しようと思います。
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
