uhyohyo.net

JavaScript初級者から中級者になろう

十二章第四回 dataset

今回はちょっと息抜きで、簡単ですが便利なdatasetを紹介します。

HTML5には独自データ属性というものがあり、簡単にいうと、要素に好きな属性をつけられるというものです。

ただ、完全に自由に属性に名前をつけていては大変なので、data-という接頭辞をつけた属性を勝手に自分で作っていいことになっています。つまり、具体的には例えばこうです。

<div data-test="foo">

data-testという独自データ属性をつけてみました。

もちろん自分で勝手に作ったので、HTML的には何の意味もありません。じゃあ何に使うのかというと、そう、JavaScript側から利用できるのです。

例えば以前四章第一回で、画像の説明にtitle属性を使いました。

<img src="aaa.gif" alt="aaa" width="100" height="100" title="aaaの画像です。">
<img src="bbb.gif" alt="bbb" width="100" height="100" title="bbbの画像です。">
<img src="ccc.gif" alt="ccc" width="100" height="100" title="cccの画像です。">

title属性にはもともと「説明」的な意味があるからいいのですが、ぜんぜんHTML的には関係ないデータを入れたい場合とか、あとデータを何種類も入れたい場合など、title属性を使っていては不都合な場合もあることでしょう。そこで、今回はこれを独自データ属性を使って書いてみましょう。

要するにこうです。

<img src="aaa.gif" alt="aaa" width="100" height="100" data-description="aaaの画像です。">
<img src="bbb.gif" alt="bbb" width="100" height="100" data-description="bbbの画像です。">
<img src="ccc.gif" alt="ccc" width="100" height="100" data-description="cccの画像です。">

このようにdata-descriptionという独自データ属性を用意しました。

それではこれを読み込むほうはこんな感じでしょうか。

//elementを問題のimg要素とすると
element.getAttribute('data-description');

これでも読めることは読めるのですが、わざわざ独自データ属性として用意されているからには、実はもっと便利な方法があるのです。それがこれです。

element.dataset.description;

要素のdatasetというプロパティが出現しました。これはDOMStringMapという名前のついたオブジェクトの一種ですが、特に特別な何かがあるわけでもありません。

このdatasetが持つプロパティが独自データ属性に対応していて、descriptionプロパティがdata-description属性に対応していて(要するにdata-を取った部分がプロパティ名になっています)、参照することができたのです。ちなみに、これには代入して属性を書き換えることもできます。

このdatasetを用いることで、HTML側からJavaScript側へ情報を楽に渡すことができるのです。