💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
HTMLのdata属性の使い方｜data-id data-name
📌
結論
data-* 属性でHTMLにカスタムデータを埋め込める
📝 実際のコードはこちら
<div data-id="123" data-name="test">要素</div>JavaScriptからの取得
📝 実際のコードはこちら
const el = document.querySelector('[data-id]');
console.log(el.dataset.id); // "123"
console.log(el.dataset.name); // "test"data- の後の名前が dataset のプロパティ名になります。data-user-id なら dataset.userId とキャメルケースになります。
使いどころ
| 場面 | 例 |
|---|---|
| リストの各項目にID | クリック時にどの項目か識別 |
| モーダルに表示するデータ | data-titleでタイトルを保持 |
| JavaScriptに設定を渡す | data-themeでテーマ名を指定 |
まとめ
・data-* 属性でカスタムデータを埋め込める
・JSからは element.dataset でアクセス
・ハイフン付きはキャメルケースに変換
演習で試してみよう
data-idとdata-nameを付けたdivを作ってみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
divにdata-id="123"とdata-name="test"を付けてください。
詰まったらヒント
data-で始まる属性はカスタムデータ用