きっかけ
- リモートワークで雑用を気軽に押し付けたい！
- 現実のじゃんけんみたいにリモートでも臨場感を持って盛り上がりたい！
というわけで、Socket.IO を使ってリアルタイムなじゃんけんアプリを作ってみました 
この記事は、つくった Web アプリの構成などの概要をまとめたものです
ソースコードの解説は行っていないのであらかじめご了承ください 🙏
つくったもの
グーナーの皆さん怒らないでください
GitHub Repository
構成
- 言語はフロントエンド、バックエンドともに TypeScript です
- WebSocket の双方向通信は Socket.IO によって実現しています
- フロントエンドは Next.js で、UI ライブラリとして Chakra UI を採用しました
- バックエンドは Socket.IO のサンプルが豊富だった Express を採用しました
Express は Next.js - Custom Server として立てることも考えましたが、Custom Server は Vercel にデプロイできないということだったので今回はスタンドアロンにしました
苦労したこと
簡単にですが、開発で苦労したポイントを書いておきます
Socket.IO の新しい情報が少ない問題
Socket.IO の実装に関する情報を調べてみると、2014~2016 年くらいの記事が上位に出てくることが多く、「この情報いまも信じていいのかな？ 
」と不安になりました
例えば、部屋ごとにじゃんけんの部屋を作る方法を知りたいとき、
- 実現のためにどういう選択肢があるか？
- Rooms と Namespaces のどっちが適しているか？
- どう実装するのがいいか？
といった情報を調べていくのに公式ドキュメントだけでは理解しきれず、色んなサイトを巡ることになりました
WebSocket の知見がないこともあり日本語の情報を中心に探したので、英語が読める人なら苦労しないかもしれません
Socket.IO の実装は気が向いたら別記事でまとめようかなと思いますが、もし今すぐ「実装を見たい」という場合はバックエンドの main.ts を見てみてください
Heroku に Express デプロイしたらレスポンスが遅い問題
最初はバックエンドを Heroku にデプロイしてみたのですが、想像していた以上にレスポンスが遅かったです
一例として、シンプルな POST に2秒以上かかっていました
Heroku の無料プランでは Region を変更できないので、この機会に AWS App Runner を東京リージョンで試してみたところ、無事にレスポンスが改善されました 
（こちらも有料ですが、支払いを AWS にまとめられるのが魅力でした）
AWS App Runner へのデプロイでは、↓の記事を参考にさせていただきました
AWS App Runner をつかってみて:
設定ファイルの追加なしでコンソールからデプロイできるのが楽ちん
Heroku や Vercel と比べてデプロイの時間が長い
ふりかえり
ひとまず公開まで辿り着けてよかったです
つくりたいモチベーションが明確だったので、機能スコープを絞れた のが勝因かなと思います
Socket.IO は最初動かすまで少し苦労しましたが、軌道に乗ってからは割とスムーズでした
ただ、ちゃんとテストをすればまだ大量の // TODO が積み上がると思います 
あとは、簡単ですが初めて SEO 対策をしてみたので、知らないことばかりで学びになりました
実際にユーザーに使ってもらってこそ価値を生み出せると思うので、これからも 「つくったものをいかにユーザーに届けていくか？」 という視点は大切にしていきたいです 