[ハッカソン]初参加から最優秀賞を2連取した話
はじめに
こんにちは、27 卒で TypeScript エンジニアを目指しているいもけんです 🍠⚔️
今回は、ハッカソン初参加でありながら最優秀賞を 2 連取した経験をもとに、ハッカソンで賞を取るための思考をまとめてみました
この話にどこまで再現性があるかはわかりませんが、自分のためにも言語化しておきたいと思います
今回参加したハッカソンと概要
今回参加したハッカソンは、技育 CAMP ハッカソンの vol.7 と vol.9 です
説明する必要もないくらい有名なハッカソンですが、サポーターズ様が主催する開発期間一週間のハッカソンです
今回は何を作ったかについては割愛しますが、
気になる方はツイートや GitHub リポジトリを見ていただけると嬉しいです
公式からの最優秀賞受賞ツイート
vol.7: https://x.com/geek_pjt/status/1804802633078800473
vol.9: https://x.com/geek_pjt/status/1814952212248117445
GitHub リポジトリ
vol.7: https://github.com/mst-mkt/chefcam
vol.9: https://github.com/imoken777/3D-Navi
本題
時系列順に書いていきたいのですが 2 回分のハッカソンを全て書くと長くなりすぎるので、共通していた思考をまとめてみます
メンバー集め
2 回とも事前にチームメンバーを募る形で結成してから参加しました
私は「INIAD.ts」という TypeScript の開発サークルに所属していて、ほぼそのメンバーでチームを組みました（どちらも 4 人）
とはいえ、組んだメンバーの開発力はバラバラで私よりもツヨツヨな人もいれば、開発を初めてから 3 ヶ月ほどの人もいました
私がメンバーを募ったということもあり、2 回ともチームの PM 的な役割だと自負して活動していました
アイデア出し
ハッカソンの初日には、必ず対面で集まってアイデア出しを行いました
その際には、以下のようなことを意識していました
- 現実世界との繋がりを持たせるなどインパクト、驚きを与える案
- 自分たちの得意分野である TypeScript を活かせる案
- 開発期間 1 週間で完成度 9 割以上が見込める案
ハッカソンはアイデアソンでもなく、ビジネスコンテストでもないので、必ずしもめちゃくちゃすごいアイデアじゃなくてもいいと思っています
多くの人が思いつき過去に似た作品がある案であったとしても、それを遥かに上回る完成度で作ることが大事だと考えています
アイデアで行き詰まったときはみんなでご飯を食べに行ってました、今回の 1 つはその際に出た案でした
開発
さて、アイデアが決まったらいよいよ楽しい開発です
初期
- どのような機能を実装するかを決める&タスクの列挙
メンバーが何をすればいいかわかるように、遷移図を書いたり(汚いですが)、Discord にタスクを書いたりしました
それらと同時に、技術選定をする
- メンバー全員がわかる TypeScript と React 主軸
- モノレポで型共有可能なバックエンド(今回はHonoとfrourio)
↑ 開発速度がとても早くなり、型安全でミスも抑えられるのでおすすめです - それぞれの機能のためのライブラリで代表的なもの(LangChain, Cheerio, Three.jsなど)
メインの技術は使い慣れたもの + それぞれの機能や細部で初挑戦のものを使うという塩梅が賞を取りに行きつつ、学びにもなるいいバランスだと感じました
上記技術で私が初めてだったのは、Hono, LangChain, Cheerio, Three.js です
他にも Tanstack Router, tailwindcss, mapbox-gl-js なども初めて触ることができて学びも多かったです
- できる限り早く環境構築をし、チーム開発がスムーズに進む環墋を整える
- linter, formatter, CI
- ブランチとレビューのルール
- PR テンプレート
- Discord と GitHub の通知連携
平日は学校もあり皆が対面で集まれる機会も減るので、こういった環境を整えておくことが大事だと感じました
- タスク分担
デザインは後回しで機能の実装を優先し、メンバーの得意分野かつコンフリクトが起きにくいようにスパッと分けました
とはいえお互い相談したり、タスクを入れ替えたり柔軟に対応していました
中期
開発過程で大事にしていたことは進捗確認と相談です
Discord の@everyone やメンションを飛ばすことでオンラインあるあるのコミュニケーション不足を補うことを意識していました
vc や画面共有をしたり、対面で相談したりもしました
入りやすいように自分がずっと vc にいることもありました
機能が完成してきたら、UI を整える作業に移りました
賞を取るためには機能と同じかそれ以上に UI, デザインは大事で、圧倒的な完成度で見ている人に驚きを与え、ひと目見て綺麗だと感じるものを目指しました
↑ この部分はチームメンバーがめっちゃ頑張ってくれました
「そんなとこまでやる？」というところまでやることで、他のチームとの差別化を図りました
- ローディングアニメーション
- ドラッグ操作やドラッグアンドドロップ
- OGP や favicon の設定
後期
日曜日が発表日なので、金曜日には 8 割方完成させて、土曜日にはデプロイとスライドの作成をしました
デプロイはハッカソンにおいて必須級だと考えています
デプロイすることで実際に使ってもらうことができて、そのときに驚きを感じてもらえるからです
スライドも「作り出すの早くない？当日でいいじゃん」と思うかもしれませんが、賞を取るためには作品の開発と同じくらい力をいれるべきだと考えています
なぜなら
-
すごいものを作っても伝えなければ意味がない
-
他のチームとの差別化ができ印象に残る
↑1 週間という短い期間のため参加者の多くが開発に精一杯でスライドを作り込んでいないことが多いので、ここで差をつけることができる -
デプロイしても全員に使ってもらえるわけではない
といった理由があります
また、過去の最優秀賞受賞者のスライドを見ると、どれもスライドの完成度が高く、ひと目見て「これは最優秀賞だ」と感じるものが多かったので自分たちも力を入れました
ちなみにスライドはこんな感じでした
どちらも印象に残るものになっていると思います
発表
発表は 2 分間 ~ 3 分間で zoom の画面共有を使って行います
初回はチームメンバーが、2 回目は私がスピーカーを務めました
発表に関してはもっといい記事があるのでここでは特徴的なことだけ書きます
- ラグを考慮しスライドのアニメーションは最小限
- デモと同時に slack にデプロイ済み URL を貼る
- 最後にチーム名をもう一度言う
緊張はしますが、自分たちの作品とスライドを信じて落ち着いて発表するように意識しました
まとめ
以上が、ハッカソンで最優秀賞を 2 連取した際に意識していたことです
自分だけではなくチームメンバーもたくさん考え、行動してくれたことでこれだけの結果を出すことができました
1 週間という短い期間でありながら、この「目標を設定し、そのためにできることはすべてやる」という経験は、私を大きく成長させてくれました
改めて、開催してくださったサポーターズ様や参加してくれたチームメンバーにはとても感謝しています
色々書きましたが、これらはあくまで私の考えなのでこれでハッカソン参加のハードルが高いと感じないでほしいです
技育 CAMP ハッカソンは初心者歓迎のとても楽しいお祭りなので、
ぜひみなさんも参加してみてください！！
最後まで読んでいただきありがとうございました 🙇♂️
PS: Twitter ぜひ繋がってください！
Discussion