十二章第四回 dataset
このページの最終更新日：
今回はちょっと息抜きで、簡単ですが便利なdatasetを紹介します。
HTML5には独自データ属性というものがあり、簡単にいうと、要素に好きな属性をつけられるというものです。
ただ、完全に自由に属性に名前をつけていては大変なので、data-という接頭辞をつけた属性を勝手に自分で作っていいことになっています。つまり、具体的には例えばこうです。
<div data-foo="hi">
この例ではdiv要素にdata-fooという独自データ属性がつけられています。
もちろん自分で勝手に作ったので、HTML的にはこの属性には何の意味もありません。じゃあ何に使うのかというと、そう、JavaScript側から利用できるのです。JavaScriptから読む用にHTML要素に付加的な情報をつけるのが独自データ属性の主な役割となります。
それではこれを読み込むほうはこんな感じでしょうか。ひとつの方法はgetAttributeを使うことです。
//elementを上のdiv要素とすると
element.getAttribute('data-foo');
これでも読めることは読めるのですが、わざわざ独自データ属性として用意されているからには、実はもっと便利な方法があるのです。それがこれです。
element.dataset.foo;
HTML要素が持つdatasetというプロパティが出現しました。これはDOMStringMapのインスタンスですが、このオブジェクトは特にメソッド等を持ちません。
このdatasetが持つプロパティが独自データ属性に対応しています。つまり、dataset.fooというプロパティがdata-foo属性に対応していて（要するにdata-を取った部分がプロパティ名になっています）、参照して属性の値を取得したり、代入して属性を書き換えたりできます。
なお、属性名にハイフンが含まれていた場合キャメルケースに変換されます。つまり、例えばdata-foo-barという属性はdataset.fooBarというプロパティに対応します。
このdatasetを用いることで、HTML側からJavaScript側へ情報を楽に渡すことができるのです。