高校のスポーツ大会の特設サイトを作った話

追記(2023/10/27)

• 最終的にどうSSRが遅い問題を解決したか

はじめに

こんにちは。taniです。現在、福島県の某進学校..?に通っている高校1年生(15歳)の自称プログラマーです。3,4ヶ月前に開催されたスポーツ大会で、生徒向けにトーナメントを確認できるwebアプリを開発しました。

https://tournament2023.vercel.app/

動機

僕の高校のスポーツ大会では、例年「結果がわからない」という課題があるそうです。スポーツ大会が生徒会主体で運営されていて僕は生徒会庶務であったため、生徒会長にお願いしてトーナメント表をwebから見れるシステムを作成・運営しました。

利用した技術・構想

構想

必須な機能として、

• 現在のトーナメント表を確認できる
• 生徒会側から簡単に書き換えられる

ことが必要でした。

トーナメント表を作る

過去に見たことのある記事を参考に実装しました。

https://qiita.com/laddge/items/41c3d1e85b4300a6ccf1#トーナメント表示

この記事のソースコートでは描画にJinjaを使っていたので、Jinjaを調べながら丸1日かけてJSXに書き換えました。また、クラスの数や縦と横を変更したり、DBのデータを描画できるようにするために、かなりの時間を要しましたが、divでトーナメントを描画するアイディアは思いつかなかったのでとても助かりました。

編集機能

生徒会のみが編集できるようにするために認証をつけました。しかし、時間がなかった(=計画的に開発してない)ため、NextAuthのCredentialProviderを使って、パスワードのみの認証をつけました。(かなり雑で簡易的。褒められる実装ではない)

編集画面はこのようにして、スマホでも簡単に編集ができるようにしました。

無料で動かす

無料で動かしつつも、全校生からのアクセスに耐えうるインフラを用意する必要がありました。DBは使い慣れたmongodbAtlasを使うことは考えていましたが、APIサーバーをどうするか悩みました。しかし、時間がなく(計画的じゃない開発)、デプロイにかけられる時間に限りがあったので脳死でVercel+Next.js(API Route)を選択しました。

開発の流れ

5月

アプリを作ることが決まって喜んだ

6月

はじめ

トーナメント表の描画をどうするかひたすら考えていました。アイディアはパクったのでアイディアだしには時間がかかりませんでしたが、自分の要件に落とし込むのにかなりの時間がかかりました。

なか

「前期中間考査→開放感」のため、あまり開発が進まなかった...

さいご

だいぶスポーツ大会が迫ってきたため、本気の開発をはじめました。muiとantdが共存していたり、初めてのSSRやISRに戸惑ったりしながらの開発で、効率が悪かったです。(デザインの経験がないことも原因)

期限が本格的に近づいてきてからは、タスクを書き出して、わかりやすいコミットメッセージにしながら開発したため、デバッグやタスク管理が楽になりました。

7月

あと2週間しかないのに、会長に提出するタイミングで不具合や実装のミスに気づきました。いそいで修正して、1週間前に滑り込みで開発が終了しました。

発生した問題

SSRとAPIRouteが遅い

Vercelは内部的にlambdaを使っているそうなのですが、なぜかコールドスタートに時間がかかりすぎてタイムアウトすることがありました。SSRをやめてISRにしたり、リージョンを変えたりしましたがうまくいきませんでした。

最終的に友人の響くんに頼んで{uuid}.4513echo.devというドメインを借りて、個人的に使っていた(←大事)VPSにもアプリをホストして対応しました。

閲覧はvercelから、編集はVPSから行うようにしていて、短いスパンでのISRの再生成を設定していたため、閲覧側の不具合が一切なく、快適に編集することができました。

同点問題

同点の時の処理を後回しにした結果忘れて、本番2週間前に気づきました。さらに酷いことに、種目によって同点処理が異なっており、同点をバリデーションエラーにする、同点の時は最高点を入力する、セットごとに点数を入力しないでセット数を入力する、などの変更に2,3日かかりました。

当日

なんと、ミス(アプリ側)無しで成功🎉🎉🎉

生徒会内部で結果報告の遅れがあったりして、アプリ上での更新が遅れることはありましたが、アプリのバグや鯖落ちなどなく終えることができました。

アナリティクスはこのような感じでした。

全校生が840人なので、7割以上の人がアクセスしてくれたことになります。びっくり...

VercelのUsageはこうです

いやいや、200MBってなに！？チューニングが雑だったこともありますが、webページでこの帯域はびっくりしました、

リクエスト数もビルドした数も、過去一で、ようやくまともなサービスを仕上げることができるようになったんだなぁと感動しました。

反省

• 情報伝達がうまくいかなかった
• 計画的に進められなかった
• デザインが微妙だった
• 動作が重い(未チューニング)
• データ構造が洗練されておらず、機能の拡張が事実上不可能

などが挙げられます。

来年できるかはわかりませんが、もっと計画的に開発して質の良いものを作りたいです。

感想とまとめ

• ドメインを貸してくれた響くん
• スマホがわからない原始人にデザインのアドバイスをしてくれたみやくんとえむくん
• アプリを生徒会として承認してくれた生徒会長
• 使ってくれたみんな

かなりの人に支えられたなぁと感じています。ありがとうございました。

高校生活初めてのアプリ制作でした。中学からプログラミングをしていてよかったなぁとも思いました。お金ではなく、自分の成長のためにプログラミングをするのは学生じゃないとできない経験です。これからも学校に関わるアプリを作りたいし、個人開発もしたいし、プログラミングを続けたいと思っています。