ハッカソン怖くないよ楽しいよ（Tokyo Flutter Hackathon 2024）

全国のアプリ開発大好き人間の皆さん、こんにちは！
KDDIアジャイル開発センター株式会社の長江です。


皆さん、ハッカソン興味あるけど、どんな感じか分からないし不安だから参加するのやめとこうみたいな経験ってありませんか？

少なくとも私は学生の頃、このように考えて一度も参加することができませんでした。

そんな私が今回、Tokyo Flutter Hackathon 2024に参加してきました！　


その中でどんなことがあったのかを伝えることで、私と同じようにハッカソン参加に不安を持っている皆さんを**ほっと**させて、参加意欲を促すような体験談を書いていこうと思います！



## 今回参加したハッカソンの概要

2日間にわたって行われるFlutterを用いたアプリケーションを開発するハッカソンとなっていて、アベマタワーズで開催されました。チームでの参加が必須となっており、今回は新人研修で同じチームだった @kyuko , @oudon0216 と一緒に参加しました🔥

https://tokyo-flutter-hackathon.connpass.com/event/326665/


## 当日の具体的な流れ

### 1日目午前
当日は10時からオープニングがあり、10時30分から開発がスタートします。
オープニングの中で、プロダクトのお題が発表されるので超真剣に話を聞いていました。

そして今回のお題は

### 「ほっと/ホット/hot」

となりました〜

ん〜抽象的でとても難しいお題でした笑

お題が発表されてから、各チーム様々なやり方でアイデアを出し合い、アプリケーションの作成に移っていきます。

私たちのチームでは、最初の30分をアイデア発散の時間に使い、その中の良いアイデアを基に、アプリの軸を決めていくことにしました。

#### 「ほっと」なアイデア出しの様子
![スクリーンショット 2024-11-06 20.01.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799968/05ccc350-a39c-1c0a-ce87-14feb1d78cfd.png)

（ここでTokyo Flutter Hackathon **ほっとポイント**なのですが、アイデアや実装に行き詰まった時は運営の方にアドバイスをもらうことができます。）

30分が経ってから、「ホットリロード」をキーワードとしてアプリの軸を決め、最終的にはエンジニアに向けた英語学習アプリを作ろう！という方針に決定しました。

簡単にアプリの説明をすると、学習したい最新（ホットな）英語の記事を選ぶだけで、生成AIが自動で問題を生成してくれるアプリとなっています。記事中で出てくる英単語問題から始まり、日本語訳問題、最終的には記事内での技術に関する問題が生成されます。

このアプリを使うことで英語と技術の勉強を同時に行い、自分自身を即座に更新（ホットリロード）することを目的としています。

![スクリーンショット 2024-11-07 17.36.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799968/35bce081-695b-19e5-8ff3-ead4ed07176c.png)

という感じでアプリのアイデアが固まったくらいで午前中が終了しました！



### 1日目午後
さあ！ここからが開発本番！私たちのチーム名は「アジャイルビギナーズ　リターンズ」ということでアジャイル開発（スクラム）で開発を進めていきました。（新人研修のチーム名がアジャイルビギナーズだったので、再集合の意味合いでこのチーム名にしました。）

まずは簡単にペルソナを作成し、そこからユーザーストーリーマップの作成を行いました。


![スクリーンショット 2024-11-07 17.52.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799968/013328fb-6ace-24be-85e2-5d1aa7018b9a.png)

![Tokyo Flutter Hackathon Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799968/556aa4fa-0b5b-5663-96bc-d0291a732f77.png)


更にそこからMVPを決定することで、ハッカソンという限られた時間の中、どの機能を最小限実装すればペルソナの求める価値を提供できるかを明確にしていきました。

そしてユーザストリーマップからプロダクトバックログを作成し実装へと移りました。

