見出し画像

東京、京都、福岡の3拠点で同時開催!Progateハッカソンレポート

Progateは2024年7月20日と21日に、東京、京都、福岡の3拠点+オンラインでProgateハッカソンを開催しました。

プログラミングを愛する学生たちが集い、技術力を競い合うこのイベントは、多くの参加者の熱気と創造力に満ちていました。

本記事ではその様子と成果物についてお伝えします!

Progateハッカソンについて

ハッカソンとは​​「ハック(改良)」と「マラソン」を合体させた造語で、技術者同士がチームを組み、限られた時間の中でソフトウェアやサービスを開発するイベントです。ハッカソンでは完成した成果物の創造性と技術力を競います。

Progateが開催するハッカソンは開発に集中して学びを得ることやスキルアップを目的にしており、「参加者全員が参加してコードを書く経験を積むこと」を重視しています。

初心者や開発経験の浅い参加者も、開発経験が豊富な参加者も、全員がひとつのチームとして協力して開発経験を積むことができるように、設計を工夫しています。

今回のハッカソンは東京、京都、福岡の3拠点で同時開催し、約40名の学生が参加してくれました。

それぞれの拠点では宿泊可能な場所を提供し、朝まで開発を進めたチームも…!

京都と東京ではProgateが運営しているハッカソンハウスとオフィスを、福岡ではハックツさんが運営している宿泊施設付きの会場を開発環境として提供しましたが、参加者からは「徹夜して作業をするなど、他の機会では味わえないような刺激的な体験をすることが出来た」「1日中開発できる環境が最高だった!!!!」という声をもらいました。

(東京拠点の様子)
(京都拠点の様子)
(福岡拠点の様子)

約1週間のオンラインによる事前開発期間と、2日間のオフラインでの本番スケジュールで進行しました。本番では、各拠点の会場にてハイブリッド形式で各チームが成果物を披露しました。

今回のテーマと審査基準

今回のテーマは「にほん」。

審査は、成果物の動作デモ、技術的な完成度、および挑戦した点を評価します。
プレゼンテーションのトーク力ではなく、技術力や成果に基づく公平な評価を行うため、本番ではGitHubリポジトリを準備し、5分間の動作デモを行ってもらいました。

Progateハッカソンでは、株式会社ハックツが提供するエンジニア向けポートフォリオサービス「Topa’z」を活用し、成果発表を行っています。Topa’zでは、GitHubのリンクや開発の背景を記載することで、プレゼンを行わなくても開発成果をわかりやすく公開できます。

各チームがハッカソンで作成したTopa’zページを掲載していますので、ぜひご覧ください!

出場チームと成果物

今回は1チーム3〜5人からなる9チームがあり、初心者から開発歴が長い方まで幅広いメンバーが集まりました。

Discordや本番時にはProgate Pathの学生アンバサダーや、企業メンターとして参加してくれたスタディストさんやハックツさんがメンターをつとめ、随時質問を受け付けることで開発をサポートしました。

どのチームも制限時間内で精一杯開発を進め、動作デモに挑んでくれました。

各チームの挑戦の結果である成果物をご紹介します!

みかんチーム「Japan-Lights-Out」

日本地図を使ったLights Outゲームです。各都道府県をクリックすることで、その都道府県と隣接する都道府県のライトの状態が変わり、すべてのライトを消すことを目指す論理パズルです。

【開発の背景】
日本の地理を楽しく学びながら論理パズルを解く経験を提供したいと考え、このゲームを作りました。また、ゲーム開発の経験を深めるために、タイマーや難易度設定などの機能を追加し、ユーザーに挑戦的な体験を提供します。

【推し技術】
SVGとCSSを駆使して日本地図を動的に操作し、JavaScriptでタイマーやライトの状態管理を実現しました。隣接行列を使用することで、効率的な状態遷移を実現し、ゲームプレイのスムーズさを確保しています。

詳細:https://topaz.dev/projects/51fdbceaeef6f888a4ae


いちごチーム「VR気配切り」

「向かってくる丸太を感覚のみで切り倒せ!」Meta Quest2を活用したVRゲームです。

【開発背景】
VRで気配切りゲームを作りたかった

