テニスサークルの「乱数表、誰が何番だっけ？」を解決したい！未経験の私がAIと二人三脚でアプリを作った話
（Noteからお越しいただいた皆様、ありがとうございます！ここでは開発の裏側や機能をより詳しくご紹介します。） 私（テニスパーク管理人）は神奈川県川崎市でサークルを運営しており、以前は紙の乱数表で対戦を回していました。「誰が何番だっけ？」と何度も確認したり、人数が変わったときに組み合わせをやり直したり……。その煩わしさを解消したく、プログラミング未経験のままAIの力を借りてアプリ開発に挑戦しました。本記事では、その開発秘話をお届けします。 テニスを楽しんでいる皆さん、こんにちは！テニスサークル運営で誰もが一度はぶつかる「乱数表の煩わしさ」。それを解消するために開発したテニス運営サポートWebアプリ「テニスパーク（TennisPark）」の開発秘話をお届けします。
1. 「もっとテニスに集中したい！」から始まった開発きっかけは「自分が欲しかったから」というシンプルな理由です。 紙の乱数表は、誰が何番かを覚えるのが大変で、組み合わせが偏ることもあります。「スマホで完結し、戦績を後で見返せたらもっと盛り上がるはず！」という理想を形にすることに決めました。 ランキング結果の例
2. こだわったのは「公平性」と「テニスプレイヤー目線」- 公平な組み合わせアルゴリズム: 「特定の人ばかり試合に出る」不満をゼロに。全員の試合数を均等にしつつ、ペアや対戦相手が多様になるロジックを実装しました。
- 現場での使い心地（UI/UX）:
- シングルス・ダブルス対応、ボタン一つでカード自動生成。
- スコア入力は片手でサクッと。タイブレークもバッチリ。
- 結果は即座に集計され、ランキングや相性分析として可視化。
- PWA対応により、スマホのホーム画面からアプリ感覚で起動可能。
- OS: Windows 11
- 開発言語:TypeScript (JavaScript)JavaScriptをより安全に、扱いやすくした言語です。AI（Cursor）との相性が抜群に良く、コードの書き間違いを事前に指摘してくれるので、未経験の私でも安心して実装を進めることができました。
- フレームワーク:Next.js (React)モダンなWebアプリを素早く、高性能に作るための枠組みです。画面の切り替えがスムーズで、SEO（検索エンジン最適化）にも強いこのフレームワークをあえて選んだことで、プロのような操作感を実現できました。
- AIコードエディタ:Cursor今回の主役。AIと対話しながらコードを書くスタイルで、未経験の壁を突破させてくれました。
- バックエンド & データベース:Supabaseユーザー認証や試合データのリアルタイム保存を支える、強力なバックエンドサービスです。
- 決済プラットフォーム:Stripe本格的なサービス展開を見据え、世界標準の決済システムをAIの助けを借りて導入しました。
本記事の情報について
- 本記事で紹介している技術スタック・開発環境は2026年1月時点のものです。開発は2025年頃から着手し、現在も継続的に改善を重ねています。
- テニスパークは、開発者である私がサークル運営の実体験をもとに設計・開発しています。
神奈川県川崎市在住。50代からテニスを始め、サークルを立ち上げ運営中。 事務作業の効率化のためにサークル運営支援アプリ『テニスパーク』を自ら開発。 プレーヤー・運営者・開発者の3つの視点から情報を発信しています。