HTML data-*属性をJavaScriptで読む方法を完全解説！datasetの使い方を初心者向けにやさしく理解

HTML data-*属性をJavaScriptで読む方法｜datasetの使い方

先生と生徒の会話形式で理解しよう

生徒

「HTMLのdata-*属性って、JavaScriptでどうやって読み取るんですか？」

先生

「HTMLのdata属性は、JavaScriptのdatasetという仕組みを使って簡単に取得できますよ。」

生徒

「datasetって何ですか？難しそうです…」

先生

「datasetは、HTMLに書いたカスタムデータを取り出すための箱のようなものです。順番に見ていきましょう。」

1. HTML data-*属性をJavaScriptで読むとは

HTML data属性とは、HTML要素に自由なカスタムデータを持たせるための属性です。data-user-idやdata-priceのように書くことで、画面には表示しない情報を裏側に保存できます。この情報をJavaScriptで取得する方法が、datasetの使い方です。

JavaScriptとは、Webページに動きをつけるプログラミング言語です。ボタンを押したときに処理をするなどの動作は、JavaScriptで書かれています。HTML data-*属性とJavaScriptを組み合わせることで、Webアプリ開発の基本が理解できるようになります。

2. datasetとは何かをやさしく解説

datasetとは、HTMLのdata-*属性をまとめて管理する仕組みです。たとえば、引き出し付きの机を想像してください。data属性が引き出しで、datasetがその引き出し全体を管理する箱のようなものです。

data-user-nameという属性があれば、JavaScriptではdataset.userNameという形で取得できます。ここで大切なのは、ハイフンの後ろの単語が大文字に変わるという点です。これをキャメルケースといいます。キャメルケースとは、単語の区切りを大文字でつなぐ書き方のことです。

3. 基本的なHTMLとdatasetの読み取り例

まずは一番基本となるHTML data-*属性の書き方と、JavaScriptでの読み取り方法を見てみましょう。


<button id="btn" data-message="こんにちは">クリック</button>

<script>
const button = document.getElementById("btn");
console.log(button.dataset.message);
</script>

ブラウザ表示

この例では、data-messageというHTML data属性を設定しています。JavaScriptではbutton.dataset.messageと書くだけで値を取得できます。とてもシンプルで分かりやすい方法です。

4. ハイフン付きdata属性の読み方

次に、ハイフンを含むdata属性の読み方を確認します。初心者が間違えやすいポイントです。


<div id="item" data-user-id="1001"></div>

<script>
const item = document.getElementById("item");
console.log(item.dataset.userId);
</script>

ブラウザ表示

data-user-idは、JavaScriptではdataset.userIdになります。user-idではなくuserIdになる点が重要です。ハイフンの次の文字が大文字になるルールを覚えておきましょう。

5. data属性の値を書き換える方法

datasetは、読み取るだけでなく値を変更することもできます。HTML data属性をJavaScriptで更新することで、Webページの状態を管理できます。


<p id="text" data-count="1">回数表示</p>

<script>
const text = document.getElementById("text");
text.dataset.count = "2";
console.log(text.dataset.count);
</script>

ブラウザ表示

このようにdataset.countへ新しい値を代入するだけで、HTML data属性の値が更新されます。数値に見えても文字列として扱われる点も覚えておきましょう。

6. 条件分岐と組み合わせた実用例

HTML data-*属性は、条件分岐と組み合わせることでさらに便利になります。条件分岐とは、もしこうならこうするという判断処理のことです。


<button id="statusBtn" data-status="active">状態確認</button>

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

if (statusBtn.dataset.status === "active") {
    console.log("現在は有効です");
} else {
    console.log("現在は無効です");
}
</script>

ブラウザ表示

このように、data-statusの値を使って処理を分けることができます。HTMLとJavaScriptを連携させる基本的な書き方です。