data属性(data-*)を使ってみよう

このレッスンでは、data属性を使った独自データの持たせ方を学び、状態に応じて見た目を切り替える方法を理解することを目標にします。「HTML data属性 使い方」で調べている方向けの内容です。

data-*属性は、タグに自由な情報を持たせられる「荷札」のようなものです。CSSの属性セレクタ[data-status="done"]と組み合わせると、状態によって見た目を変えられます。

サンプルコードでは、data-status="done"とdata-status="todo"という2種類のタスクに対して、それぞれ違う背景色を属性セレクタで指定しています。同じ.taskクラスを使っていても、data-statusの値によって見た目が変わる様子を確認してみましょう。

初心者がよくつまずくのが、data-の後に続く名前の付け方です。ハイフンでつなぐケバブケース(data-user-idなど)が慣習として使われ、JavaScriptから読み取るときはキャメルケース(dataset.userId)に自動変換される仕組みも合わせて覚えておくと便利です。

ToDoリストの「完了・未完了」やタブの「選択中」など、JavaScriptで状態を切り替えるアプリケーションでよく使われます。HTMLの標準機能を使ったデータ管理の方法として、実務でも頻繁に登場する書き方です。