Vue.jsとFirebase (+ Webpack) で作りました。
誰かが上位になっても特に何もないです。けど私が嬉しくなります。やったね。

https://nih.lsv.jp/product/chara-vote/

動かなかったり変な動きしてたら教えてください🙇‍♀️

難しかったとこ

・DB設計
・DBとのデータ送受信
・ボタンコンポーネントごとの数値保存
・カウント数合計値取得
・Webpack5リリースに伴うバージョン差異

今までフロント完結のものばかり作っていたので、今回はRealtime Databaseを使って簡単な数値保存できるものを作りました。

Firebaseならバックエンドの知識なくても気軽に個人開発できるよ！ と聞いて触ったわけなんですが、なんだかんだ学習コストもあったので無難にSQLとか勉強した方よかったような、と思わなくもないです。けどRDBを自分で作ろうとしたら果てしないし、私でもデプロイまでこじつけられたからもしかしたら本当にお手軽で簡単なのかも。ひえー。

あとこれを作ろうと考えているあたりにWebapck5がリリースされて、せっかくだから触ってみようかな♪ と導入したら出るわ出るわエラーの嵐。だいたいがパッケージとのバージョン差異でした。キィッ！

いやこの規模ならわざわざWebpackやVue使わなくても……とも思いますが……。

ぱっと見は理想通りの動きしてますが、累計投票数をフロント側で計算してたり、いちいち全データ持ってきてたり反省点も多いです。それに本当は投票したらキャラクターの絵が変わるとか、投票数でソートして上位を表示するとか実装したい機能もありました。絵が変わるなんて言ったら33枚 * 2を用意するトンデモ案件になるので……。

今回の画面デザインは割と適当です。いつも適当だってか。やかましいわ。