Zenn
😳

ハッカソンに出たはずが長期チーム開発をしてる話

2025/03/06に公開
Flask
React
Swagger
ハッカソン
Supabase
idea

こんにちは

先日、2/26 ~ 2/28の3日間で「PR TIMES HACKATHON 2025 WINTER」に参加させていただきました。 僕自身、人生初ハッカソン&チーム開発でしたがかなり濃い経験を得ることができました。今回、タイトルにある通りハッカソンレポートにするつもりでしたが、なぜか今でも開発が続いてるので....
このようなタイトルにさせて頂きました！
それではよろしくお願いします。

PR TIMES HACKTHON　とは

PR TIMESさんが毎年夏、冬で実施する3日間のハッカソンです。チームを3,4人程度で組んで、与えられたお題に合わせて成果物を作っていきます。
今回のお題は
「夢の発信を支援するサービス」
でした。
また、後から知ったのですがPR TIMESさんは新卒の採用をハッカソンでしか行ってないようです。ですので、気になる方、PR TIMESに入りたい方はぜひ参加してみてください！！

結果

本当に悔しい思いをしました。チーム開発での自分の動き方、チームのモチベを保ちながら一つのプロジェクトを進めていくことの大変さをかなり感じました。また、僕自身の技術力の低さと参加者のレベルの高さを知ることができたので、まだまだ精進するべきでした。

1日目

1日目は、前泊していたのでゆっくり11時ごろに本社に向かいました。初めて赤坂に訪れたのですが、本当に坂が凄くて僕はホテルと本社を行き来するたびに坂を登り下りしてて良い運動でした。。。。

アイデア出し

グループメンバーと合流して、どんなものを作るかを一緒に考えました。作るものの根幹になると思ったので、とにかく納得がいくまで話し合いました。（今思えばここで時間を使いすぎたかもしれません）
僕らがやったのは

  1. Miroでとにかくアイデアを出す
  2. 発表し合って各自数を減らす
  3. KJ法を使ってグルーピングする
  4. 作るものの具体化&ペルソナ設定

といった順番で行いました。
Miroでこんな感じにしたり

Notionでペルソナをまとめてみたり

色々話していく中で、夢がある状態は

  • すでに決めて、SNSや人などに話している
  • 頭の中でパッと思いついたり、考えてはいるけど言ってない

この0か100の状態にあるのが問題だと考え、まずは書き出してみる、そしてクローズドかつ匿名な環境で公開し、自信をつけてからSNSや人に発表できるサービス(DreamSink)を作ることにしました。

開発&技術選定

大体1日目の14,15時から開発などを開始しました。
今回のメンバーは

  • 僕：最近プログラミングを本格的に勉強開始、卒研でFlask,今はRailsを勉強中
  • きむ：京都より参った激強エンジニア(M1)、バックエンドもできるかと思えばフロントまでできてしまう人
  • しず：なんと文系学部なのにエンジニア志望で勉強を頑張ってるB2、フロントエンドを担当してもらいました

といった構成になります。分担としてはバックエンドは僕、きむ、フロントエンドはしず、きむで行いました。
技術スタックは、

  • バックエンド：Python(Flask), PostgreSQL
  • フロントエンド：React, React Router, Tailwind CSSなどなど

きむと僕の共通で、僕がそこそこ使えるのがFlaskだったので採用し、PR TIMESの事前課題の関係でPostgreSQLを使用しました。フロントエンドはメンバー全員が共通してある程度知っているのでReactを使用しました。
構成としては、

  • Flask：APIサーバー
  • React(+TS)：フロントサーバー

として組み立てました。

また、大雑把ではありますが僕が仕様書などをまとめて開発の方向性を明確にした上で開始できたので割と良いスタートを切れたのではと思ってます。
結構良さげに仕上げてはいました....

そして、1日目は僕がAPIサーバーのログイン画面を作成し、ログイン画面のUIをきむとしずが作り、マージして終わりました。

