HTML data-*属性とJavaScript連携を完全解説！datasetでカスタムデータを取得する方法

1. HTML data属性とは何か

1. HTML data属性とは何か

HTMLのdata属性とは、HTMLの要素に自由なデータを追加できるHTMLグローバル属性の一つです。正式にはdataから始まる属性で、dataの後ろにハイフンと名前をつけて使用します。たとえばdata-idやdata-nameのような形になります。

通常のHTML属性には、hrefやsrcやaltなど役割が決まっているものがあります。しかしdata属性は、開発者が自由に意味を決めて使えるという特徴があります。そのためWebアプリケーションやJavaScript処理と連携するときに非常に便利です。

初心者の方は難しく感じるかもしれませんが、イメージとしてはHTMLタグにメモを書いておくようなものです。そのメモをJavaScriptが読み取って動作するという仕組みです。

例えば商品一覧ページで商品番号や価格などを保存しておくと、クリックしたときにその情報を取得して処理を行うことができます。HTML data属性はフロントエンド開発やJavaScript連携の基本技術として多くのWebサイトで使われています。

2. data属性の基本的な書き方

2. data属性の基本的な書き方

HTML data属性は、dataのあとにハイフンと名前を付けて記述します。名前の部分は自由に決めることができ、商品の番号ならdata-id、商品の名前ならdata-nameのように意味の分かる名前を付けるのが一般的です。

このようにHTMLタグの中に情報を保存しておくことで、後からJavaScriptでそのデータを取得できます。HTML data属性の基本構造はとてもシンプルなので、HTML初心者でもすぐに覚えることができます。

HTMLのカスタムデータ属性とも呼ばれ、HTML5から正式に利用できるようになりました。現在では多くのWebサイトやWebアプリケーションで利用されています。

<div data-id="1001" data-name="商品A">
    商品情報
</div>

この例ではdiv要素にdata-idとdata-nameという二つのdata属性が追加されています。このようにHTMLの中に自由な情報を追加できるのがdata属性の特徴です。

3. JavaScriptのdatasetとは何か

3. JavaScriptのdatasetとは何か

datasetとは、JavaScriptからHTMLのdata属性を簡単に取得するための仕組みです。HTMLのdata属性に保存されているデータを、JavaScriptで読み取ることができます。

例えばdata-idという属性は、JavaScriptではdataset.idという形で取得できます。つまりdataの部分は省略され、後ろの名前だけを使う仕組みになっています。

datasetはHTMLとJavaScriptをつなぐ橋のような役割を持っています。HTMLに保存した情報をJavaScriptで読み取り、クリックイベントや画面表示などに活用できます。

HTML data属性とJavaScript datasetを組み合わせることで、動きのあるWebページやインタラクティブなサイトを作ることができます。

4. datasetでデータを取得する基本例

4. datasetでデータを取得する基本例

それでは実際にHTML data属性のデータをJavaScriptのdatasetで取得してみましょう。まずHTMLにdata属性を設定し、その要素をJavaScriptで取得します。

<button id="btn" data-message="こんにちは">
    ボタンを押す
</button>

<script>
const button = document.getElementById("btn");

button.addEventListener("click", function(){
    alert(button.dataset.message);
});
</script>

この例ではボタンにdata-messageというHTML data属性を設定しています。JavaScriptではdataset.messageとして取得できます。ボタンをクリックすると保存されているメッセージが表示されます。

このようにHTML data属性を使うと、HTMLに書いた情報をJavaScriptで簡単に取得することができます。

5. 複数のdata属性を扱う方法

5. 複数のdata属性を扱う方法

HTML data属性は一つだけでなく、複数設定することもできます。例えば商品情報やユーザー情報などをまとめて保存することができます。

<div id="product" data-id="2001" data-name="ノートパソコン" data-price="98000">
    商品を見る
</div>

<script>
const item = document.getElementById("product");

console.log(item.dataset.id);
console.log(item.dataset.name);
console.log(item.dataset.price);
</script>

このようにHTML data属性を複数設定しておくと、JavaScriptのdatasetからそれぞれのデータを取得できます。ECサイトの商品情報や記事一覧などでよく使われるテクニックです。

6. data属性の値をJavaScriptで変更する方法

6. data属性の値をJavaScriptで変更する方法

datasetはデータを取得するだけではなく、値を変更することもできます。つまりJavaScriptからHTMLのdata属性を書き換えることも可能です。

これはボタンの状態管理や表示切り替えなどでよく利用されます。

<button id="statusBtn" data-status="off">
    状態変更
</button>

<script>
const btn = document.getElementById("statusBtn");

