（Noteからお越しいただいた皆様、ありがとうございます！ここでは開発の裏側や機能をより詳しくご紹介します。）

私（テニスパーク管理人）は神奈川県川崎市でサークルを運営しており、以前は紙の乱数表で対戦を回していました。「誰が何番だっけ？」と何度も確認したり、人数が変わったときに組み合わせをやり直したり……。その煩わしさを解消したく、プログラミング未経験のままAIの力を借りてアプリ開発に挑戦しました。本記事では、その開発秘話をお届けします。

テニスを楽しんでいる皆さん、こんにちは！テニスサークル運営で誰もが一度はぶつかる「乱数表の煩わしさ」。それを解消するために開発したテニス運営サポートWebアプリ「テニスパーク（TennisPark）」の開発秘話をお届けします。

1. 「もっとテニスに集中したい！」から始まった開発

きっかけは「自分が欲しかったから」というシンプルな理由です。

紙の乱数表は、誰が何番かを覚えるのが大変で、組み合わせが偏ることもあります。「スマホで完結し、戦績を後で見返せたらもっと盛り上がるはず！」という理想を形にすることに決めました。

2. こだわったのは「公平性」と「テニスプレイヤー目線」

開発で特に追求したのは以下のポイントです。

• 公平な組み合わせアルゴリズム:
  「特定の人ばかり試合に出る」不満をゼロに。全員の試合数を均等にしつつ、ペアや対戦相手が多様になるロジックを実装しました。

• 現場での使い心地（UI/UX）:

  • シングルス・ダブルス対応、ボタン一つでカード自動生成。

  • スコア入力は片手でサクッと。タイブレークもバッチリ。

  • 結果は即座に集計され、ランキングや相性分析として可視化。

  • PWA対応により、スマホのホーム画面からアプリ感覚で起動可能。

3. 未経験者の挑戦を支えた「技術スタック」

「開発環境すら分からない」状態から、以下の最新ツールを駆使して完成させました。

• OS:
  Windows 11

• 開発言語:
  TypeScript (JavaScript)

  
  JavaScriptをより安全に、扱いやすくした言語です。AI（Cursor）との相性が抜群に良く、コードの書き間違いを事前に指摘してくれるので、未経験の私でも安心して実装を進めることができました。

• フレームワーク:
  Next.js (React)

  
  モダンなWebアプリを素早く、高性能に作るための枠組みです。画面の切り替えがスムーズで、SEO（検索エンジン最適化）にも強いこのフレームワークをあえて選んだことで、プロのような操作感を実現できました。

• AIコードエディタ:
  Cursor
  今回の主役。AIと対話しながらコードを書くスタイルで、未経験の壁を突破させてくれました。

• バックエンド & データベース:
  Supabase
  ユーザー認証や試合データのリアルタイム保存を支える、強力なバックエンドサービスです。

• 決済プラットフォーム:
  Stripe
  本格的なサービス展開を見据え、世界標準の決済システムをAIの助けを借りて導入しました。

最初はAIに丸投げしていましたが、途中から「どんな実装をしたいか」をAIと徹底的に対話するスタイルに切り替えたことで、開発効率が劇的に向上しました。

本記事の情報について

• 本記事で紹介している技術スタック・開発環境は2026年1月時点のものです。開発は2025年頃から着手し、現在も継続的に改善を重ねています。

• テニスパークは、開発者である私がサークル運営の実体験をもとに設計・開発しています。

4. 「テニスパーク」が実現したい未来

日程調整、開催通知、ペア決め、結果共有……。こうした事務作業はすべてアプリに任せて、皆さんはコートの上でボールを打つことに100%集中してほしい。

そして、終わった後はデータを見ながら「今日の勝率1位だ！」「このペア、相性いいよね」とわいわい楽しんでもらえたら、これ以上の喜びはありません。

私のサークルでは、今や乱数表を持ち運ぶ必要がなくなりました。参加者を選んでボタンを押すだけで組み合わせが決まり、試合後はランキングや相性分析をその場で共有。メンバーからも「便利！」と好評で、開発の苦労が報われた気がします。

おわりに

「テニスパーク」は現在Webアプリとして公開中です。

「自分も何か作りたい」と思っている方。今の時代、AIという強力な相棒がいれば、あなたの情熱は必ず形になります。ぜひ一歩、踏み出してみてください。

テニスを愛する皆さんの活動が、このアプリでもっと楽しくなることを願っています！