【推し技術】
VR楽しいぞい
今、meta社が色々テンプレートを用意してくれているので、とても作りやすくなっている

詳細:https://topaz.dev/projects/63680d23ab190211229b


りんごチーム「HTML 福笑い」

HTML 福笑いは、リアルタイムにレンダされない ─つまり、目かくし状態でスタイルを記述してどれだけ目標に近づけられるかを競うゲームです!

ゲーム性としては、観戦やリザルトなどのシステムなどによって多くの人と盛り上がれる点、技術的にはモダンな言語・フレームワークによる堅牢なシステムと随所で機械学習を使ったゲーム体験の向上の工夫が推しポイントです。

【開発背景】
みんなであつまったときの盛り上がりになってほしかった。

【推し技術】
機械学習を色々なところで使ってユーザ体験を向上させたこと。

詳細:https://topaz.dev/projects/a8c486b74146f4e04b57


すいかチーム「ひろマル」

2shotを撮ると、その人と友達になれるアプリ。
アプリを使って写真を撮ることで、名前と顔の一致するリストを作成する。

【開発背景】
ハッカソンなどの交流で会った人の、名前と顔が一致しない。

【推し技術】
IaaS使ってます!

詳細:https://topaz.dev/projects/ff38671e114bf03ee3f6


きういチーム「サブスクライブを管理する君(仮)」

増え続けるサブスクライブを管理し、支払い状況を可視化します。

今日では課金体系として一般となったサブスクライブですが、その裏には少ない月額でも積み重なって大きい額になってしまったり使っていないサービスへの課金を続けてしまうなどの問題があります。
そういった問題に立ち向かい、月々の支払額の把握や不要な課金を続けているサービスが無いかを一目で確認するために、サブスクライブを管理する君(仮)は生まれました。

【開発背景】
サブスクライブを管理するのが大変なのでアプリケーションに丸投げできたら嬉しい!

【推し技術】
Go(Gin)を完全に初めての状態で使い始めたこと、AWSを中心としてインフラ周りを固めて進めたことが推し技術です。

詳細:https://topaz.dev/projects/b5e4cf687ce4dadee4c4


ばななチーム「WAGIRI!!」

フリック入力で寿司打のゲーム体験を味わうことができるWEBアプリ

「WAGIRI!!」は、日本の和食をテーマにしたユニークなオンラインタイピングWEBアプリです。スマホのフリック入力に対応しており、楽しくタイピングスキルを磨くことができます。流れてくる和食の名前をタイピングすることで、日本の文化にも触れられます。さらに、ランキング機能を搭載しているので、他のユーザーと競い合いながらスコアを伸ばす楽しさも味わえます。さあ、「WAGIRI!!」でフリック入力の達人を目指しましょう!

【開発背景】
寿司打ってPCでしかできないよな...?
フリック入力の寿司打がで来たら絶対おもろい!!
オンライン対戦もできる進化したアプリ体験を...

【推し技術】
・WebSocket
・DevContainer(Docker)
・GitHubActions(CI)
・DIコンテナ

詳細:https://topaz.dev/projects/6289661ba3abe5ccbc02


さくらんぼチーム「岡山めぐり!(マッチョ棒)」

岡山県の魅力ポイントを知れたり、ルート検索もできます!

【開発背景】
ハッカソンのテーマが「にほん」ということで、日本の観光地をもっと世界にアピールできるようなアプリを作りたい!となったためです。

【推し技術】
javascriptとバックのnode.jsとの連携

詳細:https://topaz.dev/projects/b8fc9d4e004897f7cfec


パイナップルチーム「にほんばしタワーバトル-のんびりオンライン対戦ゲーム」

どうぶつタワーバトルのゲーム性をもとにして、「にほん」をテーマにUnityで制作しました

順番に食べ物を積んでいって先に落とした方の負け
たくさん積んでいくほど難易度が上がります

【開発背景】
二人対戦機能
Unity独自の物理エンジンも利用した細かいアニメーション

【推し技術】
テーマから、日本橋と2本のお箸と日本食を合わせて、ゲームにしてみようと思った

詳細:https://topaz.dev/projects/603d546942fff0cef7c9


ぶどうチーム「就サク」

就活をsuccess! 就活のための情報をまとめて管理するアプリ

