株式会社プラゴのアプリ開発Gでエンジニアをしているminnです。
今回、会社のメンバーとTokyo Flutter Hackathon 2024に参加してきました。
約2日間でFlutterを活用してプロダクト開発するハッカソンの第2回目の開催でした。
昨年も参加しましたが、今年はどのチームもさらにレベルが高いと感じ、とっても刺激的な時間を過ごすことができました。
開発
今回は会社のアプリ開発Gで集まったメンバー5名（社員3名、業務委託1名、技術顧問1名）でチームを組み、参加しました。
チーム名は「チームプラゴ」です！
技術顧問のりずさんは生成AIの知識に特化しており、開発最中に審査員の方々など大勢がりずさんの元に集まり、生成AIの活用方法について披露していて、さすがでした（笑）
そして、当日ドキドキで発表されたテーマは、、、
「ほっと / ホット / hot」🔥
テーマから連想できるアプリのアイディアを一人一人出し合ってアイディアを増やしていきました。私は0から作り出すのは苦手な方なので、みんなのアイディアから派生して考えていました（笑）
そして、最近はFlutter界隈でもさまざまなテーマで議論が飛び交っていることが多いので、
白熱した議論というところから「ホット」なディベートアプリを作ることに決定しました。
最終的に開発したものはこちらです。
Hot Debate(ホットディベート)
ディベートする機能と閲覧してアクションできる機能を備えており、アクションが増えていくと炎が燃え上がっていくアニメーションになっています。
入力側と閲覧側の両方をアプリ内で完結しており、画面数が多めなアプリになっていましたが、なんとか間に合わせることはできました！（提出直前にデプロイした画面が真っ白になるというハプニングもありましたが😂）
デザインは会社でも使用しているニューモーフィズムを使用することを事前に決めていて、少しリッチなUIにしています。普段使用しているデザインとはいえ、ニューモーフィズムは奥が深く、新たに実装するには調整が難しかったです笑
技術的な挑戦
今回は全体的に自動化に挑戦したところが推しポイントになっています。
まずはCursorを使用してAIにコードを書かせて開発しました。事前にルールや仕様のドキュメントを用意して、CursorのComporser機能で生成します。
そして、FigmaのFigma to Code (Flutter)を使用して、UI部分もほとんど自動化しました。Figmaである程度のレイアウトを作成した後はコードを生成して、その後AIに指示してUIをさらにブラッシュアップするという方法を取っていました。
また、プレゼン資料もgammaというAIのスライド生成ツールを使用しました。
メンバー全員がフルで生成AIを活用しながら開発し、とっても新鮮な開発を体験しました。密にコミュニケーションを取りながら進めることで、自然とチームメンバーとの絆がより深まっていった気がします！
また、メンバーの3名がハッカソン未経験という状況でしたが、それぞれが分担してUIやアニメーションやプレゼン資料作成だったり、出来ることを探したり、気付いたところを積極的に修正してくれていた印象を持ちました。
その反面、開発中は予定通りにいかないこともあり、反省点も多々あります。
反省/改善点
- 事前の準備不足
- 事前に組み合わせられそうなアイディアの引き出しを増やしておいたり、アイディアの決め方や方向性をより明確にしておくべきでした。
- ハッカソン未経験者が3名いる中で、最終アウトプットとなるプレゼン資料やアプリのクオリティのゴールを事前に共有できておらず、動くものを作り切ることが目的になってしまいました。
- 生成AIの活用不足
- 生成AIを極力使った開発をやってみたいという思惑もあり、事前に生成ルールを作成して臨みましたが、生成ルールのクオリティを事前に確認できていませんでした。
- りずさん以外のメンバーは生成AI活用した開発にそこまで手慣れていなかったため、逆に生成されたコードの理解や調整に想定以上に労力がかかってしまいました。
- 新しい技術を使えなかった
- 生成AIをフル活用したものの、アプリ自体に新しい技術を導入できていませんでした。
- プレゼンの練習不足
- プレゼンを練習する時間を確保できておらず、当日は制限時間に追われてしまいました。
ハッカソンでは「引き算」が大切
個人的にはハッカソンでは「引き算」が大切だと感じました。
限られた時間の中で、アイディアや開発方針が決まっていると、どうしてもそれに囚われすぎてしまう傾向にあると思います。しかし、途中で立ち止まって「敢えて何かを減らしてみる」ことで最終的に良い結果を生み出すような気がしました。
例えば、必須と思っていた機能を思い切って減らし、残った機能やプレゼン練習に注力したり、疎かになっていた開発フローを立て直すことで、限られた時間内で質の高いプロダクトを完成させることができると感じました。
最後に
悔しい結果になりましたが、ハッカソン自体は非常に楽しく学びの多い経験になりました！個人的には会社のメンバーと一緒に参加できたことがすごく嬉しいです。
一緒に参加してくれたメンバーや企画運営された方々、関わってくれた方々に本当に感謝しています！
懇親会ではFlutter大学のみんなとも久しぶりに話ができて、とっても楽しかったです！
今回の経験で得たものを活かし、次回参加する機会があれば、より良いプロダクトを作れるよう準備していきたいと思います！！！^^
当初は予定していませんでしたが、結果的にオフィスで徹夜しました（笑）とっても良い思い出です！⭐️
Discussion
👏