忘年会や結婚式の2次会の定番であるビンゴ大会
いざ開催しようとネットで無料の抽選ツールを探すと、画面いっぱいの広告、動作の重さ、スマホからの操作性の悪さというストレスフルな壁にぶつかる。あの無駄な手間を排除し、イベントを盛り上げるためだけに特化したビンゴ抽選機アプリを、Claudeの力を借りてフルスクラッチで開発した。
ビンゴ抽選機アプリを作ろうと思った背景
既存のWebツールやアプリには、サーバーサイドエンジニアの視点から見ると首を傾げたくなる仕様が少なくない。
解決したかった課題は以下の通り。
広告とセキュリティへの懸念： 社内イベントで利用する際、怪しい広告が表示されるツールはコンプライアンス上使えない。
UI/UXの致命的な遅延： 大勢の視線が集まる中で抽選ボタンのレスポンスが悪い、または誤動作しやすいデザイン。
環境依存の排除： インストール不要、ブラウザ一つで動き、プロジェクター投影にも耐えるレスポンシブ対応。
既製品に妥協するくらいなら、APIとモダンなフロントエンドで自分で作った方が早い」というエンジニア特有の発想から開発がスタートした。
Claudeを駆使した超高速開発の全貌
要件定義から実装、デバッグにいたるまで、すべてClaudeを壁打ち相手にアサイン。人間が詳細なコーディングをするのではなく、AIに仕様を正確に伝え、出力されたコードを統合していく「AI駆動開発」のスタイルをとっている。
実装コード例（抽選ロジック抜粋）
// 重複なしで1〜75からランダムに数字を抽出するコアロジック class BingoMachine { constructor() { this.availableNumbers = Array.from({ length: 75 }, (_, i) => i + 1); this.history = []; } drawNumber() { if (this.availableNumbers.length === 0) { throw new Error("すべての数字が抽出されました。"); } const randomIndex = Math.floor(Math.random() * this.availableNumbers.length); const drawn = this.availableNumbers.splice(randomIndex, 1)[0]; this.history.push(drawn); return drawn; } }
Claudeを使ってアプリを作ってみた率直な感想
実際にClaudeと伴走してアプリを完成させてみて、最も強く感じたのは人間の意図を汲み取る精度の高さとコードの堅牢性のバランスの良さである。
従来の検索ベースの開発であれば、スタックオーバーフローや公式ドキュメントを渡り歩いて数時間かかっていたエラーハンドリングやアニメーションの調整も、Claudeであれば一瞬で最適解やリファクタリング案を提示してくれる。人間がやるべきことは仕様の決定と出力されたコードのレビューのみに絞られ、純粋な生産性が何倍にも跳ね上がった。
手作業でコードを書くことだけに固執するアナログなプロセスは、もはやエンジニアリングにおいてはボトルネックでしかない。AIという強力なツールを使い倒し、最短ルートでプロダクトを形にする。今回のビンゴアプリ開発は、これからの開発スタイルのスタンダードを確信する最高の機会となった。
入手はこちらから↓
