JavaScriptのdatasetでdata-*にアクセスする
dataset APIでカスタムdata属性を読み書きします
「JavaScriptのdatasetでdata-*にアクセスする」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
dataset APIとは何ですか
すべてのHTML要素は、datasetプロパティを介して自身のdata-*属性を公開します。これは、getAttribute()を呼び出さなくても属性名と値を対応付けられるDOMStringMapです。
属性からプロパティへのマッピング
data-user-idはel.dataset.userIdになります。属性名のハイフンは、datasetプロパティではcamelCaseに変換されます。data-item-countにはel.dataset.itemCountでアクセスします。
値の読み取り
データ属性を読み取ります: const id = el.dataset.userId。datasetの値はすべて文字列です — 必要に応じてNumber()またはparseInt()で数値に変換します。存在しない属性はnullではなくundefinedを返します。
const card = document.querySelector(".card");
const userId = card.dataset.userId;
const count = Number(card.dataset.itemCount);値の書き込み
datasetを介してデータ属性を設定します: el.dataset.state = "active"。これにより、data-state HTML属性が作成または更新されます。属性の変更はすぐにDOMへ反映され、MutationObserverで監視できます。
値の削除
データ属性を削除します: delete el.dataset.userId。対応するdata-user-id属性が要素から削除されます。明示的に削除する場合は、el.removeAttribute("data-user-id")も使用できます。
datasetの反復処理
datasetはDOMStringMapです。for...inループで反復するか、Object.entriesにスプレッドして使用します: Object.entries(el.dataset).forEach(([key, value]) => { ... })。これは、要素のすべてのデータ属性をまとめて読み取る場合に便利です。
コンポーネントの状態にdatasetを使用する
非表示のinput要素やJavaScript変数の代わりに、軽量なコンポーネントの状態をデータ属性に保存します。タブコンポーネントでは、コンテナのdata-active-tabにアクティブなタブのインデックスを保存できます。共有変数がなくても、どのスクリプトからでも読み取れます。
datasetを使ったイベント委譲
項目のリストでは、コンテナに1つだけクリックリスナーを設定します。クリック時に、クリックされた対象のdatasetを読み取ります: e.target.closest("[data-id]").dataset.id。項目ごとのバインドによるオーバーヘッドなしで、1つのリスナーですべての項目を処理できます。
datasetとカスタムプロパティの比較
HTMLから読み取る必要があるデータ（サーバーでレンダリングされたメタデータや、CSSセレクターからアクセスするデータ）にはdatasetを使用します。HTMLから見える必要がない一時的な実行時の状態には、JavaScript変数を使用します。両方を混在させると、不要な複雑さが加わります。
型の強制変換に関する注意
datasetは常に文字列を返します。el.dataset.active === trueは常にfalseになります。el.dataset.active === "true"と比較するか、変換してください: el.dataset.active === "true"。datasetに保存したブール値の状態は、文字列として比較する必要があります。
datasetとgetAttributeの比較
どちらもデータ属性を読み取ります。datasetはcamelCaseでアクセスできるため便利です。一方、getAttributeでは「data-」プレフィックスを含む完全な属性名が必要です。現代的なコードではdatasetを優先し、データ属性と一緒にデータ属性以外の属性を反復処理する場合はgetAttributeを使用します。
確認問題
data-user-id HTML属性は、JavaScriptのdatasetオブジェクトではどのように表されますか?
まとめ
dataset APIは、data-*属性をcamelCaseのJavaScriptプロパティに対応付け、簡単な読み取り、書き込み、削除を可能にします。これにより、非表示のinput要素やグローバル変数を使わずに、コンポーネントの状態の保存、イベント委譲のパターン、サーバーからクライアントへのデータ受け渡しを実現できます。
よくある質問
「JavaScriptのdatasetでdata-*にアクセスする」レッスンは無料ですか？
はい。「JavaScriptのdatasetでdata-*にアクセスする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「JavaScriptのdatasetでdata-*にアクセスする」で何を学びますか？
dataset APIでカスタムdata属性を読み書きします ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「JavaScriptのdatasetでdata-*にアクセスする」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- data-*の構文と命名規則
- JavaScriptのdatasetでdata-*にアクセスする
- CSS属性セレクターでdata-*を使う
- 実践パターン：ツールチップと状態管理