JavaScript　カスタムデータ属性をイベントリスナーに渡す方法

JavaScriptでカスタムデータ属性を使ってイベントリスナーに値を渡す方法を紹介します。

カスタムデータ属性をイベントリスナーに渡す方法について知りたいです。どのようにすればよいですか？

カスタムデータ属性を使って、HTML要素にデータを設定し、イベントリスナーからその値を取得することができます

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

カスタムデータ属性とは？

カスタムデータ属性とは、HTMLの要素に任意の情報を追加できる機能です。

例えば、以下のようにHTMLの要素に”data-*”という形式で属性を追加することで、カスタムデータ属性を作成できます。

<button data-info="hello world">Click me</button>

上記の例では、button要素に”data-info”というカスタムデータ属性を追加して、その値に”hello world”を設定しています。

JavaScriptでカスタムデータ属性を取得するには、要素の”dataset”プロパティを使用します。”dataset”プロパティは、要素に設定された”data-*”属性をJavaScriptのオブジェクトとして取得することができます。

elem.dataset.name

name data-* 属性の名前

例えば、上記の要素から”data-info”属性の値を取得するには、以下のようにします。

const button = document.querySelector('button');
const info = button.dataset.info;
console.log(info); // 出力: "hello world"

カスタムデータ属性は、HTML要素に任意の情報を追加することができるため、便利な手段の1つです。

カスタムデータ属性を使う場合は、属性名を”dataset”プロパティで取得する際に、ハイフン区切りの名前をキャメルケースに変換する必要がある点にも注意が必要です。

サンプルプログラムを使った解説

以下のサンプルプログラムを使って、カスタムデータ属性をイベントリスナーに渡す方法を解説します。

<button id="my-button" data-info="hello world">Click me</button>
<script>
  const button = document.getElementById('my-button');
  button.addEventListener('click', handleClick);

  function handleClick(event) {
    const info = event.target.dataset.info;
    console.log(info); // 出力: "hello world"
  }
</script>

上記の例では、”my-button”というIDを持つbutton要素に、”data-info”というカスタムデータ属性を追加しています。次に、”addEventListener”メソッドを使って、”click”イベントに対して”handleClick”関数を登録します。

“handleClick”関数では、イベントオブジェクトからクリックされた要素を取得し、その要素から”data-info”属性の値を取得しています。最後に、取得した値をコンソールに出力しています。

このように、イベントリスナーにカスタムデータ属性を渡すには、イベントオブジェクトの”target”プロパティから対象要素を取得し、その要素の”dataset”プロパティからカスタムデータ属性の値を取得すれば良いです。

ただし、イベントリスナーに渡す値が複数ある場合や、複雑な値を渡す必要がある場合は、より高度な方法を使う必要があります。例えば、カスタムデータ属性ではなく、JavaScriptオブジェクトを使って値を渡す方法があります。しかし、基本的な値を渡す場合には、カスタムデータ属性を使うことができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。