HTML Living Standard/data-*属性

data-*属性

data-*属性は、HTMLにおいてカスタムデータを要素に付与するために使用されるグローバル属性です。この属性を使用することで、追加情報を要素に埋め込むことができ、JavaScriptから簡単にアクセス・操作が可能です。datasetプロパティを通じて値を取得または設定します。

基本構文

<element data-name="value"></element>

• element: 属性を適用するHTML要素。
• data-name: ユーザー定義の属性名。「data-」で始める必要があります。
• value: 属性の値。

使用例

カスタムデータの付与

<div id="example" data-user-id="12345" data-role="admin">
  ユーザー情報
</div>

この例では、<div>要素にdata-user-idとdata-roleというカスタムデータが設定されています。

JavaScriptでのデータ操作

const element = document.getElementById('example');

// データの取得
console.log(element.dataset.userId); // "12345"
console.log(element.dataset.role);   // "admin"

// データの設定
element.dataset.status = 'active';
console.log(element.dataset.status); // "active"

このスクリプトでは、datasetプロパティを使用してカスタムデータにアクセスしています。

動作の概要

• カスタムデータの追加:
  • 開発者が定義したカスタムデータを、HTML要素に柔軟に追加できます。
• JavaScriptとの連携:
  • datasetプロパティを通じて、データを簡単に取得・設定できます。
• データのシリアル化:
  • JSON形式や文字列としてデータを埋め込み、必要に応じて解析することが可能です。

data-*属性の利用シーン

• フロントエンドデータの管理:
  • 要素に関連するメタデータや状態を埋め込み、フロントエンドで利用します。
• 動的コンテンツの管理:
  • カスタムデータを使用して、JavaScriptによる動的な要素操作を実現します。
• データのキャリーオーバー:
  • フォームやボタンに関連付けられたデータを保持し、サーバーとの通信に活用します。

注意点

• 名前の規則:
  • 属性名は必ず「data-」で始まり、その後に任意の名前を続けます（例: data-user-id）。
• パフォーマンスへの影響:
  • 過剰に多くのデータを埋め込むと、DOMが重くなりパフォーマンスに影響する場合があります。
• アクセシビリティ:
  • data-*属性はユーザーに直接見えませんが、適切に使用することでアクセシビリティに悪影響を与えることはありません。

互換性

互換性

ブラウザ	サポート状況
Chrome	対応
Edge	対応
Firefox	対応
Safari	対応
Opera	対応

参考文献

• HTML Living Standard - data-* attributes
• MDN Web Docs - data-* attributes

関連項目

• datasetプロパティ
• JavaScript