【開発背景】
Excelなどで就活情報を管理するのはめんどくさい!
より利便性を向上させたアプリが欲しく作成しました。

【推し技術】
WindowsとMacで共同開発するためのdokerによる環境構築
自動的に抽出するための正規表現

詳細:https://topaz.dev/projects/59d075213f2fe428820a


結果発表

本番でのデモプレイ後、審査基準に則って企業メンターとして協力いただいたスタディストさんの「スタディスト賞」、運営協力をいただいているハックツさんの「ハックツ賞」、「特別賞」、「優秀賞」、「最優秀賞」の5つの賞をお贈りしました。

審査員コメントは一部抜粋となります。

スタディスト賞:りんごチーム「HTML 福笑い」

受賞コメント
技術的にいろいろと挑戦できてたのしいハッカソンでした!
まだまだ挑戦したいことが沢山あるので、また参加したいです!

審査員コメント(スタディスト長谷川さん)
デモプレイがうまく動かなかったのは残念でしたね。
それでも技術的には多くチャレンジできているのが良かったですね。
技術的な着眼点も面白かったので、是非動くようにしてみつつ、モデルについての改善や、比較する前の画像について処理について語れるとめっちゃ面白かったように思えるので楽しみにしています👍️


ハックツ賞:さくらんぼチーム「岡山めぐり!(マッチョ棒)」

受賞コメント
ほんとに楽しい開発で、賞まで頂いてとても嬉しかったです!マッチョ棒最高!

審査員コメント(ハックツさかっきーさん)
岡山愛がふんだんに伝わってきました!未だ行ったことはなかったので、行ってみたくなりました笑
裏で開発していたアプリがマッチョゲーム?がちゃんと繋ぎこみされてて、よかったと思う反面、なんでマッチョ?という疑問が同時にあって複雑な気持ちでした笑
なにはともあれ2日間お疲れ様でした!


特別賞:みかんチーム「Japan-Lights-Out」

受賞コメント
この度は貴重な機会を提供して頂きましてありがとうございました。
開発をするのが初めてのメンバーが集まりましたが、当初チームで掲げた「一つの作品を完成させる」という目標を達成できて良かったです。
次参加する時までにはもう少し技術力を高め、最優秀賞を狙いたいと思います。
改めましてこの度はありがとうございました。

審査員コメント(学生メンターよつさん)
採用技術自体はシンプルながら、隣接行列を用いた各マスの反転処理の実装、見た目の切り替えをsvg, pathを用いて実装しているなど、各部分にDOM操作やロジック実装への実力を感じました!
初参加ながらしっかりコア機能を作り切り、pagesでCDまで組んでいるのがすごいと思いました


優秀賞:すいかチーム「ひろマル」

受賞コメント
チームメンバーに助けられて、賞を取ることが出来ました!
嬉しいです!

審査員コメント(学生メンタームラサメさん)
good:
機械学習を用いてしっかりと顔識別を作れているのはすごいと思いました!
チューニングしてもっと爆速になると面白そうですね!
motto:
インフラアーキテクチャなど詳しいものがあってもよかったかなと思いました!

最優秀賞:ばななチーム「WAGIRI!!」

受賞コメント
主にフロントエンドを担当していたうらっしゅです。
僕らのチームはかなり技術的な挑戦をしていて、かなりギリギリチームでした笑
本番前日にWebSocket導入しようという話になって、チーム全員ほぼ初めて扱う技術でかなり苦戦していました。
しかし、本番に会場全体を巻き込んだリアルタイムオンライン機能のインパクトが最優秀賞に繋がったのかなとも思っています。
技術的な成長を感じれた良いハッカソンになったと思います!!

審査員コメント(Progate Path Team Lead福井)
同時対戦までもってけたのがGood!最後のゲーム性のところまで完成度高くできるといいですね!

アンケートでは満足度が100%!


ハッカソン開催後に回答いただいたアンケートでは満足度が「最高!」「まぁまぁよかった」合わせて100%となりました。ありがとうございます!

いただいたコメントを一部抜粋してご紹介します。

「初めてのハッカソンでしたが、メンターの方のサポートもあり、楽しく開発を行うことが出きました。」