2日目

個人面談

このハッカソンは採用も兼ねているので、30分ほどの面接を人事の方とさせて頂きました。自分が学生時代にやってきたことや、なぜエンジニアとしてその目標を持っているかなどを質問されました。面接というほど重苦しくはないのですが、詰まってしまわないように自分が今までやってきたことなどをまとめてから望むといいかもですね！

開発

ひたすら開発しました。
フロントエンドの画面作成はメンバーに任せましたが、作成物の齟齬がないように僕がCanvaでモックを作成し、それを元に作って頂きました。お昼過ぎらへんで作成すべきAPI機能とデータベースは作成できたのですが、実際フロントと繋ぎ合わせてみると

きむ「あれ、、、ログインすらできないじゃん」

最初の画面状態から動きませんでした。探ってみるとFlaskのログインとその管理機能「Flask-login」の認証がうまく行っておらず、そもそもこのコードを書いた僕がどういった仕組みでログインができるのかを十分に理解しない上でトラブルが起きてしまいました。ここでかなり時間を使ってしまい、ログイン機能に執着しすぎたところがハッカソンとしては、ダメでした。結局、夕方にログイン機能をハリボテにすることにし、ようやく順調に進むかと思いきや、フロントが期待するレスポンスと僕が作ったAPIが返すレスポンスの不一致が発生し、手戻りが発生してしまいました。後から知りましたが、SwaggerEditorを用いてAPIについて共有する資料をまとめておけば、起きなかったことでした。

3日目

開発

2日目はかなり大変でしたが、なんとか動くところまでは漕ぎ着けました。そこからは、フロントエンドのUI改善や表示順、それに伴うバックエンドの改修を行いました。

発表

まさかのトップバッターで発表を行いました。最初だったので良かったですが、発表し終えた後に他のチームの完成度の高さにかなりショックを受けたのを覚えています。質問で、「どのようなビジネスモデルにするか」、「仕様の意図」について聞かれて少し大変でしたがなんとか答えれました。

表彰

残念ながらダメでした....
ただ、受賞している参加者の方々のフィードバックやプロダクトを見ると

  • 技術力
  • チーム解決力

この2点で非常に優れているなと感じました。今回僕はチームでまとめることを意識して動きましたが「とにかく動けばいい」というマインドで進めてしまったことで、「サービスとしての使いやすさ」や「完成度」といった部分までこだわることに欠けていたと振り返れました。また、チームの雰囲気も和気藹々というほどでもなく、ただひたすら黙々と開発している感じでしたので、もっと改善していけるように動けたなと思いました。

終わった...と思ったら？

そうです。これで本当は終わりにする予定でしたが、このまま悔しい記憶で終わるのが嫌だったので、ハッカソンが終わった日の夜から、チームメンバーと話してもう一度開発を進めることにしました。

やりたいのは僕だけかな...と思ったけど、一緒に開発してくれた2人は本当に感謝しかないです。
ここから、今日まで

  • フロントエンド：Vercel
  • バックエンド：Render
  • 仮想環境（開発用）：Docker
  • データベース：Supabase

のデプロイ構成で、時間がなくて追加できなかった機能やUIの開発を行い、、、ついに

デプロイできました！！

なんとかここまで持ってこれました。改めて開発していく中で、「なぜあそこで詰まったのか？」「どういう原因だったのか？」を振り返りながら、今後開発&デプロイを行う上で便利なツールなどについても勉強できたので、とてもいい経験になりました。
悔しかったけど、精進あるのみです。

最後に

ここまでみてくれてありがとうございました！
普段は大学で、一人で開発することが多く、同年代でプログラミングを頑張っている人とあまり会うことができなかったのですが、非常にレベルの高い方々と会えた経験が宝物でした。PR TIMESのメンターさんも非常に親切で、優しい方ばかりだったのでみなさんぜひ参加してみることをお勧めします。

Discussion