データ属性を使いこなして、Webページをもっと便利に！

2024-04-02

HTML要素のデータ

データ属性

HTML5では、要素にdata属性を追加して、機械可読データを関連付けることができます。これは、JavaScriptやCSSなどのスクリプトからデータを取得したり、検索エンジンなどのツールに情報を提供するために使用されます。

データ属性は、data- という接頭辞と、属性名で構成されます。属性名は、自由に設定できますが、一般的にはダッシュ記号 (-) を使って単語を区切ります。

例:

<p data-product-id="12345">商品名</p>

この例では、<p>要素にdata-product-idというデータ属性を追加し、商品ID 12345 を関連付けています。

データ属性の使い道

JavaScriptでは、datasetプロパティを使って、要素のデータ属性にアクセスできます。

例:

const element = document.querySelector('p');
const productId = element.dataset.productId;

console.log(productId); // 12345

この例では、querySelector()を使ってp要素を取得し、dataset.productIdプロパティを使って商品IDを取得しています。

CSSでは、::attr()セレクタを使って、データ属性の値に基づいてスタイルを指定できます。

例:

[data-product-id="12345"] {
  color: red;
}

この例では、data-product-id属性の値が "12345" である要素を赤色で表示しています。

メリット

データ属性は、要素に意味的な情報を追加することができます。
JavaScriptやCSSからデータに簡単にアクセスできます。
検索エンジンなどのツールに情報を提供することができます。

デメリット

データ属性は、視覚的に表示されないため、ユーザーには分かりにくいかもしれません。
データ属性の名前や値は、事前に決めておく必要があります。

HTML要素のデータは、JavaScriptやCSSなどのスクリプトからデータを取得したり、検索エンジンなどのツールに情報を提供するために使用されます。データ属性を使うことで、要素に意味的な情報

HTML要素のデータ属性のサンプルコード

データ属性の取得

// 要素を取得
const element = document.querySelector('p');

// data属性の値を取得
const productId = element.dataset.productId;

// 値を出力
console.log(productId); // 12345

jQuery

// 要素を取得
const $element = $('p');

// data属性の値を取得
const productId = $element.data('productId');

// 値を出力
console.log(productId); // 12345

データ属性の設定

JavaScript

// 要素を取得
const element = document.querySelector('p');

// data属性を設定
element.dataset.productId = 12345;

// 値を出力
console.log(element.dataset.productId); // 12345

jQuery

// 要素を取得
const $element = $('p');

// data属性を設定
$element.data('productId', 12345);

// 値を出力
console.log($element.data('productId')); // 12345

データ属性の削除

JavaScript

// 要素を取得
const element = document.querySelector('p');

// data属性を削除
delete element.dataset.productId;

// 値を出力
console.log(element.dataset.productId); // undefined

jQuery

// 要素を取得
const $element = $('p');

// data属性を削除
$element.removeData('productId');

// 値を出力
console.log($element.data('productId')); // undefined

データ属性の活用例

画像に説明文を追加

<img src="image.jpg" alt="画像" data-description="これは風景写真です">

ボタンにアクションを追加

<button data-action="delete">削除</button>

要素にカスタム属性を追加

<div data-color="red" data-size="large">
  コンテンツ
</div>

データ属性は、カスタム属性として自由に使用できます。
データ属性は、マイクロデータやJSON-LDなどの構造化データフォーマットと組み合わせて使用することができます。

以下は、HTML要素のデータ属性を使ったサンプルコードです。

サンプル1：画像に説明文を追加

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
</head>
<body>
  <img src="image.jpg" alt="画像" data-description="これは風景写真です">

  <script>
    // 画像要素を取得
    const imageElement = document.querySelector('img');

    // data属性の値を取得
    const description = imageElement.dataset.description;

    // 値を出力
    console.log(description); // これは風景写真です
  </script>
</body>
</html>

サンプル2：ボタンにアクションを追加

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
</head>
<body>
  <button data-action="delete">削除</button>

  <script>
    // ボタン要素を取得
    const buttonElement = document.querySelector('button');

    // data属性の値を取得
    const action = buttonElement.dataset.action;

    // ボタンクリック時にアクションを実行
    buttonElement.addEventListener('click', () => {
      if (action === 'delete') {
        // 削除処理を実行
      }
    });
  </script>
</body>
</html>

サンプル3：要素にカスタム属性を追加

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
</head>
<body>
  <div data-color="red" data-size="large">
    コンテンツ
  </div>

  <script>
    // 要素を取得
    const element = document.querySelector('div');

    // data属性の値を取得
    const color = element.dataset.color;
    const size = element.dataset.size

HTML要素のデータ属性の他の方法

カスタム属性

HTML5では、data-接頭辞を付けずに、要素に任意の名前の属性を追加することができます。これらの属性はカスタム属性と呼ばれ、データ属性と同様に、JavaScriptやCSSからアクセスできます。

例:

<p color="red" size="large">コンテンツ</p>

この例では、<p>要素にcolorとsizeというカスタム属性を追加しています。

メリット:

データ属性よりも柔軟性が高い
意味的に分かりやすい名前を付けることができる

デメリット:

データ属性よりも知名度が低い
ブラウザのサポート状況がデータ属性よりも限定される場合がある

aria-属性

aria-属性は、ユーザー補助技術のために要素に情報を提供するために使用されます。これらの属性は、視覚障碍者などのユーザーが画面上の情報を理解できるようにします。

例:

<button aria-label="削除">削除</button>

この例では、<button>要素にaria-label属性を追加し、ボタンのラベルを "削除" と指定しています。

メリット:

ユーザー補助技術との互換性が高い
アクセシビリティを向上させることができる

デメリット:

データ属性よりも複雑な構文になる場合がある

JavaScriptを使用して、要素に直接データを保存することができます。

例:

const element = document.querySelector('p');

// 要素にデータを設定
element.data = {
  productId: 12345,
  color: 'red',
  size: 'large',
};

// 要素からデータを取得
const productId = element.data.productId;
const color = element.data.color;
const size = element.data.size;

メリット:

最も柔軟な方法
複雑なデータ構造を扱うことができる

デメリット:

データ属性やaria-属性よりもコード量が多くなる
コードの可読性が低下する場合がある

CSS変数を使用して、要素のスタイルにデータを関連付けることができます。

例:

:root {
  --product-id: 12345;
  --color: red;
  --size: large;
}

p {
  color: var(--color);
  font-size: var(--size);
}

この例では、--product-id、--color、--sizeというCSS変数を定義し、それぞれに値を設定しています。そして、p要素のスタイルにこれらの変数を使用しています。

メリット:

コードの可読性を向上させることができる
スタイルを動的に変更することができる

デメリット:

ブラウザのサポート状況が限定される場合がある

HTML要素のデータ属性には、いくつかの代替方法があります。それぞれの方法にはメリットとデメリットがあり、使用する方法は状況によって異なります。

データ属性を使いこなして、Webページをもっと便利に！

HTML要素のデータ