2022-12-16はじめに新体操の採点をすることができるWebアプリの作成をしました。Node.jsやMongoDBをまともに触るのは初めてだったので、少し苦戦しました。今回は、システムの説明と詰まったところや反省点について説明していきたいと思います。Mongoose)WebSockt(Socket.io)MongoDBGitHubのリポジトリフロントエンドのリポジトリ↓https://github.com/mrkmtkm/mrg-referee-frontバックエンドのリポジトリ↓https://github.com/mrkmtkm/mrg-referee-backend概要ユーザーは、大会の主催者と審判の2人がいます。簡単に説明すると、審判の採点した点数を主催者側でリアルタイムで受け取り、点数を集計し表示するシステムです。実際はこんな感じです。して、審判の採点した点数を主催者側でリアルタイムで受け取り、点数を集計し表示するシステムを作るのが目的でした。技術選定の流れリアルタイム通信をするためのプロトコルとして、通信コストの低いWebSocketを使用しました。WebSocketを使用するために、リアルタイムな処理が早いNode.jsを使用しました。DBは読み書きが高速で、Node.jsとの相性がいいMongoDBを使用しました。フロントエンドは使い慣れていて、ルーティングなどが楽なNext.jsを使用しました。以下のようにすることにより、JSONを受け取れるようになります。}));Mogooseでの更新処理Resultモデルのdeductionはnullを許容していて、ドキュメントの登録の時にはnullで登録されるため、MongoDB上のドキュメントにはdeductionのフィールドがない状況でした。以下のsample1.jsのように、モデル.フィールド名=変更したい値としてしまうと、既存のドキュメントにあったフィールドの更新はされますが、その時点でドキュメントになかったdeductionフィールドは更新されませんでした。調べてみると、以下のsample2.jsのように、findOneAndUpdateというメソッドを見つけ、それを使用したら、問題が解決しました。);採点データのやり取り〜前提〜審判が採点する前後の動きは以下のようになっています。主催者側はuseEffectで5秒ごとに採点データを取りにいき、そのデータで集計する-補足-審判はサイトをリロードすると採点する選手のデータが消える(Socket.ioでの通信が切れるため)主催者側は審判からの選手の採点データが消えないようにuseEffectを使用-本題-主催者側で5秒ごとに採点データ取得しに行くのは、以下のsample.jsのようになっていて、useEffectとsetTimeoutを使用して実装しています。Errorが発生してしまうことがあるところがこの実装の懸念点です。審判側も主催者側もデータを一時的にデータを保存しておけば、useEffectでいちいちサーバーのAPIを叩く必要がなかったと思いました。(Redux使うのがいいのかな?)-疑問-Socket.ioで送られてきたデータを逐一Cookieに保存すると、フロントの速度が大丈夫なのかと思ってしましました。Socket.ioを使用したフロントの状態管理でもっといいやり方があったら教えていただきたいです。isGetResult]);ビジョンを明確にすることの大切さ、設計能力の低さを実感つくりたいものの明確なビジョンや仕様、期限などをあまり決めずに開発をおこなってしまったため、ダラダラと開発をしてしまった結果1ヶ月もかかってしましました。次に個人開発をするときは以下のことを注意していきたいと思います。初めの方でその目標が達成できなかったので、次こそはできるようにしていきたいです。あと、デザインセンスが全くないので、どうしたら簡単にいいデザインになるかを押しし得ていただきたいです。指摘点などありましたらコメントしていただけると幸いです。次は初めてのスマホアプリの作成を頑張ってみたいと思います。