[Vue.js]Vuetifyで星型の5段階レーティングを実装する方法[v-rating]

Vue.js&Vuetifyの記事_v-ratingについて

Vuetify でレーティング表示を使ってみる

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事です。
今回は、お手軽にスター(星)型のレーティング機能を実装できる v-rating について、書いていきます。

↑こんな感じのレーティング機能が表示できます。

Vuetifyの導入方法について等は、以前の記事:
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編]CDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

まずはコードをご紹介

いつも通り、コードのご紹介です。この v-rating 、機能の割にコードがとても簡潔なので良いですね。
Vue側はこんな感じです。

<template>
<v-rating
  background-color="orange lighten-3"
  color="orange"
  hover="true"
  large
  v-model="satisfaction"
></v-rating>
</template> 

そして、 v-model を使用しているので、data側にはあらかじめ satisfaction (名前はなんでも良いです)という data を記述しておきます。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
      satisfaction: 5,
    }
  })
</script>

または、単一コンポーネントを使用している場合はこの様に書くこともできます。

export default {
  data: () => ({
    satisfaction: 5,
  })
}

もうお気づきだと思いますが、v-rating に紐づける v-model に指定しているのは、初期状態のレーティングの数値です。
上記の例では、星5が初期値になるということですね。

v-ratingのサンプル

いつもどおり、サンプルをご用意しました。実際に動いている状態をご確認ください。
星アイコンにhoverするとレーティングが左右に滑らかに動き、クリックで値が変わるのを確認できると思います。
v-rating のサンプルを見る

そのほかのオプション(値を0.5ごとにするなど)

柔軟なカスタマイズにも対応できるのが Vuetify の良いところですが、もちろんこの v-rating にも豊富なオプションがあります。
たとえば、上記の例では1ごとの評価しかできないレーティング機能ですが、オプションをつけることで、それを0.5ごとの評価ができるレーティング機能に変更することができます。

<template>
  <v-rating
   v-model="satisfaction"
   background-color="grey darken-1"
   color="orange"
   half-increments="true"
   half-icon="$ratingHalf"
   empty-icon="$ratingFull"
   full-icon="$ratingFull"
   large
  ></v-rating>
</template>

↑ half-increments=”true” として、0.5ごとのレーティング機能をオンに。そしてその際使用するアイコンを、half-icon=””として指定しています。
これで、先ほどの当サイトのサンプルページの下側にある例の様に、0.5ごとのレーティングが使用できる、というわけです。

そのほかにも指定できるオプションはたくさんあり、一覧は以下APIページにあります。
v-rating API — Vuetify

そして、コンポーネントの公式ページは以下です。ここを見ると、ほかにも色々な用例が載っていますので、一読をお勧めします。
レーティング・コンポーネント — Vuetify

ハマりやすそうな点など

実は、0.5ごとのレーティング機能を表示しようとした際、私の手元では
適切に half-icon=”$ratingHalf” として指定しているはずなのに、なぜかハーフ用アイコンがきちんと表示されない不具合がありました。
そちらを解決した方法を書いておきます。
0.5 表示の時に星ボタンに付与されるclass名は mdi-star-half-full となっているのですが、
どうもこの時読み込んでいたmaterial-design-icons の中には、
そのclass名で必要なアイコンが定義されていない模様でした。
これは、読み込んでいた material-design-icons のバージョンが低かったための現象の様でして、
次のように現在の最新バージョン 5.x を指定してあげたところ解消しました。

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

同様の現象が起きた場合、試してみると良いかもしれません。

この記事のまとめ

今回は、Vuetifyを使用して手軽にレーティング機能を表示させることができる、
v-rating についてご紹介しました。
実際の用例としては、
(フロントエンドにVuejs、ユーザーの入出力を伴うデータ管理にはfirebase(firestore)を使用していると想定した場合で書きます)
あらかじめfirestore内に、「とある項目についてのユーザー評価のレーティングを管理するフィールド」を用意しておき、
それをVuejs側で取得して、dataに格納しておくとします。
そして、例えば星をユーザーがクリックしたタイミングでこれまでの評価総数(つまり平均値)と、そのユーザーがつけた値を比較して、計算させます。
計算が済んだら、firestoreの同フィールドに、計算後の値を送信して、最新のレーティングとする、
という様な処理を記述する様な方式で実装して、使用することが想定できそうですね。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。