こんにちは、アイカレの非常勤講師をしている山内といいます。
今回、ChatGPTを活用してちょっとしたwebアプリを作成しましたので紹介します。
「バドミントンのスコアをつける Web アプリを作りたい！」
そんな軽い思いつきからスタートしたのですが、
ChatGPT とやり取りしながらつくっているうちに、
気づけば 公式ルール対応スコアアプリ が完成していました。
以下、ざっくり振り返りです👇
ChatGPT に 「21 点制って cap は何点？デュースは？」 などを質問しつつ、 バドミントンの細かいルールを整理。
- 21 点制 → 最大 30 点
- 15 点制 → 最大 21 点
- 1ゲームマッチ or 3ゲームマッチ?
- デュース処理 etc…
これらをアプリのロジックにどんどん組み込みました。
次はメイン画面のスコアボード。
- 得点ボタン
- デュース表示
- ゲーム/マッチの自動判定
- アンドゥ
- 次ゲーム
- マッチリセット（選手名は保持）
など、バドミントンのスコアリングに必要な機能を1つずつ追加していきました。
iPhone で数字が消えるバグや、select が画面からはみ出す問題などもありましたが、
そのたびに ChatGPT が CSS の修正案を提示してくれて、解決。
ダブルスの「回転」って、実際にやるとめちゃくちゃややこしいです。
知らない人は
「左右入れ替えるだけでしょ？」
と思うかもしれませんが、
サーブ権の移動との組み合わせで複雑度が一気に上がります。
実はこのアプリをつくろうと思った一番の理由が、
この “回転” を見える化したい！ というところでした。
ChatGPT と何度も相談しながら、
サーブ側だけ回転するルールを正しく再現する仕組みを実装しました。
実際に使ってもらうと、
「サイド入れ替え（コートチェンジ）機能」はほぼ必須でした。
スコアラーが見ている方向と、アプリ上の左右が逆だと混乱しますからね。
最初は データそのものを左右入れ替えてしまい、サーブ権まで狂う という事故を起こしましたが、
ChatGPT のアドバイスで大きく改善できました。
「サイド入れ替え＝カメラの向きが変わるだけ。
state はいじらず、表示だけ左右反転しなさい」
この発想のおかげで、
実際の試合に近い UI が実現できました。
要望で、localStorage を利用した 選手リスト編集画面 も追加。
その場で選手を追加したり、名前を変更したりできるようになっています。
トップページに QR コードをつけて、
スマホから読み込めばすぐにスコアボードへアクセスできます。
体育館でもすぐ使えるのが便利！
- iPhone で数字が消える
- 選手名が左右逆に見える
- select がはみ出す
- サーブ権の表示がズレる
- アンドゥが期待通り動かない
などなど、細かい不具合は山ほど出ましたが
その都度 ChatGPT に相談して解決していきました。
- バドミントン公式ルール準拠のスコア計算
- ダブルスの回転・サーブ権移動を自動再現
- サイド入れ替え（コートチェンジ）
- 選手リストの編集（localStorage）
- スマホでも快適な UI
- Undo / Next Game / Reset
- QR コードで即アクセス
実戦で使ってもらえるレベルになったと思います！
今回の開発を通して、
- わからないことをその場で ChatGPT に質問
- 実装 → バグ発生 → ChatGPT に原因を相談
- さらに機能追加を相談
- 気づけばかなり高度なアプリに発展
というサイクルが自然に回り、
ChatGPT と一緒に作り上げていく楽しさ を実感できました。
また、実際に使ってもらって意見を聞くことの大切さも再認識できました。
皆さんも ChatGPT などの生成AIを活用しながら、開発を楽しんでみてください！