「初めてのハッカソンで不安だったが、これまでのプログラミング経験が生きて面白いものになったため。また、初めてのフロントエンドの経験になり技術的にも成長することができたため。特に発表30分前にすべてのバグが取れて動くようになったときは最高だった。」

「開発経験が全くないメンバーが集まった。事前開発期間も空いている時間がなく、ぶっつけ本番になった。そこで周りの人の技術力の高さにメンバー一同恐れ慄き、正直辞退しようと思いました。
しかし、もともと目標にしていた機能が実現でき、デプロイまでできたことは最高でした。初めての開発経験としてはとても良かったです。」

「初めてのハッカソン参加だったが、とても明るい雰囲気で楽しみながら課題に取り組むことが出来たから。また、仲間と話し合い、教え合いながらひとつのプロジェクトに取り組む時間がとても有意義だと感じたから。」

「僕は今回人生初めてのハッカソンでした。どうゆうことに期待すればいいかなどわかりませんでしたが、福岡会場は過ごしやすく、チームの開発でも心地よく開発できたのがすごく嬉しかったです。ハッカソンは福岡では少ないですので、もっと福岡でもprogateハッカソンを開催して欲しいです。」

最後に

今回ハッカソンに参加いただいた皆さん、メンターを務めてくれた皆さん、本当にありがとうございました!

Progate Pathはこれからもエンジニアコミュニティの発展を支援し、次世代の技術者たちが活躍できる場を提供していきます。

もちろんハッカソンも開催していく予定です!
次回の皆さんの参加をお待ちしております✨

Progateは皆さんの今後の開発による活躍を心から応援しています!


イベント予告

💡Progateハッカソン powered by AWS & Supabase
 📅 2024/08/31 (土) 11:00 〜 2024/09/01 (日) 18:00
 📍 AWS Startup Loft Tokyo(品川)
 🎟️ https://progate.connpass.com/event/325329/
Progateが主催する、プログラミング初心者から経験者まで参加可能な2日間のハッカソンイベントです。Supabaseさんの協力を得て、事前開発期間(オンライン)と本番の2日間(オフライン)で進行します。ProgateのエンジニアやAWSの社員のほか、Supabaseのエンジニアや経験豊かなコミュニティメンバーがサポートを提供します。Progateを使った事前学習も可能ですので、一緒に楽しみながらスキルアップしましょう!

💡58ハッカソン 2024 feat.関西学生エンジニア
 📅 2024/09/21 (土) 11:00 ~ 2024/09/22 (日) 18:00
 📍 TEQS(大阪市住之江区南港北2-1-10 ATCビルITM棟 6階)
 🎟️ https://58hackathon.connpass.com/event/324993/
ProgateとGONENGOが主催する2日間ハッカソンイベントです。オンラインでの事前開発期間と大阪での現地ハッカソンで進行します。初参加も初心者も経験者も歓迎、友達と参加もOKです。技術力向上とチーム開発を楽しみましょう!

💡 ハックツハッカソン 
📅 2024/09/24 (火) ~ 2024/09/26 (木) 
📍 TangaTable(北九州市)
 🎟️ https://cup.hackz.team/2024/spino
ハックツが主催する食事、宿泊付きのハッカソンイベントです。テーマに沿ったプロダクトを開発し、完成品を発表します。プログラミング初心者から経験者まで参加可能です。プロダクトのアウトプットとチーム開発を体験できます。スポンサー企業からのメンタリングがあり、みなさんが楽しんで開発できるような環境やコンテンツを整えています!コーディングに集中して一緒に楽しみましょう!

💡 やんばるハックツハッカソン
 📅 2024/09/14 (土) 11:00 ~ 2024/09/16 (月) 19:00 
📍 沖縄県 名護市(調整中)
 🎟️ https://hackathon-association.connpass.com/event/325340/
やんばるハッカソンとハックツハッカソンがコラボしたハッカソンイベントです。やんばるハッカソンとハックツハッカソンのコラボハッカソン!2つのハッカソンを同会場で別々に開催します。やんばるハッカソンは沖縄県の高校・高専・大学に通う学生が対象、ハックツハッカソンは全国の高校・高専・大学に通う学生が対象です。プログラミング初心者から経験者まで、学生であればどなたでもご参加いただけます。

この記事が気に入ったらサポートをしてみませんか?