Vueで作るレビュー画面

Vueで作るレビュー画面
まとめ

Vueで作るレビュー画面

導入

アプリにユーザーのレビュー機能を実装することで、利用者の声を集められ、改善や評価に役立てることができます。Vueを用いれば、投稿フォームとレビュー一覧の表示を組み合わせた直感的な画面を作成できます。

読者

結局どんな機能が含まれているの？

今回の実装例では、以下の要素を備えています。レビュー投稿フォーム（評価とコメント）、レビュー一覧の表示、ログイン状態に基づく投稿制御、日付フォーマットによる見やすい表示です。

ごりら

この基本構成を押さえれば、どんなWebアプリにも応用できる！

レビュー投稿フォームの実装

ユーザーは星評価（1〜5）とコメントを入力してレビューを送信します。送信時にはバリデーションを行い、未ログイン状態ではアラートを出すようにしています。

読者

ログインしてないとどうなる？



<form @submit.prevent="submitReview">
  <label for="rating">評価:</label>
  <select v-model="newReview.rating" required>
    <option value="">選択してください</option>
    <option value="5">⭐️⭐️⭐️⭐️⭐️</option>
    <option value="4">⭐️⭐️⭐️⭐️</option>
    <option value="3">⭐️⭐️⭐️</option>
    <option value="2">⭐️⭐️</option>
    <option value="1">⭐️</option>
  </select>

  <textarea v-model="newReview.comment" placeholder="感想を記入してください"></textarea>
  <button type="submit">レビューを送信</button>
</form>

レビュー一覧の表示

レビューはサーバーから取得し、ユーザー名・評価・コメント・投稿日時を表示します。評価は星の数で直感的に確認でき、未投稿時には「まだレビューがありません」と表示されます。

ごりら

ユーザー体験を意識して「最初のレビューを促す」文言を入れるのもポイント！



<div v-for="review in reviews" :key="review.id">
  <span>{{ '⭐️'.repeat(review.rating) }}</span>
  <span>{{ review.userName || '匿名ユーザー' }}</span>
  <span>{{ formatDate(review.createdAt) }}</span>
  <p>{{ review.comment }}</p>
</div>

データ取得と送信処理

レビュー一覧は `onMounted` で読み込み、投稿時は `apiService` を利用してバックエンドと通信します。エラーハンドリングも組み込むことで、ユーザーに適切なフィードバックを返せます。

読者

もし投稿に失敗したらどうなる？


const fetchReviews = async () => {
  try {
    const response = await apiService.getReviews();
    reviews.value = response.reviews;
  } catch (error) {
    alert("レビューの読み込み中にエラーが発生しました。");
  }
};

const submitReview = async () => {
  if (!authStore.isAuthenticated) {
    alert("ログインが必要です。");
    return;
  }
  try {
    await apiService.submitReview(newReview.value);
    alert("レビューが投稿されました！");
    fetchReviews();
  } catch (error) {
    alert("投稿中にエラーが発生しました。");
  }
};