【JavaScript】Webページ上で星5つ評価機能を実装する方法

星5つ評価機能をWebページに実装することは、ユーザーに製品やサービスの評価を求めるために非常に便利です。以下は、この機能を実現するための手順です。

HTML要素の作成

最初に、5つの星のアイコンを表示するためのHTML要素を作成します。これには、例えばdiv要素やspan要素を使用することが一般的です。

<div class="rating">
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</div>

CSSスタイルの適用

次に、HTML要素に適切なスタイルを適用して、星のアイコンが適切に表示されるようにします。CSSを使用して、アイコンの色やサイズ、表示方法を指定します。

.star {
  font-size: 24px;
  color: #ffd700; /* 星の色 */
  cursor: pointer; /* マウスカーソルをポインターに変更 */
}

.star:hover,
.star.active {
  color: #ffcc00; /* マウスを重ねたり、クリックした星の色 */
}

JavaScriptのイベント処理

JavaScriptを使用して、ユーザーが星をクリックしたときの処理を実装します。クリックされた星とそれより左のすべての星をアクティブにし、それより右のすべての星を非アクティブにします。

const stars = document.querySelectorAll('.star');

stars.forEach((star, index) => {
  star.addEventListener('click', () => {
    stars.forEach((s, i) => {
      if (i <= index) {
        s.classList.add('active');
      } else {
        s.classList.remove('active');
      }
    });
  });
});

評価の送信

ユーザーが評価を選択した後、その評価をサーバーに送信して保存します。
Ajaxを使用して非同期的に送信し、ユーザーに画面遷移を待たせないようにします。
一般的には、以下のような方法が使われます。

  • Ajaxリクエスト: JavaScriptのAjaxライブラリやfetch APIを使用して、評価データをサーバーに非同期的に送信します。サーバーはこのデータを受け取り、適切なデータベースに保存します。
  • フォーム送信: 評価を含むフォームを作成し、ユーザーが送信ボタンをクリックすると、フォームデータがサーバーに送信されます。サーバー側でこのデータを処理して保存します

    • フィードバックの表示

    ユーザーが評価を選択した後、選択された評価をユーザーにフィードバックとして表示します。これにより、ユーザーは評価が正常に送信されたことを確認できます。
    一般的には、以下のような方法が使われます。

  • ページのリロード: ページのリロードをトリガーし、最新の評価情報を含んだページを再読み込みします。サーバーからのレスポンスに基づいて、適切なフィードバックを表示します。
  • Ajaxリクエスト: ページのリロードなしに、Ajaxを使用してサーバーから最新の評価データを取得します。取得したデータを元に、適切なフィードバックを表示します。

    • まとめ

    これで、Webページ上で星5つ評価機能を実装する準備が整いました。この機能を使用することで、製品やサービスの評価を簡単に収集し、改善に役立てることができます。