Flaskで星を使ったレーティング

Bootstrap 5 を使用してレーティング評価を実現するには、JavaScript（jQuery なし）でイベントを処理し、Bootstrap のスタイルを活用して柔軟な構造を作成する方法を使います。

以下に、Bootstrap 5 を用いて同様の星評価の仕組みを実装する例を示します。

HTML

<div class="range-group">
  <input type="range" min="1" max="5" value="0" class="input-range visually-hidden">
  <div class="star-container">
    <button type="button" class="star-btn" data-value="1" aria-label="1 star">☆</button>
    <button type="button" class="star-btn" data-value="2" aria-label="2 stars">☆</button>
    <button type="button" class="star-btn" data-value="3" aria-label="3 stars">☆</button>
    <button type="button" class="star-btn" data-value="4" aria-label="4 stars">☆</button>
    <button type="button" class="star-btn" data-value="5" aria-label="5 stars">☆</button>
  </div>
</div>

CSS

.star-container {
  display: inline-flex;
  gap: 5px;
}

.star-btn {
  font-size: 20px;
  color: #aaa;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.star-btn.active {
  color: #fc3;
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  const rangeGroups = document.querySelectorAll(".range-group");

  rangeGroups.forEach(group => {
    const stars = group.querySelectorAll(".star-btn");
    const input = group.querySelector(".input-range");

    // 初期化: input[type="range"]の値に基づいて星を設定
    const initialValue = parseInt(input.value, 10) || 0;
    stars.forEach((star, index) => {
      if (index < initialValue) {
        star.classList.add("active");
      }
    });

    stars.forEach(star => {
      star.addEventListener("click", () => {
        const value = star.getAttribute("data-value");

        // input[type="range"]の値を更新
        input.value = value;

        // 星の状態を更新
        stars.forEach(s => s.classList.remove("active"));
        for (let i = 0; i < value; i++) {
          stars[i].classList.add("active");
        }
      });
    });
  });
});

ドキュメント読み込み時に <input type="range"> の値を読み取り、それに基づいて星の状態を設定します。

初期化処理:

• ドキュメントが読み込まれた時点で、<input type="range"> の value 属性を読み取ります。
• value が存在すれば、それに応じて星（<button> 要素）の active クラスを設定します。
• 値が空または 0 の場合、星はすべて非アクティブのままです。

動作の流れ

1. ページ読み込み時:
   • <input type="range"> の値（value）を読み取ります。
   • 値が設定されている場合、その値に基づいて該当する星に active クラスを追加します。
2. 星がクリックされた場合:
   • クリックされた星のインデックスを取得し、<input type="range"> の値を更新します。
   • 全ての星の状態をリセットして、選択した値に応じて active クラスを再設定します。

HTML の <input type="range"> に初期値を設定すると、読み込み時にその値が反映されます。