data 属性とは？
data属性は、HTML要素にカスタムデータを追加するための属性であり、JavaScriptと連携して情報を動的に操作できる機能を提供します。data-で始まる任意の名前を付けてデータを埋め込むことで、要素ごとに独自のデータを保持し、クリックイベントや表示制御などのインタラクションや要素の管理が簡単にできます。
基本的な使い方
data属性は、data-の後に任意の名前を指定するだけで簡単に追加できます。複数のdata属性を一つの要素に設定して、さまざまなカスタムデータを一括で持たせることも可能です。これにより、JavaScriptで各データに直接アクセスでき、柔軟な情報管理や処理を実現します。
<!-- 例 -->
<div data-test="test">data属性の例</div>実装例
タブの実装
data属性を活用すると、UIでよく使われるタブ機能も簡単に実装できます。以下の例では、data-tab属性を持つ要素をクリックした際にshowTabContent関数が動き、クリックされた要素のdata-tabの値とdata-contentの値を照らし合わせて、値が同じ場合に該当するコンテンツを表示し、それ以外を非表示にしています。
※getAttributeメソッドを使用してdata属性を取得していますが、datasetプロパティを用いることも可能です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>data属性</title>
<style>
body {
display: grid;
place-content: center;
padding-top: 50px;
}
.tab-btn-wrap {
display: flex;
gap: 10px;
justify-content: center;
}
.tab-btn {
background-color: #e4e3e3;
border: 1px solid #ddd;
padding: 10px;
cursor: pointer;
border-radius: 5px;
}
.tab-content {
display: none;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="tab-btn-wrap">
<div data-tab="1" class="tab-btn">Tab 1</div>
<div data-tab="2" class="tab-btn">Tab 2</div>
<div data-tab="3" class="tab-btn">Tab 3</div>
</div>
<div data-content="1" class="tab-content">タブ1の内容</div>
<div data-content="2" class="tab-content">タブ2の内容</div>
<div data-content="3" class="tab-content">タブ3の内容</div>
<script>
document.querySelectorAll('[data-tab]').forEach(tab => {
tab.addEventListener('click', showTabContent);
});
function showTabContent(event) {
const tab = event.target.getAttribute('data-tab');
document.querySelectorAll('[data-content]').forEach(content => {
content.style.display = content.getAttribute('data-content') === tab ? 'block' : 'none';
});
}
</script>
</body>
</html>data属性をCSSで指定
data属性とその値を用いることで、特定の要素にだけスタイルを適用することが可能です。
/* 例 */
.selector[data-test="test"] {
font-size: 1rem;
}メリットと注意点
メリット
カスタムデータの埋め込み
data属性を使用することで、HTMLの要素に任意のデータを簡単に埋め込むことができます。これにより、JavaScriptやCSSからそのデータにアクセスしやすくなります。
クラス名との衝突を避けれるdata属性を使うことで、クラス名やID名との衝突を防ぎながらスタイルの適用やJavaScript操作を行うことができます。特に、既存のクラス名と重複せずに、HTML要素に独自のデータを持たせられる点が利点です。
CSSでのスタイリングdata属性に基づいてスタイルを適用することで、特定の条件に応じたスタイル変更が可能になります。
JavaScriptでの簡単なアクセスdata属性は、JavaScriptのdatasetプロパティやgetAttributeメソッドを使うことで簡単にアクセスでき、データの取得や変更が直感的に行えます。
注意点
属性名の制限data属性の名前は必ずdata-で始め、続く部分は小文字で記述する必要があります。また、アルファベット、数字、ハイフン、アンダースコアのみが使用可能です。
データ型に関して
data属性はすべて文字列として扱われるため、数値や真偽値をそのまま使用することができません。数値を比較する際は文字列として扱うか、必要に応じてJavaScriptで数値に変換するなどが必要です。
まとめ
data属性を使えば、HTMLに独自のデータを持たせて、UIの工夫やJavaScriptでのデータ操作が簡単になります。例えば、タブ切り替えやツールチップ表示など、インタラクティブなUIパーツと相性抜群です。また、CSSを使ってdata属性に基づいた条件付きのスタイリングができ、デザインを柔軟に変えられるのもポイントです。注意点として、data属性は基本的にすべて文字列として扱われるため、数値や真偽値を使う場合は変換の処理が必要です。また、属性名には小文字や特定の記号（-や_など）しか使えないので、その点も気も気を付けてください。どんな要素にも手軽に使えますのでぜひ活用してみてください。
参考文献
HTMLElement: dataset プロパティ – Web API | MDN
HTML5&CSS3デザイン 現場の新標準ガイド【第2版】
Element: getAttribute() メソッド – Web API | MDN
データ属性の使用 – ウェブ開発を学ぶ | MDN
