🎯
Web Roulette Ex
web 2025年4月3日
ブラウザ上で動作するカスタマイズ可能なルーレットアプリケーションです.複数の選択肢と確率の重みを設定して,ランダムな結果を得ることができます.
技術スタック
Next.js React TypeScript Tailwind CSS Framer Motion
Webルーレットアプリの画面
開発の背景
開発のきっかけは,研究室のメンバーと夕食を決める際に使っていたルーレットアプリの経験にあります. 「今日の夕飯,Aさんは中華がいいけど,Bさんは和食がいい…」といった個人の希望の強さを反映できる, つまり選択肢の割合を自由に調整できるルーレットがないことに気づき,「それなら自分で作ってみよう」と思い立ったのが始まりです.
開発プロセスと工夫
Webアプリ開発のアルバイト経験がある研究室の先輩から技術選定や実装に関するアドバイスをもらい,新しい技術への挑戦も兼ねて Next.js, TypeScriptといったモダンな技術スタックを採用し,Vercelでのデプロイを行いました.
開発では「選択肢の割合を自由に調整できる」というコア機能を軸に据え,その特性を最大限に活かす関連機能に絞って実装を進めました.また, Cursorの生成AIを積極的に活用することで,未経験のライブラリや言語機能についても迅速にキャッチアップし,短期間での開発を実現できました.
主な特徴
- 他の Webルーレットアプリにはない「自由に選択肢の割合をカスタマイズできる」機能を備えています.
- 一括入力: テキストや Markdownリストから一度に多くの選択肢を追加できます.
- 多言語対応: ブラウザの言語設定に応じて,日本語,英語,韓国語,ポルトガル語で表示が切り替わります.
next-intlライブラリを導入.
振り返りと学び
この開発経験を通じて,実装に着手する前の十分な計画立案の重要性を痛感しました. この開発経験を踏まえて,追加する機能について事前に洗い出し仕様を整理し,優先度を明確にすることを心がけています.