【保存版】JavaScriptでカスタムデータ属性を使いこなして、開発をもっとラクにしよう

2024-05-23

JavaScript でカスタムデータ属性の値を取得する方法

getAttribute() メソッドを使用する

従来的な方法として、getAttribute() メソッドを使用して、属性名と一致する属性値を取得できます。属性名は、data- プレフィックスを含めて指定する必要があります。

<div id="myElement" data-my-data="Hello world!"></div>

const element = document.getElementById('myElement');
const dataValue = element.getAttribute('data-my-data');
console.log(dataValue); // Output: Hello world!

dataset プロパティは、要素に関連付けられたすべてのカスタムデータ属性へのアクセスを提供するより新しい方法です。属性名は、data- プレフィックスを省略し、キャメルケースに変換する必要があります。

<div id="myElement" data-my-data="Hello world!"></div>

const element = document.getElementById('myElement');
const dataValue = element.dataset.myData;
console.log(dataValue); // Output: Hello world!

補足:

どちらの方法を使用する場合でも、要素が存在しない場合は null が返されます。
データ属性の値は、文字列として常に返されます。数値に変換するには、明示的に解析する必要があります。
カスタムデータ属性は、名前空間の衝突を避けるために、接頭辞を付けることをお勧めします。

応用例

要素に固有のデータを保存して、後でそれを処理するために使用します。
動的に生成された要素のデータにアクセスします。
視覚的にアクセスできないデータを格納します。

getAttribute() メソッドを使用する

<!DOCTYPE html>
<html>
<head>
  <title>Get Custom Data Attribute Values</title>
</head>
<body>
  <div id="myElement" data-message="Hello from JavaScript!"></div>
  <script>
    const element = document.getElementById('myElement');
    const message = element.getAttribute('data-message');
    console.log(message); // Output: Hello from JavaScript!
  </script>
</body>
</html>

dataset プロパティを使用する

<!DOCTYPE html>
<html>
<head>
  <title>Get Custom Data Attribute Values</title>
</head>
<body>
  <div id="myElement" data-message="Hello from JavaScript!"></div>
  <script>
    const element = document.getElementById('myElement');
    const message = element.dataset.message;
    console.log(message); // Output: Hello from JavaScript!
  </script>
</body>
</html>

説明:

上記の例では、myElement という ID を持つ HTML 要素が作成されます。
この要素には、data-message というカスタムデータ属性が設定されています。
JavaScript コードでは、要素を取得し、2 つの異なる方法で data-message の値を取得します。
- 最初は、getAttribute() メソッドを使用して属性名と一致する値を取得します。
- 次に、dataset プロパティを使用して、キャメルケースに変換された属性名で値を取得します。
どちらの方法でも、コンソールに "Hello from JavaScript!" というメッセージが出力されます。

このサンプルコードは、カスタムデータ属性の値を取得する 2 つの基本的な方法を示しています。具体的なニーズに合わせて、コードを調整することができます。

JavaScript でカスタムデータ属性の値を取得するその他の方法

CSS セレクタを使用して、カスタムデータ属性を持つ要素をターゲット設定し、その値を抽出することができます。ただし、この方法は、属性値を動的に取得するにはあまり適していません。

<div id="myElement" data-color="blue"></div>

<style>
  [data-color="blue"] {
    background-color: var(--my-color);
  }
</style>

<script>
  const colorValue = document.getElementById('myElement').dataset.color;
  console.log(colorValue); // Output: blue
</script>

上記の例では、data-color="blue" 属性を持つ HTML 要素が作成されます。
CSS ルールは、この要素をターゲット設定し、--my-color という CSS 変数に data-color 属性の値を設定します。
JavaScript コードでは、要素を取得し、dataset.color プロパティを使用して属性値を直接取得します。

jQuery ライブラリを使用すると、カスタムデータ属性の値を簡単に取得できます。ただし、jQuery をプロジェクトに追加する必要があるという点に注意してください。

<div id="myElement" data-message="Hello from jQuery!"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  const message = $('#myElement').data('message');
  console.log(message); // Output: Hello from jQuery!
</script>

jQuery ライブラリがロードされ、data() メソッドを使用して要素から data-message 属性の値が直接取得されます。

属性変更イベントを使用する

MutationObserver API を使用して、カスタムデータ属性が変更されたときにイベントをリッスンし、新しい値を取得することができます。この方法は、動的に更新されるデータ属性を追跡するのに役立ちます。

<div id="myElement" data-count="0"></div>

<script>
  const element = document.getElementById('myElement');
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type === 'attribute' && mutation.attributeName === 'data-count') {
        const newValue = element.dataset.count;
        console.log(`Count updated to: ${newValue}`);
      }
    }
  });
  observer.observe(element, { attributes: true });

  // Update the data-count attribute
  element.dataset.count = 10;
</script>