実践パターン：ツールチップと状態管理
data-*をツールチップ、アクティブ状態、コンポーネント設定に活用します
「実践パターン：ツールチップと状態管理」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
data-tooltipを使ったツールチップ
トリガー要素のdata-tooltipにツールチップのテキストを保存します。CSSの[data-tooltip]:hover::after { content: attr(data-tooltip) }を使うと、JavaScriptなしで表示できます。アクセシブルなツールチップには、role="tooltip"を追加し、aria-describedbyで実際の要素を参照してください。
CSSツールチップの配置
トリガーにはposition: relativeが必要です。::after疑似要素では、position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%)を使って、トリガーの上方中央にツールチップを配置します。折り返しを防ぐにはwhite-space: nowrapを追加します。
data-stateによる状態の追跡
複数のブール値クラス（is-open、is-loading、is-error）を、1つのdata-state属性に置き換えます: el.dataset.state = "loading"。CSSでは[data-state="loading"]を選択します。1つの属性、状態ごとに1つのCSSルールで済み、クラス管理は不要です。
data-expandedを使ったアコーディオン
各アコーディオン項目にdata-expanded="false"を設定します。JavaScriptで切り替えます: item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true"。CSSでパネルを表示または非表示にします: [data-expanded="false"] .panel { display: none; }。
タブのアクティブ状態
タブコンテナにアクティブなタブを保存します: data-active-tab="0"。JavaScriptでクリック時に更新します。CSSでは[data-active-tab="0"] #panel-0を使ってアクティブなパネルを選択できます。タブ全体の状態が、コンテナ要素の1つの属性に収まります。
フォームのステップ追跡
複数ステップのフォームでは、フォーム要素のdata-stepに現在のステップを保存します。CSSでは一致するステップだけを表示します: form[data-step="2"] .step-2 { display: block; }。ステップごとにクラスを切り替えなくても、他のステップは非表示のままになります。
読み込み状態のパターン
非同期処理中のボタンでは、btn.dataset.state = "loading"によって操作を無効にし、CSSでスピナーを表示します。完了したらbtn.dataset.state = "idle"に設定します。1つの属性で、3つの個別のクラス切り替えとdisabled属性の確認を置き換えられます。
ドラッグハンドルのパターン
ドラッグ可能な項目にはdata-draggable="true"を設定し、ドロップ先にはdata-droptarget="true"を設定します。イベントリスナーでは属性セレクターを使って、すべてのドラッグ可能な項目を検索します: document.querySelectorAll("[data-draggable]")。属性の有無は、挙動の意図を示すうえでクラス名より意味が明確です。
進捗インジケーター
ステッパーコンポーネントでは、各ステップにdata-step-statusを設定し、"completed"、"current"、"upcoming"のいずれかを指定します。CSSで各状態を個別にスタイル設定します。JavaScriptは現在位置に基づいて各ステップの状態を設定するため、JavaScriptの状態オブジェクトを別途用意しなくても状態を読み取れます。
テーマの永続化
ユーザーのテーマ設定をlocalStorageに保存し、読み込み時に適用します: document.documentElement.dataset.theme = localStorage.getItem("theme") || "light"。CSSでは[data-theme="dark"]を選択してダークモードにします。スクリプトを<head>内で実行すれば、永続的でFOUCのない表示を実現できます。
動的コンテンツのメタデータ
サーバーでレンダリングされたリストには、データ属性にメタデータを含めます: data-product-id、data-price、data-category。JavaScriptは追加のAPI呼び出しを行わず、すでにレンダリングされたデータを使ってクライアント側のフィルタリング、並べ替え、カート機能を実装できます。
知識チェック
CSSクラスを追加・削除する代わりに、data-state="loading"を使用する利点は何ですか？
まとめ
data-*属性を使うと、content:attr()によるCSSツールチップ、複数のクラス切り替えをdata-stateで置き換えるステートマシン、複数ステップフォームの追跡、documentElement.datasetによるテーマの永続化、クライアント側の機能に利用するサーバーでレンダリングされたメタデータなど、実際の開発で役立つ強力なパターンを実現できます。しかも、JavaScriptで状態を別途同期する必要はありません。
よくある質問
「実践パターン：ツールチップと状態管理」レッスンは無料ですか？
はい。「実践パターン：ツールチップと状態管理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「実践パターン：ツールチップと状態管理」で何を学びますか？
data-*をツールチップ、アクティブ状態、コンポーネント設定に活用します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「実践パターン：ツールチップと状態管理」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- data-*の構文と命名規則
- JavaScriptのdatasetでdata-*にアクセスする
- CSS属性セレクターでdata-*を使う
- 実践パターン：ツールチップと状態管理