HTML5の独自データ属性を使ってみよう！

今回はHTML5で追加された「独自データ属性」をご紹介します。
最近ではjavascriptのプラグインなどで積極的に使われるようになっています。
マークアップに意味を持たせることができ、Webアプリケーション開発の際に大きく役立つと思います。

独自データ属性とは…
実際に使ってみよう！
1. javascriptを使用した場合
2. jQueryを使用した場合
まとめ

独自データ属性とは…

その名の通り、自分で任意に追加することができる属性のことです。
基本的にどのタグにも対応します。
その属性に対して値を入れておくことで、javascriptやjQueryからその属性値にアクセスすることが出来ます。

独自データ属性の名前の付け方についてですが、ある命名規則に沿った名前を付けなければなりません。
独自データ属性はdata-を頭に付けて、その後にアルファベットで任意の文字を記述します。
例：data-column,data-abc,data-method,data-hoge
これらの名前をもとに、javascriptやjQueryから値にアクセスします。

実際に使ってみよう！

HTMLを記述します。

<button onclick="getData();">ボタン</button>
<div id="hoge-box" data-type="20" data-m="hoge">
  <!-- something -->
</div>
<p data-column="userid">0123</p>

属性値は数字でも文字列でも問題ありません。
あとはこいつらにjavascriptやjQueryからアクセスします。

javascriptを使用した場合

function getData() {
    //divのエレメントを取得
    var test = document.getElementById('hoge-box');
    //取得したdivエレメントのdata-typeの属性値を取得する
    var val = test.dataset.type;
    alert(val);    //20を出力
    val = test.getAttribute('data-m');
    alert(val);    //hogeを出力
}

datasetを使用して独自データ属性を指定するか、
getAttributeで属性値を取得することで値を利用することが出来ます。

jQueryを使用した場合

function getData() {
    //divのエレメントを取得
    var test = $('#hoge-box');
    //取得したdivエレメントのdata-typeの属性値を取得する
    var val = test.data('type');
    alert(val);    //20を出力
    val = test.attr('data-m');
    alert(val);    //hogeを出力
}

javascriptと同じように属性を指定して取得することも可能ですが、
jQueryのdata関数を使用して引数に独自データ属性の名前を指定してやると取得することが出来ます。

まとめ

独自データ属性の命名規則はdata-○○
全てのタグに有効で、いくつでも追加できる
javascriptではdatasetで取得する
jQueryではdataメソッドで取得する

いかがでしたでしょうか。
この独自データ属性、非常に便利です。
jQueryやajaxで利用すると、頼もしい武器になると思います。
システム開発でも役に立つので使い方をマスターしておきましょう！