プロ野球ファン対抗企画「背番号フラッシュ暗算対決」に出場する妹をサポートするため、
2人日で“本番練習ができるWebアプリ”をAWS上に構築しました。
S3・API Gateway・Lambda・DynamoDBを組み合わせたサーバレス構成で、
短期間かつ低コストで動作する軽量アプリを設計。
今回の記事では、その開発プロセス・構成設計・学びをまとめます。
特別なフレームワークやCI/CDは使用せず、
「AWSの基本サービスのみで、どこまで素速く、実用レベルのアプリが作れるか」
という観点から、個人開発のリアルなワークフローを紹介します。
🏁 はじめに
それはある日のこと。妹からこんな電話がかかってきました。
「『背番号フラッシュ暗算対決』、出場することになったよ！」
──プロ野球ファン対抗イベントで、1秒ごとに選手画像が6枚映し出され、
背番号を暗算で合計して答えるという、記憶力＋計算力の勝負。
「おめでとう。妹氏は計算大得意だし、きっと大丈夫。盛り上がるよ」
「でも、相手チームの選手の背番号、全然覚えてなくて……フラッシュ暗算もやったこと無いし……」
本番まで1週間。 不安そうな妹の声。
自慢の妹の晴れ舞台に少しでも花を添えたく、私は妹に申し出ました。
「お姉ちゃんが問題集アプリ、こしらえますわよ！」
「背番号フラッシュ暗算」参考動画
※この回に出場されている方は私の妹ではありません。
https://youtu.be/aBnVSL1a5s4?si=oPOw3fOnLDliNauY&t=137
- チームA・チームBの選手が1秒ごとに交互に、計6名分、表示される
- 「6人分の背番号の合計」を素早く(10秒以内に)暗算して答える
シンプルながら正答は難しく、ファン心をくすぐる楽しい企画です。
- たしか2024年シーズンの交流戦から、千葉ロッテマリーンズがスタートした企画
- これまでも正解者の数は少なめな印象
- 一般的なフラッシュ暗算とは異なり「映った選手の背番号を思い出す」という工程がある
🕒 開発スケジュール
| フェーズ | 内容 | 所要時間 |
|---|---|---|
| 設計＋基礎機能 | DB設計、API接続、UI基本形 | 約0.5日 |
| 応用機能 | 出題モード追加、UI改善 | 約1.5日 |
| 合計 | 約2.0人日 で完成 |
基礎機能開発後は、妹に使ってもらいながら随時改修。
「基礎機能はウォーターフォール、応用機能はアジャイル」的な進め方でした。
⚙️ 使用技術と構成
| カテゴリ | 使用技術 |
|---|---|
| フロントエンド | HTML / CSS / JavaScript |
| バックエンド | AWS Lambda（Python） + API Gateway |
| データベース | DynamoDB |
| ホスティング | Amazon S3（静的サイト） |
| ログ | CloudWatch |
| レビュー／相談 | ChatGPT 4o |
⇒ いわゆる “S3 + API Gateway + Lambda + DynamoDB” の王道サーバレス構成です。
💡 DynamoDBを選んだ理由
- 要件は「Key-Valueアクセスのみ」で十分（リレーショナル構造は不要）
- オンデマンド課金モードで低コストに運用可能
- データの変更が少なく、キャッシュ的に扱いやすい
💬 ChatGPTを使った開発支援
ChatGPTには以下の点でサポートを依頼しました：
- LambdaとDynamoDB設計のレビュー
- JS内での非同期処理構成の確認
- CSSアニメーションの最適化提案
- README / Qiita構成の整理
短期間開発では「考える時間の節約」が最重要だったため、
ChatGPTにはレビュー相手兼ペアプログラマとして並走してもらいました。
※「4o」なのは、当時の最新モデルのため。
🏗️ システム構成図
構成の流れ：
- S3上にフロント（HTML / JS）と画像格納フォルダを配置
- JSからAPI Gateway経由でLambda関数を呼び出し
- LambdaがDynamoDBから選手データをランダム取得
- 結果をJSONで返却 → ブラウザで画像と背番号を表示
- ログはCloudWatchに送信
🧠 実装のポイント
🔹 Lambda（Python）でのランダム取得処理
-
get_random_items()関数でDynamoDBをscan→ ランダムに抽出 - API Gateway経由で
teamA,teamB,countA,countBのパラメータを受け取り - CORS設定をAPI Gateway側で制御
- CloudWatchログで呼び出し状況を確認
- JSONレスポンスとして返却
🔹 フロントエンドの工夫
- 画像サイズの不統一をCSSの
object-fit: cover;で吸収- 球団によってプロフィール画像のサイズが異なる
- 手動トリミングを避け、ルールで自動調整
- JavaScriptで出題順序とテンポ（1秒ごと切り替え）を制御
- 「本番を意識したテンポでの練習」を提供
🔹 UI設計
- 各モード（本番／練習／特化／チーム別）をワンクリックで切り替え
- 出題パターンを定数管理し、短期間で柔軟に調整可能に
🔹 オマケ機能
- 合計値「Total」を押下すると花吹雪が舞う（演出機能）
- 練習のマンネリ化を防ぐ工夫
🌸 成果と学び
妹からの最終フィードバック
「めっちゃ助かった。思い出しているようでは勝ち目は無いので、このアプリでまるで本番のように
“写真を見て1秒以内に瞬時に背番号を浮かべ暗算”が実践できるのは大きい。
アプリのおかげで短期間でここまで仕上がった」
また、正答率が以下のように上昇したとのこと。アプリでの練習が、しっかり役に立ったようで良かったです◎
- 【Before】アプリで練習開始直後：20%
- 【After】本番当日：75%
結果は──
妹、本番で見事に正解！🎉
もちろん、妹の鍛え上げられた計算力があったからこその正解（勝利）ですが、妹のおかげで
“エンジニアリングが人の成功体験に直結した” 瞬間を実感できました。
🧩 今回の開発で学んだこと
- 「誰かの課題を最小構成で解決する」ことは、AWSなどの技術を学ぶ上で最高の教材になる
- ChatGPTを設計レビュー相手として使うことで、短期開発でもある程度品質を担保できる
- AWSの基本サービスのみでも、十分実用的な体験を届けられる
📦 作成したwebアプリ「背番号フラッシュ暗算道場」デモ
※画像やチーム名などは差し替えています。
📁 ソースコード
GitHubリポジトリはこちら
👉 https://github.com/amomo0220/pub_baseball-flash-math-2025
🔚 おわりに
今回は、妹の挑戦を支えるために作った小さなアプリでしたが、
「自分の持っている知識や経験を使って素早く、誰かの成功に貢献できる」 という体験は
エンジニアとして大きな励みになりました。
結果にもつながり、エンジニア冥利に尽きる体験でした。楽しかったです！
💬 付記：著作権とデータ利用について
アプリ内で使用した画像は、NPBや各球団公式サイトから取得したものを
個人・家族間での学習目的 に限定して利用しました。
商用利用・公開サービスではなく、使用したデータおよびアプリはすでに削除済みです。
著作権は各球団に帰属し、問題があれば本記事を削除いたします。
- 参考：著作権法第30条