data属性で管理しやすい星評価を実装する方法(HTML, CSS, JS)

こんにちは、むったん（@6ttan）です。

この記事では

• data属性を使って星評価を管理しやすく実装する方法
• JSを足して点数表示もできるようにする方法

を、実際のサンプルを見ながら紹介します。

data属性で星を塗りつぶす

まずは HTMLとCSSだけ で完結する星評価から紹介します。
ポイントは「評価点数をclassで分けない」ことです。
評価点はすべて data-rate に持たせます。

• HTMLはとてもシンプル
• 星の数を変えたいときは data-rate の数値を変更するだけ
• CSSは一度書いたら使い回し可能

つまり、表示を変えたい = 数字を1か所変えるだけという、管理しやすい構造になります。

デモコード

以下は、data-rate の値に応じて星が塗りつぶされるサンプルです。
（評価を変更したいときは、HTMLの各data-rateの値を変えるだけでOK）

See the Pen rating star (html, css) by むったん (@6ttan) on CodePen.

実装の考え方

• 星はすべて同じ要素として並べる
• data-rate="3" のように評価点を持たせる
• CSSで「何個目まで塗るか」を制御する

という感じになっています。

ちなみに、Font Awesomeを利用して星以外で表現することも可能です！
色々試してみてください。

点数もいれてみる

次に「★★★☆☆」だけでなく、「3.0 ★★★☆☆」のように 点数も一緒に表示したい 場合です。
ここではJSを使いますが、考え方は同じです。

• 星の評価は data-rate に集約
• JSは「その値を読むだけ」

という役割分担にします。
ちなみに、なぜJSを使用しているかというと…
CSSでは、親要素や子要素が持つ data属性の値を別の要素に渡して表示することができません。
そのため、評価点の数値表示と星の塗りつぶしにはJSを使っています。
（attr()使えばできる気がする、で毎回試すんですが「できなかったんだ🤦‍♀️」となるので、自分への備忘録も兼ねて）

デモコード

以下は、星評価に加えて点数表示を自動で出すサンプルです。

See the Pen
rating star (html, css, JS) by むったん (@6ttan)
on CodePen.

実装の考え方

• HTML側で data-rate を1か所に持たせる
• JSでその値を取得
• テキストとして数値を表示する
• styleを追加して「何個目まで塗るか」を制御する

ということをやっております。

管理しやすさは「情報を1か所に集める」こと

今回のポイントはとてもシンプルです。

• 評価の数値は data属性に集約 する
• 表示ロジックはCSSとJSに分離する
• HTML, CSSを書き換える場所を最小限にする

こうしておくと、

• 評価の変更
• デザインの変更
• 表示形式の追加

どれも壊れにくく、直しやすい実装になります。
よく使うUIだからこそ、未来の自分が助かる実装を意識して作っておくのがおすすめです。

それでは！