Qiita Hackathon 予選振り返り

先日会社の同期と外部のハッカソンに参加してきました。
非常に楽しくも悔しくもあるハッカソンでしたので、振り返って供養しようと思います。

# ハッカソンの概要
今回参加したのは、Qiita 株式会社が運営する「Qiita Hackathon」です。
期間: 2024年2月10日(土)・2024年2月11日(日)
場所: オンライン

https://qiita.com/official-campaigns/hackathon/2024-first

## スケジュール
1日目の朝にテーマが発表され、そこから作業が開始されます。
2日目の14時が成果物ドキュメント提出締め切りなので、コードフリーズはもう少し手前に設定しました。

| 1日目 |  |
|:-:|:-|
|  10:00 ~ 10:50 | オープニング（テーマ発表・諸注意、出場チーム紹介、審査員紹介）  |
|  10:50 ~ 18:00 |  ハッカソン |
|  2日目 |   |
|  10:00 ~ 10:10 |  オープニング（諸注意・スケジュールご案内） |
| 10:10 ~ 13:00  |  ハッカソン |
| 13:00 ~ 14:00  |  成果物ドキュメント提出締め切り |
| 14:30 ~ 17:00  |  成果発表（1チーム3分のアイディア発表） |
| 17:00 ~ 17:30  |  休憩・自由交流会（ZoomとかDiscordとか）・選考 |
| 17:30 ~ 18:00  |  予選結果発表、クロージング |

## テーマ
テーマはズバリ「つながり」。広すぎやろ...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725970/396c9c6c-80b0-4f2e-ef25-b124e0fab3e5.png)


# 作ったもの
で、結局作ったものはこちら。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725970/d24135b6-868d-61fa-6488-b82ecc5bdaf3.png" width="350"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725970/d5ec3503-66f3-ff9f-0e6c-95ec08fb4831.png" width="350"> 

複数人で飲む場所を決める際に、皆がちょうど行きやすい場所を探してくれるアプリです。
最寄り駅を登録すると、所要時間が短い順に駅を提案をしてくれます。


## 技術構成
バックエンド: Python, FastAPI
フロントエンド: TypeScirpt, React, Next.js, Mantine
インフラ： Vercel, Render

できるだけ機能開発に専念できるよう、シンプルで開発効率が良い技術を選びました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725970/5bbe7216-9431-dd6d-fe41-ca4fe25d252d.png)

## 結果
残念ながら予選敗退でした...
サービス自体は結構自信作でしたし、メンバーとも決勝行きたいねーと話していたので、かなり悔しかったです。

https://x.com/haru_0_4/status/1756644249175810514?s=20

審査基準の「技術力」の部分で、他チームに見劣りしていたこと要因の一つとしてありそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725970/a6e04d9d-63ee-ad0f-c768-af3299e3e816.png)

ただ、限られた時間の中で、ディスカションを通じてメンバーが持っていた課題を確実に解決できるプロダクトを、形にできたことは良かったと思います。
途中使用予定だった API が諸事情で使えないなどのトラブルもありましたが、最後まで諦めずに共に奮闘してくれたメンバーたちには感謝しかないです。

## 学び
自分は主にバックエンドの開発を担当していました。採用した Python や FastAPI は今回ほぼ初めて使ったので、基本的な文法から調べながら何とか実装しました。
pydantic というデータのバリデーションや型ヒントを提供してくれるライブラリを使うことで、動的型付け言語で型を指定をするという試みをしましたが、型を内部でどう処理しているのかあまりイメージできず、恩恵を感じることが多くなかったので、 Python の型はもう少し学習が必要だと感じました。
一方で、FastAPI や SQLAlchemy といったツールのおかげで、少ないコード量で効率的に API 開発ができたので、選択して良かったなと思います。

また、終盤はフロントエンドの開発にも少しだけ参加し、フリー画像をAPIから取得し、加工して画面に表示するという簡単な処理を Next.js で書きました。
名前は聞いたことがあるけど、使ったことがなかった SSR やデータフェッチを扱う良い機会となりました。

## 反省点
技術力・経験不足です。
もう少し実装が早かったり、エラーの対応ができれば完成できた機能もありました。
自分個人としても、他のメンバーから一目置かれるような武器となる技術領域を持ってなかったことが裏目に出るシーンがありました。
今回のメンバーには、バックエンドもフロントエンドそれぞれに、とても頼れるメンバーがいたので、分からないところはカバーしてもらい、何とか前に進めることができました。
彼らのことを本当にかっこいいなと感じましたし、同時に不甲斐ない思いもしたので、同じように特定の技術領域に関しては頼られる人になりたいと思いました。

その他技術的な課題を感じた点は以下です。
- コンテナ技術
    - 今回はメンバーがサクッと Docker で環境構築をしてくれましたが、やはり開発においては必須のツールで、必要性を強く感じました。逆にこの辺りの知識を有していることは武器にもなり得ると思ったので、しっかり身に付けたいと思います。
- Git
    - 開発時によく起こる問題に対する対応パターンはある程度持っておくと、もっと重要な作業に時間を割けると感じました。
- API 開発
    - 開発状況に応じて、データを一旦モックで差し替えるとか、簡単なレスポンスを作成してからステップバイステップでAPIを構築していくとか、柔軟に対応できるようなれると強いなと感じました。
    - あと、フロントエンド・バックエンドそれぞれ最低でも一つの言語やフレームワークは手足のように使えると、武器になると思いました。

### （余談）作れなかった機能
- Google Map 表示
以下の機能は、コンポーネントの実装自体は完成していたのですが、繋ぎ込みの部分で予期せぬ不具合に遭遇し完成しきれませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725970/a1613f43-e92d-4326-3642-7ec92dd84865.png)

- 初回チュートリアル
こちらは、初めて使う人向けにチュートリアル形式で各機能の使い方を紹介する機能です。
開発初期のスコープには入ってはいませんでしたが、途中でメンバーが提案してくれたので導入を検討しましたが、時間切れとなり、惜しくも完成には至りませんでした。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725970/8931be4d-a265-934d-1303-344180ed3216.png" width="350">

# まとめ
今回は先日参加した Qiita Hackathon での経験を紹介しました。
素晴らしいチームメンバーに恵まれ、途中何度かトラブルにも見舞われましたが、最後まで楽しく走り切ることができました。
短時間で技術に向き合い、プロダクトを1から作り上げる経験は普段なかなかできないので、たくさんの学びがありました。
もっと成長して、もしまたハッカソンに出ることがあれば、今回よりうまく立ち回れるように頑張ります！
もちろんその時は、今回のメンバーで出場したいと思います！ （もう徹夜はしたくない...）

以上、最後まで読んで頂きありがとうございました✨