【個人開発】Next.js x Supabase x Cloudflare Pagesでゲーム用アプリを作ってみた
概要
ブラインドピックがプレイヤー同士でできるようになる 『Simple Blind Pick』 というWebアプリを個人開発（初）しました！
この記事では、サービスの紹介と、使用した技術について紹介します。
デモ
作成した部屋のURLを共有することで、お互いの入力を待って、後出しを心配せずに同時に結果を見ることができます。
URLを共有することで、ブラインドピックが可能になります
ブラインドピックとは
そもそもですが、ブラインドピックとは、「ゲームで対戦前にお互いが選択したキャラクターなどを、（第三者を介して）お互いにわからないように同時に選ぶこと」です。
ブラインドピックを行わない場合、先に選択したプレイヤーのキャラクターを見て、後に選ぶプレイヤーは後出しで有利なキャラクターを選べてしまいます。
ですが、ブラインドピックを行うことで後出しができないため、公平な条件でキャラクター選択ができます。主に、大会や対戦会などで後出し有利を防ぐために、「対戦に関係のない第三者（運営など）」が間に立って行われることが多いです。
本アプリのユースケース
格闘ゲームなどの対人ゲーム
ブラインドピックは、格闘ゲームなどの対人ゲームでよく使われますが、上述したように、第三者を間に入れて行われることが多いです。
しかし、このアプリを使うことで、第三者なしに対戦者同士でブラインドピックを行うことができます。
これにより、運営の手間が減り、対戦者同士が迅速に対戦を行うことができます。
オンライン上でのじゃんけん
オンライン上で何かを決めるときに、相手とじゃんけんができれば楽なのに、（通話でも若干の時間差があるため）同時にじゃんけんを行うことができないことが多いです。
入力値としてじゃんけんの手を入力すれば、オンライン上で簡単にじゃんけんを行うこともできます。
その他
お互いの手の内を知らせずに同時に決めごとができるため、使い方は他にも多くあると思います。
（こういう使い方はどうかなどあれば是非コメントで教えてください！）
使用技術
Next.js
サーバーサイドレンダリングと静的サイト生成を活用したフレームワークで、SEO対策やパフォーマンスの向上を実現しています。初めて使ったのですが、非常に便利でした。
TypeScript
型安全なJavaScriptを使用することで、開発の効率と安全性を向上させ、バグの発生を抑えています。型を使うことで、コードの可読性も上がったのと、Cursorによるコード補完がより使いやすくなって便利でした。
Supabase
リアルタイムデータベースとして使用し、データの管理を行っています。十分な無料枠で、ランニングコストを抑えることができました。
Tailwind CSS
CSSは完全に理解したレベルなのですが、拡張機能とエディタ補完が便利で、スタイリングを簡単に行うことができました。
Cloudflare Pages
静的サイトをデプロイできるサービスで、操作も簡単で、無料枠もあります。
Cursor
Next.jsやTypeScriptなどのコード補完が非常に便利で、コードを書くのが楽しくなりました。特に、Tabキーでコード補完を行うことができるのが便利で、これなしには開発できない体になってしまいました。有料プランだと無制限に相談できるので、困ったときは何でも聞けるよきパートナーでした。
工夫したポイント
リアルタイム更新
Supabaseのリアルタイム機能を活用し、2ユーザーのピックが完了した際に即座に結果が反映されるようにしました。これにより、同時選択の公平性を担保するとともに、ユーザー体験も損なわないサービスとなっています。
ユーザー体験の向上
フロントエンドでの状態管理を工夫し、スムーズな操作感を実現。ボタンのローディング状態やエラーメッセージの表示を適切に行い、ユーザーにわかりやすいフィードバックを提供しています。
レスポンシブデザイン
Tailwind CSSを使用して、さまざまなデバイスでの表示に対応したデザインを実現しました。モバイルでも快適に遊べるようにしたかったので、ここは特に気を使いました。
セキュリティ対策
ユーザー入力のサニタイズなど、データの安全性を確保しています。個人開発でもセキュリティは重要だと感じています。
感想
普段は、サーバーサイドやJavaに携わっているので、いわゆるモダンなフロントエンドでの開発は初めてでした。そのため、Cursor君に聞きながら、基本を学びつつ開発を行い、無事リリースできました。AIってすごいですね。
また、マーク・ザッカーバーグも言っていたり、先人の方たちの記事でもよく、「完璧じゃなくてもいいからとりあえずリリースしろ」とありますが、今回初めて開発からリリースまで行うことで自分も自信がついたので、本当にその通りですね。（まだまだ大きなサービスではないですが）
フィードバックやご意見
もしよければ、本記事や、X(旧ツイッター)のコメントでフィードバックやご意見をお願いします。
バグ報告は、Xの方にお願いします。
今後
まったく認知度がないので、SNSなどで宣伝し、まずはユーザーを増やしていきたいです。よければ皆さん、ご利用お願いします！！
初の個人開発なので、しっかり運用もしつつ、改善できるところは改善し、よりよいサービスにしていきたいです。
また、アイデア出しからリリースまで行う経験ができたので、これを生かして他にもどんどんサービスを作ってみたいです。
最後までお読みいただき、ありがとうございました。
Discussion