Front End Programming

【JavaScript】カスタムデータ(data)属性使い方(コードサンプル有り)

JavaScriptCSS

HTMLから指定できるカスタムデータ(data)属性の使い方のご紹介です。

JavaScriptでも最近はquerySelectorなどを使って簡単に取得できるようになりましたが、jQuery(dataメソッドの罠的クセなど)を比較しつつ値の操作や注意点もご紹介いたします。

カスタムデータ(data)属性を使いこなせれば、コーディングの幅も広がりますのでぜひどんどん活用しましょう。

2022年5月記事の中身が古かったためリライトしました。

カスタムデータ(data)属性とは?

「カスタム属性」「データ属性」「data属性」と呼ばれている、HTMLタグの中に追加できる属性の一種です。

data-** といった形で**のところは自分で好きに名前がつけられるカスタムな属性です。

<button data-toggle="true"></button>

複数の単語をつなげたい場合はハイフンでつなげます。(例:data-gin-neko)

現在ではすべてのブラウザで使えます。

カスタムデータ(data)属性はどんなシーンで活用できる?

JSでの操作も昔は特定のclassを活用してDOM操作していました。

元々はスタイルを当てるために使うclassですが、JSでのDOM操作に利用するためclassが複雑になったりするのを避けるためにHTML5でカスタムデータ(data)属性が導入されました。

  1. カスタムデータ(data)属性からスタイルを指定
  2. CSSのみで疑似要素や擬似クラスを使って操作
  3. カスタムデータ(data)属性の名前や値を取得、操作する

HTML&CSSでカスタムデータ(data)属性を活用する方法

ではカスタムデータ(data)属性を早速HTMLとCSSで操作します。

スタイルを指定する

カスタムデータ(data)属性でスタイルを指定することができます。

HTML
<ul>
  <li data-tab-menu="menu1">MENU1</li>
  <li data-tab-menu="menu2">MENU2</li>
  <li data-tab-menu="menu3">MENU3</li>
</ul>

カスタムデータ(data)属性も属性なので[](ブラケット)で囲みます。

CSS
[data-tab-menu] {
  font-size: 20px;
}

以下のようにするとあるカスタムデータ(data)属性の特定の値だけ指定できます。

CSS
[data-tab-menu=menu1] {
  color: #ff0033;
}

ツールチップを実装する

ツールチップとはマウスオーバーでヒントとか出てくるアレです。

ツールチップ

JSでゴニョゴニョして実装せずにカスタムデータ(data)属性とCSSの擬似クラス&疑似要素の設定のみで実装可能です。

HTML
<p data-hint="CSS関数のattr()と疑似要素を使います。">ツールチップをCSSだけで実装するには?</p>

疑似要素beforeattr()を使って文を出力し、afterで吹き出しを作ります。
要素phoverしたらTooltipが出現します。

