はじめに
ハッカソンの概要
サポーターズ主催の「技育CAMPハッカソンvol.17」に参加をしましたので、共有したいと思います。
サポーターズさんのハッカソンの特徴としては、「初心者大歓迎」なところです。このハッカソンでは、約7割が初ハッカソン参加にもかかわらず、メンターや運営様のおかげで最後の成果発表までしっかりと到達しています。また、一人でも申し込むことができて即席でチームを組んでくれます。私も今回即席で参加しました。
参加理由
1.チーム開発を経験したかった
エンジニアを目指す一つの理由としてチームで働きたいという意思があったので実際にチーム開発を経験してイメージをつけたかった
2.自分の技術力が通用するのか腕試し
限られた時間の中でどこまで力を発揮できるか、つまり今の実力を知りたかったし、自分の課題を明確にしたかった
流れ
1.キックオフ（10月25日(金) ）
ここでハッカソンのながれを説明され、グーグルフォームで参加するかを提出します。
技術マウントをとる奴は寒いのでやめてくださいだとか。初心者歓迎だが、ある程度は経験がいるし、アイデア出しだけだとチームメンバーに迷惑だとか。アンケートを取って参加している人がどんな人か。後、技術力以前に連絡などをしっかりしようやなど。やっぱり初心者歓迎と謳ってはいるものの何の知識もない人やアイデアを出しに来ている人だったりやり抜く意思のない人はお断りだけど、意思のある初学者の方は大歓迎だよみたいな意思決定の上参加をするか判断させてました。
2.事前開発期間（10月25日(金)～11月1日(金)）
私みたいな即席のチームはなるべく早くチームでコミュニケーションを取って何を作るかや技術選定、要件定義、UI、GitHubの確認などをチームで共有し、できるだけ早くタスクを切ってコードが書ける状態にしてプロダクト進行していけるかが重要だと思いました。ただここでのイメージの共有はかなり重要なのでしっかりイメージが共有できていないのに進めてしまうのは逆効果です。
3.ハッカソン（11月2日(土) 11:00 〜 11月3日(日) 19:30）
この土日は、日曜の3時までは開発できるのでひたすら開発です笑。ただチームメンバーと通話などしながらですし、この期間はサポーターズのメンターの方に質問できるので意外と楽しく開発できました。日曜の3時以降に資料作成（出来れば早めに作っといた方がいい）、発表、授賞式、懇親会など行います。
ハッカソンの制作物
リポジトリ
フロントエンド
バックエンド
概要
- Notionみたいな原稿をマークダウン形式で書く
- Sectionやタイトルごとにタイマーを設定できる（ユーザーが自由に設定）
- スライドと連携できたらいいよね
背景
- 発表で使用する原稿は多くの時間と集中力を必要とする
- 従来の原稿作成では時間管理が難しい
- 発表時にペース配分の課題がある
- Markdownでの原稿作成と時間管理機能を統合
- 効率的で計画的な発表が可能に！
技術（◎=初挑戦）
フロントエンド (TypeScript)
- React：UIライブラリ
- TanStack Router：ルーティング用ライブラリ◎
- TanStack Query：データフェッチやキャッシュ管理を行うライブラリ◎
- MUI：cssフレームワーク
- DateFNS：日付の操作を行うライブラリ
ツール (Tools) - Storybook：コンポーネントの開発やドキュメント化を支援するツール◎
- Vite：ビルドツール
- pnpm：パッケージマネージャ（npmの代替として使用）◎
バックエンド (Python) - FastAPI：PythonベースのWebフレームワーク◎
- OpenAPI：APIの定義やドキュメント化に利用◎
- Orval：OpenAPIをもとにクライアントコードを生成するツール◎
データベース (DB) - Supabase：PostgreSQLベースのバックエンドサービス
- MongoDB：NoSQLデータベース
CI / デプロイ (CI / Deploy) - GitHub Actions：CI/CDパイプラインの自動化◎
- Cloudflare Pages：フロントエンドのホスティングサービス
- Render：バックエンドのホスティングサービス◎
技術的挑戦（フロントエンド担当）
-
1.TanStack Router,TanStack Queryの導入と活用
- ルーティングライブラリであるTanStack Routerを使用し、シングルページアプリケーション（SPA）のルーティングを実装
- TanStack Queryを活用し、サーバーからのデータ取得やキャッシュの管理を効率的に行った
-
Storybookによるコンポーネント開発とドキュメント化
Storybookを初めて導入しました。これを通じて、UIコンポーネントを独立して開発・テストできた -
GitHub Actionsを用いたCI/CDパイプラインの構築
初挑戦となるGitHub Actionsを利用して、自動テストやビルド、デプロイのワークフローを構築 -
OpenAPIとOrvalを活用したフロントエンドとバックエンドの統合
ここが一番大変でした。バックエンドの知識があまりなく、貢献できなくて悔しかった
学んだこと
チームでどのように開発するのか
Gitプルリク、issue、タスク管理にGitHubProjectsなど実際にチームで使用して実務での運用イメージがついた。後、意見共有の大変さに尽きると感じました。意識したことで意見の共有を挙げましたが、開発当初はこの意識が薄かったように思います。意見や意識の共有がなされていないまま開発を進めていってしまい、実装のイメージが違いコンポーネントごと作り直すみたいなことがありました。意見の共有をしてそれぞれの役割というのを明確化することを意識するようになりました。
技術的に
チーム開発でこんなにも新しい技術に触れると思っていなかったが、これもチーム開発の醍醐味なのかなと思いました。やっぱりチームに貢献したいという気持ちや焦りからキャッチアップしてアウトプットを繰り返したので、技術力っていう点や新しい技術に触れるという点でも成長できた。ただフロントエンドエンジニアでもバックエンドの知識を網羅しないと、チーム開発においてお話にならないことが実際にチーム開発を経験することで改めて実感したのでそうゆう自身の課題も見えてきた。また、デプロイまで出来なかったのでフロント側だけでも持っていけたらと思います。
結果
残念ながら賞の受賞はできなかったですが、初めてのチーム開発や、ハッカソンの経験は大きな財産となりました。またなんといってもチーム開発はほんとに楽しかったです！！今後もハッカソンに参加したいし、就職した後もチームでプロダクトを創って人や社会に約立てるプロダクトを創っていきたいなと再確認できる機会となりました！
最後に
ハッカソンに出るか迷ってる学生さんは結論今すぐ参加するべきだと思います。私も直前まで技術力に自信がなく迷っていましたが、勇気を出して参加してめちゃくちゃ良かったです。悩んでいるならまず行動するべきだと思います！技術レベルが追い付いてなくてもチーム内でできる役割はたくさんあるし、短い期間で自分に足りない点が明確になり、技術レベルがグンと上がること間違いなしですし、チーム開発意外と楽しいですよ！