Vue3とExpress, Socket.ioで5段階評価サイトを作ってみた

はじめに

今回はVuetifyがVue3に対応したという事で、Vueを書いてみようという気分になりましたのでそのお話について書いていきます。
Vue自体は1年前くらいにVuetifyが使えるという理由から、Vue2を個人的に少し書いてみたり、案件で一部Vueを書いていたしていました。
それ以降はReactにのめりこみReactばかりになっていたのですが、Vue3にVuetifyが対応したことやTypeScriptが使えること、Svelteの人気が上がってきたことから久しぶりにVueを今回書いてみました

アプリの構想

今回作成したのは「5段階評価サイト」というものです。
ユーザーが任意のルームに参加して、「AさんのVueの能力」などのテーマに対してみんなで5段階で評価を投稿して、一斉に公開、平均点が表示されるシステムを作りました

なぜこのサイトを作ったかというと、普段モブプログラミングで実装をしている私のチームでは人事評価などはチームのメンバーでやるのがふさわしいという話になりました。そこで、以下の「Hatjitsu」というサイトを利用して試しに各エンジニアスキルについて5段階評価をおこなってみました

このサイトはフィボナッチ数列でチケットの工数を見積もるものなので、5段階(1-5)で投票はできず、なおかつ平均点をいちいち計算する必要がありました。しかし、リアルタイムで平均点を出して色々議論する時間もとても良いものだと思い、平均点をリアルタイムで投票して出すだけのサイトがほしいなと思うようになりました

今回作成したもの

今回はVue3、TypeScript、Express(Node.js)、Socket.io、 Firebaseを利用して「Average Poker」というものを作成してみました

まずは以下のログイン画面から参加者は参加者同士で決めたルーム番号と名前を入力してルームに入ります

入ると以下の画面が表示されます
こだわったのはポーカーという名前からカジノ感をだすようなUIにしました

この画面からは参加者の情報や、今回の評価するテーマを記入したり、チャットをしたり、実際に投票をすることができます。全員が投票をするとSHOW DOWNから平均点が出力されるようになります

入力の内容や投票の情報はすべてSocketを利用してリアルタイムに同期するようになっています

作成の流れ

今回はSocket.ioを利用することをメインにサイトを作成しました
Socket.ioの使い方を学ぶのに利用したのは以下の動画です

こちらはすべてReactでフロントが書かれていますが、それをVueで書き直して作成しました
そこである程度Vue3については学習ができました

Socket.ioの使い方がわかればあとは問題なく実装できるのでフロントを作成するだけで完成まで行きました

1つ課題だったのは、「後から参加したユーザーに過去の情報を与える」という点でした
たとえば、1人目のユーザーが参加していて、次のユーザーが参加したときにそこまでの投票情報や人数がすでに何人いるかなどの情報を与える必要がありました

そこでfirestoreを利用して参加したときに同じルームのユーザーの情報を取得して、退出時に自分の情報をデータベースから消すという処理をいれて工夫しました

おわりに

アプリが解決するのは全員の合計点を人数で割って平均点を出すという単純なものですが、単純だからこそリアルタイムでできるようなものが調べた感じでは存在していなかったです

アジャイルをやるうえで、チームでの評価はとても大事になりますし、その評価をリアルタイムにして本人も混ざって議論するのはとてもよいかなと思ったので作成してみました

Socketについてある程度理解でき、Vueを久しぶりに書くことができたので良い経験になりました