はじめに
今回この記事を書こうと思ったのは、初のハッカソンとはいえ、事前に開発期間を多めに取ったのにボロ負けしてしまったのが悔しかったからです。だから、この記事が次のハッカソンに活かせればと思っています。あと、もしハッカソン未経験の学生の方が見てくださっているのなら、ご参考になればと思います。
今回参加したハッカソンと概要
サポーターズ様が開催する【技育CAMP2024】ハッカソン Vol.14(テーマあり)【オンライン開催】に参加しました。2dayのオンライン開発合宿であるものの、キックオフ以降から1週間ほど開発期間があり、テーマは「祭」でした。参加した経緯は、仲の良い研究室の同期や先輩、後輩と前々から一緒にハッカソン出てみようと言っていたのと、夏のインターンに恵まれなかった私は、授業や研究室などそれ以外の機会で開発経験を積みたいというのがありました。
ハッカソンで作成したWebアプリのリンク＆Gitリポジトリ(フロント・バックエンド)
「OnFES」WebアプリのURL:
※レスポンシブ対応が完全ではないので、ぜひPCなどの横幅のあるデバイスで使ってみてください！また、無料サーバを使っているため、アクセス時に「Loading...」と出ることがあります。その際は1分ほどお待ちしますと「自己紹介一覧」等がご覧いただけます。
「OnFES」フロントエンドリポジトリのURL:
「OnFES」バックエンドリポジトリのURL:
本題
前置きはこれくらいにして、早速本題に入ります。
参加メンバー
私が所属する研究室のM2が1人、M1が2人、B4が1人の４人チームで参加しました。M2の先輩はハッカソン優勝経験があるフロント・バックエンドどっちもできる優秀な人で、同期のM1はバイトで約1年半フロントエンドの経験があり、後輩はフロント・バックエンドどちらも未経験なものの、大学で優秀な成績を残していました。私はというと、バイトでフロントエンドを半年程度触ったことがあるだけで、しっかり学んできたのは授業や研究、ETロボコンでのCやC++、Pythonぐらいしか知識がありませんでした。
アイデア出し
ハッカソンのキックオフが終わった当日にすぐアイデア出しを行いました。今回の技育CAMPハッカソンのテーマ「祭」について、数時間考えて以下の３つの案が出ました。
- 技育祭などのオンラインフェスのサブブースとして機能する自己紹介や各種アカウント、個人開発物などを紹介するブースを出せるWebアプリ
- 夏祭りなどのお祭りで使える、出店などを含むマップを表示し、各出店の現在の空き具合や売り物の情報、ステージでの発表内容や遅れ具合などを知ることができるWebアプリ
- 祭を経営する経営シミュレーションWebゲーム
上記のどれにするかをSlackのチャットに番号を打ち込んで多数決で決めました。最初の結果は1.が2人、2.が2人で意見が割れました。その後、選んだ理由を言い合い、最終的には、1.のオンラインブースに決まりました。
開発
アイデア出しが当日に終わったことから、翌日から開発が始まりました。
初期
まず、開発を進める上で、今回作るWebアプリに必要な機能や画面遷移図、画面レイアウトなどを大雑把にホワイトボードに書いてまとめました。私たちの場合、自己紹介や成果物などを閲覧・投稿できる機能を必須機能として挙げ、それらについてバックエンドからの視点で、CRU(Create, Read, Update)のそれぞれでどういうデータを入力として受け取り、何を出力として返すべきかを決めました。また、開発期間が1週間と限られているため、サインアップ・ログイン機能を実装するのかどうかなど、必須ではないけどあったらいいよねっていう機能をあらかじめリストアップしていました。特に、サインアップ・ログイン機能は必須機能の入出力に関わってくるため、この時点で実装するかしないかを慎重に話し合いました。
また、開発準備として、フロントエンド用リポジトリとバックエンド用リポジトリを作成し、技術選定も行いました。技術選定は以下の通りです。
フロントエンドの技術選定
・言語: TypeScript
・UIライブラリ: React
・CSSライブラリ: TailwindCSS
・ルーティング: Tanstack Router
・ランタイム: Node.js
・ビルドツール: Vite
・開発ツール: Storybook
・コードフォーマット/リンター: Biome
バックエンドの技術選定
・言語: Go
・フレームワーク: Gin
・データベース: PostgreSQL
・ORM: Gorm
・開発ランタイム: Air (ホットリロード用)
・管理ツール: PgAdmin
インフラストラクチャの技術選定
・コンテナツール: Docker
・ホスティング: Vercel (フロントエンド), Render.com (バックエンド)
・データベース: PostgreSQL
次に、フロントエンド担当とバックエンド担当を決めました。M1の同期とB4の後輩がフロントエンド、M2の先輩と私がバックエンドを担当しました。私はGo言語未経験かつ、レイヤーアーキテクチャについての知識がほぼなかったため、M2の先輩に一からそれらを含めエンドポイントの作り方を教えてもらいました。（先輩本当にありがとうございます。）依存性の逆転には依存性の注入が必要で、それを実現するためにドメイン層というのがあり、そこにユースケース層やインフラ層がアクセスすることで変更に強くなったり、モック化してテストしやすくなったりなどいろいろ教わりつつ、モブプロで「成果物のPOST用エンドポイント」を実装することができました。
フロント側の状況としては、B4の後輩も私と同じようにReactなど未経験だったため、M1の同期に教わっていました。
中期
ある程度レイヤーアーキテクチャの概要を理解し、自力でエンドポイントを作成してみようという段階になり、実際に四苦八苦しながら「自己紹介のPOST用エンドポイント」を実装しました。初めて自力で実装できた時、思わずX(旧Twitter)でそのことをつぶやいてしまいました(笑)。その後も、エンドポイントを1つ実装できました。
フロント側の方も、自己紹介や成果物を表示する用のカードやモーダル作成、トップページ、自己紹介投稿ページなどの画面がある程度作れている状態になっていました。
後期
発表前日になると、最低限の機能と画面が出来上がっており、あとはデプロイして全体を通して動くかの確認をしました。しかし、ここで、デプロイが中々成功しないということが起きました。発表当日の６時間前ぐらいまで粘ってなんとかデプロイできるようになったのですが、とてもこの時はヒヤヒヤしました。あとは、追加機能として、マッチング機能を追加したり、webアプリのロゴを考えたりなど最後の詰め込みをしました。そして、コードフリーズ（開発終了）の通知が運営からきたら、あとはプレゼンテーションを作り上げるのみとなりました。なんとか、デモ動画を撮り、全員でプレゼンテーションをできるだけ良くしました。ただ、プレゼンテーションの作成だけで手一杯となってしまい、発表練習がほぼできていない状況でした。
発表
発表は3分間という短い時間でプレゼンをするというものでした。私たちのチームは最後の組として発表することになり、緊張の中、発表を無事終えました。全てが終わった瞬間、ドッと疲れと安心感が出ました。
発表スライド:
結果
結果として、私たちは惨敗しました。他のチームと比べて開発期間を多めに取ったはずなのに、賞が取れなくて悔しい思いをしました。原因はある程度分かっていたのですが、1つはあまりテーマに沿ったものではなかったのと、もう一つは発表の配分が悪くてデモ動画を全て流すことができなかったのが勝敗を分けた気がしました。（あと、賞を取ったチームはやっぱりアイデアがユニークだった。）
賞を取ったチームの特徴
・スライドの作り込みが一目で見て凄かった（UIに富んでいた）
・文字が少ない、大きくて見やすい
・話しの入りが良かった（形式ばった言い方でなく、見てる人に問いかけるような話し方）
・チームにデザイナーがいると強い（技術スタックのロゴを自作していたチームがいて、視聴者の反応が良かった）
まとめ
今回のハッカソンで学んだことは、
・テーマにしっかり沿ったものを作る（アイデア出しに時間をかける）
・直感的に伝わる分かりやすいスライドにする（そのためにスライド作りの時間を多めに取る）
・発表では多少誇張してでも作ったものが凄く見えるようにする
・発表練習は絶対行う
という教訓を得ました。この教訓を忘れずに、次に繋げたいと思います。