【ハッカソン開催レポ】AWS と Supabase を使いたおそう！2日間で学生たちはなにをつくった？ #Progateハッカソン
こんにちは！Progate Path コミュニティチームのYunaです。
今回は、8月31日〜9月1日に開催された「Progateハッカソン powered by AWS & Supabase」の様子をお届けします！
未経験や個人参加も多い！Progateハッカソンは経験を積むことを重視
ハッカソンとは「ハック（改良）」と「マラソン」を合体させた造語で、技術者同士がチームを組み、限られた時間の中でソフトウェアやサービスを開発するイベントです。ハッカソンでは、完成した成果物の完成度や技術力を競います。
特にProgateハッカソンでは、参加者全員が参加してコードを書く経験を重視しています！
開発経験は問いません。「ハッカソンには参加したことがない」「技術力に自信がない」といった方でも、ハッカソンやってみたい！といった気持ちのあるすべての学生を歓迎します！実際に、幅広いレベルの学生が参加しており、記事の後半にも紹介があります。経験豊富なメンターがいることも、Progateハッカソンの特徴の一つです。
AWS と Supabase を自由につかって開発！壁にぶつかりながらも走り抜けた2日間
ハッカソン概要
今回のハッカソンは、2024年8月31日、9月1日の2日間にわたり行われました。エンジニアを目指している学生であること、当日 AWS の会場に来場できること(※1)、この2点を満たすならだれでも参加することができます！
また、今回は特別ルールとして
何かしらの形でSupabaseを使うこと
クラウドサービスはAWSを利用すること
この2点が必須になっています。ハッカソン開始とともに AWS、Supabase の使い方を学び、その後はチームに分かれてプロジェクトを進め、終盤では作ったサービスについて5分で発表。評価が高かったチームには、最優秀賞、優秀賞が贈られます。審査員からの企業賞、特別賞も用意しています！
会場は AWS Startup Loft Tokyo
17階に位置し、眺めが良く広々としたモダンな会場です
※1 台風の影響で会場に来れない方がいたため、急遽オンライン参加も可能としました
キックオフ
ここからは、時系列でハッカソンの様子をお伝えしていきます。
ハッカソンは、開催日10日前のキックオフからスタートです！キックオフはDiscord上で実施され、開発のテーマやチーム分けの発表がある、とても重要な場です。
テーマ点やアイデアは評価に関係ありません
「作りたいもの、面白いと思うものを作ってほしい」との想いからです
キックオフからハッカソン初日まではおよそ1週間の期間があります。この期間にチーム内でコミュニケーションを取り合ったり、開発を進めているチームもありました！
ハッカソン開始！
今回のハッカソンは両日ともオフライン開催です。しかし、数日前に現れた台風の影響で一部の方の現地参加が難しくなり、急遽オンライン&オフラインでの開催となりました。
ハッカソンが開始されると、まずは開会のあいさつとメンター紹介が行われます。メンターを務めたのは、Supabase Inc. 、アマゾンウェブサービスジャパン合同会社、株式会社TwoGate、株式会社スタディスト、エムスリー株式会社の方々、そしてProgateのメンバーです。
挨拶のあとは AWS と Supabase のデモがありました。今回の開発のルールとして、クラウドサービスは AWS を利用すること、また、何かしらの形で Supabase を使うことが定められているため、参加者はとても集中して聞いていました。
アマゾンウェブサービスジャパン合同会社 スタートアップ事業本部 シニアソリューションアーキテクト 柳さんからは、2日間 AWS を無料で使うための使い方の紹介、そしてWebアプリケーションを便利に開発するサービス AWS Amplify を用いたアプリ開発のデモがありました。Amplify を使ったことがある参加者が数名いたことには、柳さんも「0人のつもりだったので驚きました」と語っていました。デモについては、デプロイまでのスピード感をその場で目にしたことで一瞬ざわつく声が上がります。
Supabase Inc. エンジニア タイラーさんからは、まず Supabase の経験の有無について投げかけられ、約半分の方は「使ったことがある」という結果でした。ハッカソン当日が待ちきれず、Progate Pathを通じて先に使ってみた！という方もいると思われますが、多くの方にとっては初めて利用するサービスのようです。Supabase が実現できることや、使い方のレクチャーがその場で行われ、また「公式のドキュメントが充実しているので困った際は参考にするといいです」といったアドバイスもありました。
私たち株式会社Progateが提供する、実務につながる経験を積めるプログラミング学習サービス「Progate Path」では Supabaseを学ぶことができるタスクを提供しています！
▶️プレスリリース：Progate Path、新世代のバックエンド構築プラットフォーム「Supabase」と学習タスクを共同開発 新たな学習体験を提供
ハッカソンの期間はたったの2日間！デモの後はチームごとにサービス開発を進めていきます。
チーム内にオンライン参加のメンバーがいるチームは、Discordのボイスチャットを用いてコミュニケーションを取ります。
中間発表
1日目は、15時に中間発表があります！
発表は各チーム5分間で、現在の進捗、困っていること、Supabaseの使われ方などを、メンターの前で発表します。オンライン参加の方も、Discordを通じて参加します。
中間発表での進捗について、解決したい課題やサービスの使い方などがはっきりしているチームが多いように見受けられました。
機能の実装はさておき完成に近いUIのデモを見せることができたり、デザインは最小限にまずは動けるものを作ることを最優先して進めているチームなど、プロジェクトの進め方はチームによって様々でした。
困っている内容については、「大して困っていない」という（現時点で）順調なチームもいれば、技術的な悩み、チーム開発に関する悩みなど、こちらもチームによって様々でした。また、あるチームにおいては Supabase の利用について、Supabase のタイラーさんも驚くような視点がありひと盛り上がりもしました。
ハッカソン1日目終了
中間発表にて審査員へ不安の気持ちをこぼしていたチームもありましたが、発表後は一気に会場の熱が高まったようです！発表前よりも会場全体の声量が増え、チーム内で活発に話し合う様子が見られました。
発表は翌日の15時。参加者たちは退室時間直前まで集中して作業に向かい、1日目を終えました。
最終日となる2日目には、エムスリー株式会社、AWS、株式会社スタディストから、新たに3名のメンターの方々が参加してくれました。
メンター紹介の後は、朝からもくもく作業。参加者はメンターに積極的に頼りながら進めていきます。成果発表まであと少し！
迫る成果発表に向けて、各チーム追い込みをかけていきます！
発表直前に各々の作業の連携と公開がうまくいったのか「キターーー！」と立ち上がって喜ぶチームも。
2日間の集大成！8チームの最終発表
チームごとに壇上に上がり、制作物が実現すること、デモ、技術構成などを発表します。
Progateハッカソンでは、発表においてスライド資料よりもコードを書く経験を重視しているため、スライド資料作りを禁止しています。
その代わりに、株式会社ハックツが提供するエンジニア向けポートフォリオサービス「Topa’z」を活用し、成果発表を行います。Topa’zは、GitHubのリンクや開発の背景を記載するフォーマットが整っているため、ドキュメント形式でわかりやすく成果物を公開できます。
発表は各チーム5分です。
「へび」チーム：Tech Path（ITに関するおすすめ学習ルート投稿サイト）
https://topaz.dev/projects/bd94ed17827ae62ac650
既存の記事や学習動画からオリジナルのITに関する学習ルートを制作。ありそうでなかった、既存の記事から自分だけのマイルストーンを作成・公開するアプリ。プレゼンにて本番用のリンクを叩き「危険なサイト」と赤い画面が表示されたあの瞬間は肝を冷やしたに違いない（笑いが起きた）。
「ひつじ」チーム：Time（エンジニア向け時間管理アプリ）
https://topaz.dev/projects/2a347bfb33c69864d02e
エンジニアが欲しいサービスが詰まった時間管理アプリ。機能は「タイマー機能」「電子文書読み上げ機能」「ビデオチャット機能」。制作背景は、一つのサービス内で自分達のやりたいことを完結させたかったから。
「とり」チーム：まなびでお！（指定の動画から学習したAIが質問に答える）
https://topaz.dev/projects/15a7385ce9a4a7f24510
動画をアップ→好きな部分を選ぶ→その部分について🤖と会話できる。AIが授業を聞くことにより、テストや課題などを代行してくれる。会議での議事録作成、ドラマや映画のあらすじ作成にも。
「いぬ」チーム：ManimTube（コンピューターサイエンス動画まとめサイト）
https://topaz.dev/projects/b42a5a164623f875a260
数式や図形、グラフなど数学に関連する美しい動画を作成できる「Manim」によるコンピューターサイエンス解説動画まとめサイト。頑張ったところは、コードから動画を自動で生成できる機能。
「たつ」チーム：スーパーお人好し（困りごとがある人と助ける人をマッチング）
https://topaz.dev/projects/ebbed73282200cd85fe9
スーパーお人好し。困りごとのあるユーザと、その困りごとを解決できるユーザを繋ぐサービス。困りごとがあるユーザとその困りごとを解決できそうなユーザを優先して推薦する。
「とら」チーム：Jeweler（ハッカソンで作ったプロダクトのLPを自動生成）
https://topaz.dev/projects/7cdb6cf7995cbd651fd9
topa'zに投稿されたプロダクトのLPを自動生成してくれる。ハッカソンで作ったプロダクトのLP作ってる人がいていいなと思ったから。「肝心のLPができてないけどインフラは作り切ることができたので満足です」とのこと。
「いのしし」チーム：Be your Supaman.（痩せた自分を見れるダイエットアプリ）
https://topaz.dev/projects/67f6bbd4f9b6d85c43b7
今までにない、最高の自分に。世の中の悩めるダイエッターたちを助けるためのアプリ。ホーム画面に痩せた後の自分の写真を表示させることでモチベーション維持、ひいてはダイエット成功に寄与する。Stable Diffusion を用いた自動画像生成がポイント。
「うさぎ」チーム：みんラジ（ラジオ体操アプリ）
https://topaz.dev/projects/c1535ca3701c938e98ad
みんなでリアルタイムにラジオ体操するアプリ。ラジオ体操した日にはスタンプが押される。現在の継続日数や累計日数も確認することができる。「夏休みに薄っぺらいラジオ体操カードを首にかけて蒸し暑い公園で朝一番から眠気MAXでやったラジオ体操」を思い出したかった。
🎊表彰式🎊
審査員たちは、以下の基準でチームごとの成果を評価します。
完成度、デモプレイ（40pt）
技術レベル（30pt）
技術チャレンジ・成長度（20pt）
Topa'z（10pt）(※1)
用意されている賞は、最優秀賞、優秀賞、メンターからの企業賞、特別賞。発表が終わった安堵もつかの間、受賞作品が発表されます。
スタディスト賞：「へび」チーム
Tech Path
メンターからのコメント：“早い段階から動作していてさすがでした。プレビューが用意されていたり、OGPが表示されていたり、細かいところまでこだわりを感じました。UIもまとまっていて綺麗でした！”
TwoGate賞：「いぬ」チーム
ManimTube
メンターからのコメント：“最後の最後までサービス開発に取り組んでいたのが素敵でした！Manim動画を集めたサイトを作る発想も好きですし、Manimコードをアップするだけで動画が投稿できる機能もめっちゃユーザビリティが良く参考にしたいところが多々ありました。”
エムスリー賞：「とり」チーム
まなびでお！
メンターからのコメント：“生成AIに対して動画を用いたRAGと考えるととても面白そうに感じました” ”AWSを使いこなしていて素晴らしい。” ”実際に使いたくなるようなアプリですね。 多くの実装が必要になったと思いますがハッカソンの短時間の中でやり切ったのは素晴らしいです”
Supabase賞：「たつ」チーム
スーパーお人好し
メンターからのコメント：“Supabaseをフル活用してもらってすごく嬉しいです！ぜひAuthなどの組み込みも頑張ってチャレンジしてみてください！” “初心者で集まったチームということでしたが、React+Supabaseを地道に頑張られているのが好印象でした。 成長度、このハッカソンを通じて何ができるようになったのか、についても聞いてみたかったです！”
AWS賞：「いのしし」チーム
Be your Supaman.
メンターからのコメント：“うまく動作を安定してまとめていたと思います。 自分の困りごとに対して解決する姿勢は良かったですね。” “最後の画像生成のデモは惜しかったですが、他の機能が一通りできていて素晴らしかったです。”
特別賞：「とら」チーム（オンライン）
Jeweler
メンターからのコメント：“新しい技術スタックにチャレンジされていて素晴らしいです。” “非常に多くの技術要素が活用されていて、ハッカソンを楽しんでいる様子が伺えます。” “やりたいことの発想は良いと感じました。インフラの構成も解決方法の模索が色々あったんだろうなと思い、面白かったです。”
🎉優秀賞：「ひつじ」チーム🐏
【メンターからのコメント】
ビデオ配信周りの完成度が高くてよかったです。誰も使ったことないけどRust使おうぜというエンジニア精神いいですね。
いきなりRustを触ってここまで完成度の高いアプリを構築できるのは本当にすごいです！ぜひSupabase Storageもチャレンジしてみてください！Next Authでなく、Supabase Authも使ってくれたら嬉しかった 😂
全体的にUIがおしゃれで使いたくなるデザインでした。ビデオ通話や読み上げなど多機能でしたが、Rustで実装しきっている点はすごいなと思いました。（Chrome拡張などで自動で読んだ記事データなどを収集してくれると嬉しいかも！）
🎉🎉最優秀賞：「うさぎ」チーム🐰
【メンターからのコメント】
Flutter + Supabaseのスタック最高です！Supabaseをフル活用してもらっていてとにかく嬉しかったです。他のチームよりもリーンな技術スタックでとてもスマートでした。アプリのアイコンも独自のものに変えているあたり凝っていて素敵でした。
ラジオ体操をやらせるという奇抜な発表ながら、技術内容もデモの完成度も高くてとてもGoodでした。
Supabaseの主要な機能を使いこなしたアプリとなっているのは素晴らしい。デモ中の説明も非常によかったです。ラジオ体操出来たのは個人的に良かったんですが、さすがにフルは長くてアプリに関する話をもう少し聞きたかったです。
クロージングと懇親会
全8チーム、完走しました！表彰式の後、Supabase のタイラーさんより講評を頂きました。
「レベルの高いプロジェクトが多くて圧倒されました。Supabase をいろんな形で使ってくれて嬉しかったです。他にも様々な機能があります。今後もぜひ、いろんなスタックを組み合わせて使ってみてください！」
続く懇親会は和気あいあいとした雰囲気で、参加者やメンターが一堂に会して交流を深めました。
どんな人が参加しているかが気になる方に向けて、ここからは参加者から伺った内容をいくつかご紹介します！（ご協力いただいたみなさん、ありがとうございました！）
個人参加の方「もっと Supabase をつかってみたいと思いました」
「初めてハッカソンに参加してSupabase賞、自分としては大したものを作っていないのにとても嬉しかったです。」学部は情報系なのでプログラミング自体の経験はあるが、Web開発は初めてだった。今回のハッカソンはProgateからのメールで知り、AWSに惹かれて参加した。メンターの方が優しくて、親身になって教えてくれてとても助かった。
友人同士で参加したお二人「めっちゃ楽しかった！！」（第一声）
学部は情報系で、これまでも何度か一緒にハッカソンに出ている。「1日目が終わった時点では個別で開発を進めておりつなぎこみができてなかった。発表10秒前にデプロイがうまくいってやばかった！」他のチームメンバーにも助けられた。
友人同士で参加した方「発表中のこと、覚えてないくらい緊張しました」
これまで何度かハッカソンに参加している。学部は情報系で、今回は職場の友人と一緒に参加した。「友人以外のチームメンバーは初対面だしオンラインで進めたけど、問題もなかったし頼りにさせてもらった。楽しかった。女性の参加者増えてほしい！」
個人参加の方「まだまだ力不足で、他の方に頼らせてもらいました」
ハッカソン経験は、今回のハッカソンの前日が初のハッカソンだったためほぼ初心者。文系学部。プログラミングの必要性を感じて独学している。「経験のある方たちを頼りにさせてもらいました」とのことでしたが、他のチームメンバーから「いや！あの部分めっちゃ助かったよ！」と声をかけられていました。
友人同士で参加した方「自分ももっと力をつけてこようと思います！」
ハッカソン初参加。大学2年生で、Web開発も初心者。友達に誘われて参加した。チームも初心者中心だったけど、アイデアをはじめできることで貢献しようと努めた。周りのレベルが高くて驚いたが、参加してよかった。
Progate Path では、今後も月におよそ1回のペースでのハッカソン開催を予定しています。
今回は東京開催でしたが、Progateハッカソンはオンライン（全国）でもオフライン（東京・京都・福岡が多いです！）でも開催します！次回2024年10月のハッカソンはオンライン開催です！
【オンライン開催】Progateハッカソン（10/19,20開催）
初ハッカソン・初心者大歓迎！友達と参加OK！エンジニアを目指す学生向け
Progateが主催する2日間の【オンラインの】ハッカソンイベントです。
約1週間の事前開発期間と、本番の2日間のスケジュールで進行されます。
Progateのエンジニアや経験豊かなコミュニティメンバーがサポートを提供します。
Progateを使った事前学習も可能ですので、一緒に楽しみながらスキルアップしましょう！
詳細・お申し込みはこちら：https://progate.connpass.com/event/330962/
皆さんの参加をお待ちしています〜！
【過去開催レポート】生成AIがテーマ！前回AWSとコラボしたProgateハッカソン
AWS と共催したProgateハッカソンです！特別ルールとして、「Amazon Bedrock を用いた生成AI機能を取り入れること」が必須でした。
ネットの匿名掲示板の書き込み自動生成や、Web開発でよく使う単語のタイピングゲームなど、どれも面白くて独創的なサービスが生まれたハッカソンです！
https://aws.amazon.com/jp/blogs/startup/progate-hackathon-powered-by-aws-2024/
学生エンジニア向けのハッカソンやLT会など、最新のイベント情報はconnpassをフォローしてチェックしてください！
実務につながる経験を積めるプログラミング学習サービス「Progate Path」
https://path.progate.com/