btn.addEventListener("click", function(){
    btn.dataset.status = "on";
    alert(btn.dataset.status);
});
</script>

この例ではdata-statusの値をJavaScriptで変更しています。ボタンをクリックするとstatusの値がonに変わり、その値が表示されます。

7. data属性がよく使われるWeb開発の場面

7. data属性がよく使われるWeb開発の場面

HTML data属性はさまざまなWeb開発の場面で利用されています。特にJavaScriptと連携する場合にはとても便利です。

例えば商品一覧ページでは、各商品にdata-idを付けておくことでクリックされた商品の番号を取得できます。またボタンの状態管理や表示切り替えなどでも利用されます。

さらにWebデザインの分野では、アニメーションの種類や表示設定などをdata属性で管理することもあります。HTML data属性を使うことでHTML構造とJavaScript処理を整理しやすくなります。

HTML data属性とJavaScript datasetは、現代のフロントエンド開発で非常に重要な基礎技術です。初心者の方も基本的な使い方を理解しておくと、動きのあるWebページを作るときに大きく役立ちます。

まとめ

まとめ

ここまでHTML data属性とJavaScriptのdatasetの仕組みについて詳しく解説してきました。HTML data属性はHTML5から利用できる便利なHTMLグローバル属性であり、HTMLタグの中に自由なデータを保存できる特徴があります。HTMLの通常の属性であるhrefやsrcのように用途が固定されているものとは違い、data属性は開発者が自由に名前を決めて使えるため、Web開発やフロントエンド開発で非常によく利用されています。

HTML data属性の基本構造はdataの後ろにハイフンと名前を付けて記述するシンプルな仕組みです。例えばdata idやdata nameやdata priceなどのように用途に合わせて名前を付けることができます。このようにHTMLタグに情報を保存しておくことで、JavaScriptからその情報を読み取り処理に利用できるようになります。

そしてJavaScriptからHTML data属性の値を取得するときに利用するのがdatasetです。datasetはHTML data属性専用のJavaScriptプロパティであり、HTMLに保存されているカスタムデータを簡単に取得できます。data idであればdataset id、data messageであればdataset messageという形でアクセスすることができます。

この仕組みを理解すると、HTMLとJavaScriptを連携したWebページの作り方がぐっと分かりやすくなります。例えばボタンをクリックしたときにメッセージを表示する処理や、商品一覧ページで商品番号を取得する処理、ユーザーインターフェースの状態管理など、さまざまな場面で活用できます。

またHTML data属性は一つだけでなく複数設定することも可能です。data idやdata nameやdata priceなど複数のカスタムデータをHTML要素に持たせることができるため、ECサイトの商品管理や記事一覧ページの情報管理などでも非常に便利です。JavaScriptではdatasetからそれぞれの値を取得できるため、シンプルなコードで効率的な処理を書くことができます。

さらにdatasetは値の取得だけでなく値の変更もできます。つまりJavaScriptからHTML data属性の値を書き換えることも可能です。ボタンの状態管理や表示状態の切り替えなど、ユーザー操作に応じて状態を変更するようなWebページを作る場合に役立ちます。

HTML data属性とJavaScript datasetを組み合わせて利用すると、HTMLの構造とJavaScriptの処理を整理しながら開発できるようになります。HTMLにはデータを保存し、JavaScriptではそのデータを取得して処理を行うという役割分担ができるため、コードの可読性やメンテナンス性も向上します。

現在のフロントエンド開発ではHTML data属性とJavaScript datasetは非常に重要な基礎知識となっています。特に動きのあるWebページやインタラクティブなユーザーインターフェースを作る場合には欠かせない技術です。HTML初心者の方でも基本的な書き方とdatasetの使い方を理解しておけば、より実践的なWeb開発へとステップアップできます。

最後に復習として、HTML data属性とJavaScript datasetを使ったシンプルなサンプルプログラムを確認しておきましょう。HTML要素にカスタムデータを保存し、JavaScriptでdatasetを使って取得する基本例です。

<button id="sampleBtn" data-message="データ属性のメッセージ">
ボタンをクリック
</button>

<script>
const btn = document.getElementById("sampleBtn");

btn.addEventListener("click", function(){
alert(btn.dataset.message);
});
</script>

このようにHTML data属性を使うことでHTMLの中にカスタムデータを保存し、そのデータをJavaScriptのdatasetで取得できます。HTML data属性はシンプルですが非常に強力な機能であり、Web開発のさまざまな場面で役立つ基本技術です。HTML学習の段階でしっかり理解しておくことで、JavaScriptとの連携や動きのあるWebサイト制作がスムーズになります。