data-*の構文と命名規則
有効なdata-*属性名とその目的を理解します
「data-*の構文と命名規則」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
復習：data-*属性
データ属性（data-*）は、HTML要素にカスタム情報を保存します：
<div data-user-id="42" data-role="admin" data-active="true">
User Card
</div>有効な命名規則
data-*属性の命名要件：
data-で始める必要があります- その後に1文字以上を続けます
- 使用できるのは小文字、数字、ハイフン、アンダースコア、ピリオド、コロンだけです
- 大文字は使用できません（HTMLパーサーによって属性が小文字に変換されます）
- スペースは使用できません
命名規則
コミュニティの命名規則:
<!-- BEM-style: module__element--modifier -->
data-card="profile"
data-card-id="42"
data-card-state="expanded"
<!-- Descriptive: domain-concept -->
data-product-id="SKU-123"
data-analytics-event="click-cta"
data-feature-flag="dark-mode"複数のデータ属性
要素には任意の数のデータ属性を設定できます:
<button
type="button"
data-action="delete"
data-target-id="user-42"
data-confirm="true"
data-confirm-message="Delete this user permanently?"
>Delete</button>値は常に文字列
データ属性の値は常に文字列です — JavaScriptで解析します:
const el = document.querySelector('[data-user-id]');
console.log(el.dataset.userId); // '42' (string)
console.log(typeof el.dataset.userId); // 'string'
// Parse to number:
const id = parseInt(el.dataset.userId, 10); // 42 (number)
// Parse to boolean:
const active = el.dataset.active === 'true'; // true (boolean)
// Parse to JSON:
const config = JSON.parse(el.dataset.config); // objectdata-*へのJSONの保存
複雑なデータはJSON文字列として保存します:
<div
data-config='{"theme":"dark","locale":"en-US","pageSize":20}'
id="app"
></div>
<script>
const el = document.getElementById('app');
const config = JSON.parse(el.dataset.config);
console.log(config.theme); // 'dark'
console.log(config.pageSize); // 20
</script>data-*とカスタム要素の比較
data-*、カスタム要素、JavaScriptオブジェクトの使い分け:
- data-* — 要素固有のメタデータ。HTMLに表示され、CSSからアクセスできます
- カスタム要素 — 挙動をカプセル化した、複雑で再利用可能なコンポーネント
- JavaScript Map/WeakMap — HTMLで不要なデータ、大規模または複雑なデータ
フレームワークでのdata-*の利用
フレームワークでよく使われるデータ属性の用途:
<!-- Bootstrap: target collapsible elements -->
<button data-bs-toggle="collapse" data-bs-target="#menu">
Toggle
</button>
<!-- Alpine.js: component data -->
<div x-data="{ open: false }">
<!-- Stimulus: controller identification -->
<div data-controller="menu" data-menu-open-value="false">
<!-- Testing libraries: stable selectors -->
<button data-testid="submit-btn">Submit</button>data-*とアクセシビリティ
データ属性はスクリーンリーダーで読み上げられません — アクセシビリティ情報には使用しないでください:
<!-- BAD: accessibility info in data-* -->
<button data-label="Close dialog">×</button>
<!-- Screen reader does NOT read data-label -->
<!-- GOOD: use aria-label for accessibility -->
<button aria-label="Close dialog">×</button>パフォーマンスに関する考慮事項
data-*属性がパフォーマンスに与える影響はほとんどありません:
- datasetの読み取りは高速です (O(1))
- 数千個の要素でdata-*を多用しても問題ありません
- 大きなデータの塊（画像や大きなJSON）をdata-*に保存するのは非効率的です
- DOM要素に関連付ける大きなJavaScriptオブジェクトの保存にはWeakMapを使用します
まとめ: data-*のベストプラクティス
data-*のベストプラクティス:
- 小文字とハイフンで名前を付ける
- 値は常に文字列です — 必要に応じて解析する
- JSONにはJSON.stringify / JSON.parseを使用する
- CSSまたはJavaScriptで必要なメタデータに使用する
- ARIA属性の代わりにはならない
- 秘密情報を保存しない（DevToolsで表示されます）
確認問題
datasetは属性値を常にどの型として返しますか?
復習: data-*の構文
data-*の命名に関する要点:
- 形式:
data-[lowercase-name]="value" - アクセス方法:
element.dataset.camelCaseName - すべての値は文字列です — 明示的に解析する
- 複雑なデータにはJSONを保存する
- 属性名は小文字にし、大文字やスペースを使用しない
よくある質問
「data-*の構文と命名規則」レッスンは無料ですか？
はい。「data-*の構文と命名規則」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「data-*の構文と命名規則」で何を学びますか？
有効なdata-*属性名とその目的を理解します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「data-*の構文と命名規則」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。