![Image from Miro (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799968/dc157676-9693-bb96-2c1a-342a8a817e77.png)


開発では、VSCodeのLiveShareという拡張機能を利用してモブプロ形式で進めていきました。技術的には、チームメンバー全員がFlutterの勉強期間が2ヶ月程度で、まだまだ個人での問題解決能力が低かったので、この作戦によって問題解決時間を短縮できてよかったと思います。

あっという間に時間が過ぎ、会場撤収時間の19時となったのでハッカソンの1日目は終了になりました。お疲れ様でした！

### 1.5日目？🤔

19時までにそんな順調に開発が進むわけないじゃないですか〜笑

ハッカソンの開発はここからが本番でした。@kyukoの家に向かい開発の続きがスタートしました。（感謝！）

疲労、眠気がピークに達しながらも、機能を実装しつつ並行して明日のプレゼン資料作りを行なっていました。そんな限界の中開発が進み、他のチームからは狂気駆動開発という名言が生まれていました笑

私たちのチームはとりあえず、朝の3時半ごろようやく完成の目処が立ったので、寝ることになりました。　ほぼ徹夜して友人とコードを書く経験は今までなかったのですが、最高に楽しかったですね笑

https://x.com/yoyoh_/status/1852803797145514137





### 2日目午前
2日目の午前中は10:40から開発がスタートしたのですが、14:00が締め切りとなっているので、ほとんど時間がありません。

なので、MVPを完成させたところで開発を終了し、そこからアプリのデモ動画の撮影や、アプリの概要説明・アピールポイントなどアプリ以外に必要な提出物の完成を目指しました。


提出したスライド


<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSMWStAUK2p6Wwd1tq8uUxs1Uuzo642PbybgtFTdOIGTrnCy5q4t_6vwJiZg81RNNwrw88miIcaLoBm/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>



デモ動画

<iframe width="560" height="450" src="https://www.youtube.com/embed/cjfuCAoJO9U" title="Engineer Hot Reloader" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

技術的な挑戦として、私たちのチームでは「Dify」というLLMアプリ開発プラットフォームをFlutterと組み合わせました。そうすることで、記事のスクレイピングから英語の問題の生成、フォーマットの修正などの一連のワークフローを一つのAPIとして呼び出せるようになります。



アプリ内の具体的な技術説明は@kyukoの出している記事を読んでいただけると幸いです

https://qiita.com/kyuko/items/cb6b38bcc031b7f11563



### 2日目午後
提出物の提出が済んだ後は、いよいよ各チームのプレゼンがスタートします。プレゼンの内容も審査基準となるので、どのチームも作成したアプリの良さを引き出す、素晴らしい内容となっていました！


全てのチームが発表を終えると、その後はいよいよ審査から結果発表に移っていきます。

ドキドキの審査の結果、3位に入賞することができました！　ハッカソン前に社内のSlackで応援メッセージをたくさん頂いていたので、良い結果が得られて本当に良かったです:relaxed:

https://x.com/TYOFlutterHack/status/1853023267004817489

その後懇親会が始まるのですが、正直始まるまで他の参加者の方たちと会話できるか不安でした笑　ですが始まってみればいろんな方と話す機会があり、次の改善に繋がるフィードバックや、使ってみたい！といったポジティブなフィードバックをたくさんもらうことができ、最高に**ホット**な体験をすることができました！

### 最後に
初めてのハッカソン参加で不安もありましたが、参加者の皆様、運営メンバーの皆様、審査員の皆様からのホットなサポートや、ホットなフィードバックをもらい、不安が吹き飛ぶ最高の体験をすることができました！　開催していただいて本当にありがとうございました！

そして最後にハッカソンへの参加を迷っている方が、この記事を読んで少しでもハッカソン参加へのモチベーションに変換してもらえれば幸いです。ここまで読んでいただいてありがとうございました！




![Tokyo Flutter Hackathon 2024.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799968/a7599d55-90d8-c288-17b5-dad198ccf0bd.jpeg)