はじめに
現案件で初めてHTMLのカスタムデータ属性を使う機会があり、意外と便利でこれからも使っていけそうなものでしたので少し使い方についてまとめようと思います。
カスタムデータ属性とは
カスタムデータ属性はグローバル属性と呼ばれるどのHTMLタグにも使える属性で情報を付加するのに適切な属性がないときに利用することが出来ます。
カスタム属性の書き方のルール
属性名は「data-*」という形で書きます。*部分のルールには以下のようなものがあります。
- 大文字小文字にかかわらず、名前をxmlで始めてはならない。
- 名前にコロン (:) を含めてはならない。
- 名前に大文字を含めてはならない。
使い方
実際に使い方を見ていきましょう。
<p id="sample" data-sample="123">サンプル</p>
<script>
const sampleData = document.getElementById("sample");
console.log(sampleData.dataset.sample);
console.log(sampleData);
</script>
このコードでコンソールにカスタムデータ属性の値123とp#sampleというのが表示出来たと思います。p#sampleを押下すると様々なプロパティが表示されますがカスタムデータ属性はdatasetプロパティを通して読み出すことができます。datasetプロパティを確認すると今回のdata-sampleの値123が格納されていると思います。このとき属性名の”data-“の後に続く部分を使用して取得し、ダッシュはキャメルケースに変換されます。
まとめ
いかがでしたでしょうか？
今回はカスタムデータ属性についてまとめてみました。
私はVue.jsで使う機会があったのですが、昨今のフロントエンドのトレンドとしてまだまだReactやVue.jsといったフレームワークの勢いが強いのでHTMLのこんな便利な属性についても知っておいて損はないのではないでしょうか？