PricingLoginStart free
HTML Academy · レッスン

カスタムデータ属性data-*

data-*属性を使って、カスタムデータを要素に直接保存します。

レッスン 4/413 ステップ

「カスタムデータ属性data-*」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

data-*属性とは

カスタムデータ属性を使うと、HTML要素に追加情報を直接保存できます：

<button data-user-id="42" data-action="delete">Delete User</button>
<li data-category="frontend" data-level="beginner">HTML</li>

<!-- Format: data-[name]="value" -->
<!-- Any alphanumeric name after data- is valid -->
<!-- Values are always strings -->

data-*がある理由

data-*が登場する前は、開発者は追加データを次のような場所に保存していました：

  • 非表示の入力欄（扱いにくい）
  • CSSクラス名（壊れやすい）
  • relやtitleのような標準外の属性（無効なHTML）

HTML5では、意味や表示に影響を与えずにカスタムデータを埋め込む公式の方法としてdata-*が標準化されました。

命名規則

data-*属性の命名規則：

  • data-で始める必要があります
  • 名前には小文字、数字、ハイフン、アンダースコア、ピリオドを使用できます
  • 名前に大文字は使用できません（HTML仕様によって小文字に変換されます）
  • 名前をxmlで始めることはできません
<div data-user-id="1">OK</div>
<div data-product-category="tools">OK</div>
<!-- <div data-XML-thing="1">BAD: starts with xml -->
<!-- <div data-MyProp="1">BAD: uppercase in name -->

JavaScriptでdata-*を読み取る

datasetプロパティを使ってカスタムデータにアクセスします：

<button id="btn"
  data-user-id="42"
  data-action="delete"
  data-confirm-message="Are you sure?"
>
  Delete
</button>

<script>
const btn = document.getElementById('btn');
console.log(btn.dataset.userId);          // '42'
console.log(btn.dataset.action);          // 'delete'
console.log(btn.dataset.confirmMessage);  // 'Are you sure?'
// Note: data-user-id → dataset.userId (camelCase conversion)
</script>

datasetでdata-*を書き込む

datasetを使ってデータ属性を設定・削除します：

const card = document.querySelector('.card');

// Set:
card.dataset.status = 'active';
// Now: <div class="card" data-status="active">

// Delete:
delete card.dataset.status;
// Now: data-status is removed

// Alternatively with setAttribute:
card.setAttribute('data-status', 'inactive');
card.removeAttribute('data-status');

ハイフンからcamelCaseへの変換

dataset APIは、ハイフンで区切られた名前をcamelCaseに変換します：

<!-- HTML attribute         JavaScript dataset property -->
data-user-id           →   dataset.userId
data-product-category  →   dataset.productCategory
data-max-retries       →   dataset.maxRetries
data-is-active         →   dataset.isActive

CSS属性セレクター

CSSセレクターでデータ属性を使用します：

[data-status="active"] {
  color: green;
}

[data-status="inactive"] {
  color: gray;
  text-decoration: line-through;
}

/* Present but any value: */
[data-featured] {
  border: 2px solid gold;
}

ツールチップパターン

データ属性を使ってCSSだけでツールチップを作成します：

<span data-tooltip="This is a tooltip">Hover me</span>

/* CSS: */
/*
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);  /* attr() reads the attribute value */
  position: absolute;
  background: #333;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
[data-tooltip]:hover::after { opacity: 1; }
*/

状態追跡パターン

データ属性を使ってコンポーネントの状態を追跡します：

<button data-state="off" id="toggle">Toggle</button>

<script>
document.getElementById('toggle').addEventListener('click', function() {
  const state = this.dataset.state;
  this.dataset.state = state === 'off' ? 'on' : 'off';
  this.textContent = this.dataset.state === 'on' ? 'Active' : 'Toggle';
});
</script>

/* CSS: */
/* [data-state="on"] { background: green; color: white; } */

data-*とJavaScript変数の違い

data-*とJavaScriptへのデータ保存を使い分ける場面：

  • DOM要素に直接対応し、CSSから読み取る可能性がある値にはdata-*を使用します
  • 特定の要素に結び付かない複雑なデータ構造には、JavaScriptの変数やオブジェクトを使用します
  • 大きなデータや機密データをdata-*に保存しないでください。DevToolsから見えてしまいます

data-*は表示用ではない

避けるべきよくある間違い：

<!-- BAD: storing presentation data in data-* -->
<div data-color="red" data-font-size="18">Text</div>
<!-- Use CSS classes instead: -->
<div class="text-danger text-lg">Text</div>

<!-- BAD: storing sensitive data -->
<div data-api-key="sk-123...">Content</div>
<!-- NEVER store secrets in HTML attributes -->

確認問題

dataset APIでは、data-product-id属性にどのようにアクセスしますか？

対話的なレッスンで答える

まとめ：data-*属性

カスタムデータ属性の要点：

  • data-name="value" — 要素にカスタムメタデータを保存します
  • element.dataset.camelCaseを使ってアクセスします
  • dataset APIではハイフンがcamelCaseに変換されます
  • [data-name="value"]セレクターを使ってCSSで利用できます
  • 機密データ（キーやパスワード）をデータ属性に保存しないでください
無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
40
レッスン
159
無料で学習を始めるコース全体を表示

よくある質問

「カスタムデータ属性data-*」レッスンは無料ですか？

はい。「カスタムデータ属性data-*」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「カスタムデータ属性data-*」で何を学びますか？

data-*属性を使って、カスタムデータを要素に直接保存します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「カスタムデータ属性data-*」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. id、class、style、title
  2. hidden属性
  3. tabindexとaccesskey
  4. カスタムデータ属性data-*
← HTML Academyに戻る