CSS
[data-hint] {
  position: relative;
}
[data-hint]:hover {
  cursor: pointer;
}
[data-hint]:hover::before {
  font-size: 14px;
  padding: 5px 16px;
  border: 1px solid #aaa;
  box-shadow: 0 1px 2px #ddd;
  border-radius: 4px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(calc(100% + 5px));
  content: attr(data-hint);
}
[data-hint]:hover::after {
  position: absolute;
  content: "";
  display: block;
  bottom: -5px;
  left: 20px;
  border-bottom: 5px solid #aaa;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

Tooltip | Codepen

マウスオーバーアニメーション

前述の「カスタムデータ(data)属性でツールチップを実装する」の応用編です。

グロナビ アニメ文字の入れ替え

マウスオーバーで文字を入れ替えるなど、グロナビ アニメ・コードスニペット上級編で紹介しています。

以下記事より参考にしてみてください。

実務で使える!グローバルメニューホバーアニメーションスニペット集

Web制作をしていると、グロナビ(グローバルメニュー)のホバーアニメの持ちネタが尽きます。そこで、グロナビのためのCSS...

JavaScriptやjQueryでカスタムデータ(data)属性を操作する

まずはJavaScriptやjQueryからのカスタムデータ(data)属性の取得方法のご紹介です。

カスタムデータ(data)属性がなぜ導入されたかを踏まえて使っていきましょう。

JSでのDOM操作に利用するためclassが複雑になったりするのを避けるためにHTML5でカスタムデータ(data)属性が導入されました。

カスタムデータ(data)属性の操作方法

まずはカスタムデータ(data)属性の値の取得を含めた操作方法のご紹介です。

HTML
<p data-attr="hoge">カスタムデータ(data)属性</p>

値を取得

まずはJavaScriptでの値の取得方法です。datasetgetAttributeで取得できます。

JavaScript
const el = document.querySelector('[data-attr]');
console.log(el.dataset.attr)//hoge
console.log(el.dataset['attr'])//hoge
console.log(el.getAttribute('data-attr'))//hoge

datasetで取得するときはカスタムデータ(data)属性の接頭辞data-を省きます。

jQueryにもdataattrという似たようなメソッドがあります。
使い方も一緒です。

jQuery
console.log($('[data-attr]').data('attr'))
console.log($('[data-attr]').attr('data-attr'))

カスタムデータ(data)属性はケバブケースをJSではキャメルケースに変換して使う

カスタムデータ(data)属性は冒頭で述べたようにHTML側で接頭辞data-以降を以下のようにケバブケース(ハイフンでつなぐ)で指定することができます。

HTML
<p data-attr-huga="hoge">カスタムデータ(data)属性</p>

datasetdataの場合以下のように取得可能です。

JavaScript
const el = document.querySelector('[data-attr-huga]');
console.log(el.dataset.attrHuga)//hoge
jQuery
console.log($('[data-attr-huga]').data('attrHuga'))//hoge

値を変更する(サンプルコード:メニューのトグルボタン)

メニューのトグルボタンを例にとって値の変更方法をご紹介します。

トグルメニュー

HTML
<button data-toggle></button>
CSS
[data-toggle] {
  border: 1px solid #000;
  background: #000;
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}
[data-toggle]::before, [data-toggle]::after {
  content: "";
  width: 30px;
  height: 2px;
  display: block;
  background: #fff;
  transition: 0.3s;
}
[data-toggle]::before {
  box-shadow: 0 14px 0 #fff;
}

[data-toggle=open]::after {
  transform: translate(0, -13px) rotate(-45deg);
}
[data-toggle=open]::before {
  transform: translate(0, 13px) rotate(45deg);
  box-shadow: none;
}

JavaScriptではdatasetsetAttributeで値を変更します。

JavaScript/setAttribute
const toggleBtn = document.querySelector('[data-toggle]');
toggleBtn.addEventListener('click',()=>{
  const btnState = toggleBtn.getAttribute('data-toggle') === "" ? "open" : ""
  toggleBtn.setAttribute('data-toggle',btnState)
});
JavaScript/dataset
const toggleBtn = document.querySelector('[data-toggle]');
toggleBtn.addEventListener('click',()=>{
  toggleBtn.dataset.toggle = (toggleBtn.dataset.toggle === "" ? "open" : "")
});

jQueryでの実装方法のご紹介です。

jQuery
$('[data-toggle]').on('click',function(){
  $(this).attr('data-toggle',  $(this).attr('data-toggle') === "" ? "open" : "")
})

Toggle menu / customdata-attribute | Codepen

jQueryのdata()メソッドのイケてないところ

data()はjQuery上のキャッシュを書き換えるのみで、DOM上のdata属性は変更されません。つまり、DOM操作をしたい場合はattr()しか使えません。



ハンバーガーメニューのサンプルコードはこちらを参考にしてください。
コピペで使える!ハンバーガーメニューアニメサンプル集

いつも同じハンバーガーメニューばかりじゃ飽きちゃう!そこで、普段遣いができるハンバーガーメニューのコードスニペット集を作...

値を変更する(サンプルコード:タブメニュー)

カスタムデータ(data)属性を使ったタブメニューの実装方法のご紹介です。

メニューとコンテンツで同じ値を持ったタブを表示させます。

タブメニュー

HTML
<ul class="tab-menu">
  <li data-tab="1" data-active="true">メニュー01</li>
  <li data-tab="2" data-active>メニュー02</li>
  <li data-tab="3" data-active>メニュー03</li>
</ul>
<div class="tab-contents">
  <section data-tab-content="1" data-active="true">
    content1content1content1content1content1content1content1
  </section>
  <section data-tab-content="2" data-active>
    content2content2content2 content2 content2content2content2content2content2content2
  </section>
  <section data-tab-content="3" data-active>
 content3content3content3content3content3content3content3 content3content3content3
  </section>
</div>
CSS
.tab-menu {
  display: flex;
  justify-content: center;
  gap: 4px;
  max-width: 600px;
}
[data-tab] {
  padding: 10px 20px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  background: #fff;
  border: 2px solid #ddd;
  background: #ddd;
}
[data-active="true"] {
  background: #fff;
  z-index: 2;
  position: relative;
  border-bottom: #fff;
}
.tab-contents {
  margin-top: -2px;
  position: relative;
  border: 2px solid #ddd;
  background: #fff;
  padding: 20px;
  max-width: 600px;
}
[data-tab-content]:not([data-active="true"]) {
  display: none;
}
JavaScript
const tabItems = document.querySelectorAll('[data-tab]');
const tabContents = document.querySelectorAll('[data-tab-content]');

tabItems.forEach((item)=>{
  item.addEventListener('click', ()=>{
    const num = item.dataset.tab;
    tabItems.forEach((item,index)=>{
      const tabContent = tabContents[index];
      item.dataset.active = item.dataset.tab === num ? true : "" ;
      tabContent.dataset.active = tabContent.dataset.tabContent === num ? true : "" ;
    })
  })
})
jQuery
$('[data-tab]').each(function(index){
  $(this).on('click',function(){
    const num = $(this).attr('data-tab')
    $('[data-tab]').each(function(index){
      const tabContent = $('[data-tab-content]').eq(index);
      $(this).attr("data-active", $(this).attr('data-tab') === num ? true : "")
      tabContent.attr("data-active", tabContent.attr('data-tab-content') === num ? true : "")
    })
  })
})

Tab menu | Codepen

カスタムデータの削除

カスタムデータそのものを削除する方法です。

JavaScript
removeAttribute('data-id')
jQuery
removeAttr('data-id')

その他の活用法

その他カスタムデータ(data)属性を活用する方法です。

  • AJAXである特定のIDのデータを削除、登録
  • タグマネージャーのクリック要素の登録として活用

タグマネージャーのクリック要素の登録に関しては今度記事としてまとめようと思います。

まとめ。クラスとカスタムデータ(data)属性をうまく使い分けて保守性の高いコードを書こう

カスタムデータ(data)属性を使うとJSのDOM操作以外でもかなり便利なことはおわかりいただけたと思います。

現場側としてはカスタムデータをフルに活かせば、クラスのバッティングも起こらないしかなり整理されたコードになり保守性が高まることが一番嬉しいです。

この記事は2年以上前に書きましたが、改めて復習も兼ねて利用方法をまとめてみました。

当時はIEのせいで使い勝手が悪かったですが、今は気にせず思う存分使えるのでいい時代になりました。

この記事が皆さんのコーディングライフの一助となれば幸いです。

最後までお読みいただいきありがとうございました。

おまけ。属性取得方法

DOM操作で便利な値取得方法をまとめます。

JavaScript
elm.src //ソース
elm.height //高さ
elm.width //幅
elm.alt //代替テキスト
elm.value //フォームなどの値
jQuery
elm.attr('src') //ソース
elm.attr('height') //高さ
elm.attr('width') //幅
elm.attr('alt') //代替テキスト
elm.value()//フォームなどの値

お読みいただきありがとうございます。
「銀ねこアトリエ」をより良いブログにするために是非応援してください!

銀ねこアトリエを応援する