AIで星評価（レーティング）UIを作る【CSS＋JS生成】

商品レビューや満足度アンケートでよく使われる星評価UI。ホバーで色が変わり、クリックで評価が確定するインタラクションをAIに生成してもらいましょう。

方法①：既存のHTMLからCSS・JSを生成する

AIへのプロンプト例

以下の星評価HTMLに対して、
・ホバーするとホバーした星まですべて黄色になるCSS
・クリックで評価を確定するJavaScript
・確定後は選択済みの星が常に黄色で表示される
を追加してください。

<div class="star-rating" data-rating="0">
  <span class="star" data-value="1">★</span>
  <span class="star" data-value="2">★</span>
  <span class="star" data-value="3">★</span>
  <span class="star" data-value="4">★</span>
  <span class="star" data-value="5">★</span>
</div>

生成されたCSS例

.star-rating {
  display: flex;
  gap: 4px;
  font-size: 2rem;
  cursor: pointer;
}
.star {
  color: #ddd;
  transition: color 0.1s;
  user-select: none;
}
.star.hovered,
.star.selected {
  color: #f5a623;
}

生成されたJS例

const ratingEl = document.querySelector('.star-rating');
const stars = ratingEl.querySelectorAll('.star');
let selected = 0;

stars.forEach(star => {
  const val = parseInt(star.dataset.value);

  star.addEventListener('mouseenter', () => {
    stars.forEach(s => s.classList.toggle('hovered', parseInt(s.dataset.value) <= val));
  });
  star.addEventListener('click', () => {
    selected = val;
    ratingEl.dataset.rating = val;
    stars.forEach(s => s.classList.toggle('selected', parseInt(s.dataset.value) <= val));
  });
});

ratingEl.addEventListener('mouseleave', () => {
  stars.forEach(s => s.classList.remove('hovered'));
});

方法②：HTMLとセットで生成する

AIへのプロンプト例

星評価UIをHTML・CSS・JavaScriptでゼロから作ってください。
・5段階評価
・ホバーで点灯、クリックで確定
・評価後に「4点を選択しました」のようなテキストを表示
・リセットボタンも設置

ポイント

• 「半星（0.5刻み）評価にしたい」場合は、その旨を伝えると対応コードを生成してくれます（やや複雑になります）
• 評価値をフォームで送信したい場合は「hidden inputに評価値を入れて」と追加依頼しましょう