2026.06 LoGeek LT会

Transcript

1. ハッカソンで 優秀賞とったど 20260622 LoGeek LT会
2. Progateハッカソン2026.05に参加し 優秀賞を取りました！！！ 1
3. 2 もくじ 01 自己紹介 02 ハッカソンの概要 03 つくったもの 04 やってよかったこと 05 失敗したこと 06 ハッカソンでの学び 07 まとめ
4. 自己紹介 01 3 さくぱん 学年 修士1年 出身 千葉県大網白里市 趣味・特技 アカペラ・プログラミング・Notion 所属 尾上研究室 アカペラサークルSol-fa 情報研究会LoGeek 最近 外部のITイベントに沢山行ってみてます
5. ハッカソンの概要 02 4 • Progateが主催する「2days + α」のハッカソン • テーマ：「学校生活のイベント」 • 文化祭、テスト期間、給食などのイベントがそれぞれのチームに 割り振られました。 • 自分たちのチームテーマは「文化祭」 • min、kazariと参加してきました （もう一人いたような... ）
6. つくったもの 03 5 「スタンプラリーによって混雑状況を表示できるアプリ」 • 各店舗・ブースにスタンプラリーQRを配置し、読み込むことでスタンプラ リーを楽しむことができ、 その情報を元に混雑状況を表示できる。 ターゲット • 参加者：楽しみが増える • 出店者：自店舗への来る理由が増える • 運営 ：人の分散が図れる
7. つくったもの 技術スタック • FE: TS, Next.js • CSS: TailwindCSS, DaisyUI • BE: API Router, Supabase • デプロイ: Vercel 03 6 こだわり • 匿名認証 • 気軽に利用できるためにユーザー識別を 自動で行う • LocalStorageでidを保存する仕組みで実装 • QRコード読み取り • アプリ内カメラ・デフォルトカメラの 両方で読み取りが出来るように • QRコードデザイン • スタンプデザインを盛り込んだQRコード
8. • 利用者 • スタンプ帳 • QRリーダー • 運営 • ブース登録 • QRコード生成 • 裏側 • 直近一定時間のスタンプの読み取り数を元に 各ブースの混雑状況を表示 • 混雑状況を元におすすめブースを表示 つくったもの 03 7
9. やってよかったこと • 最初にモック画像生成 • 最初に内容をAIに伝えて、イメージ画像を作ってしまう • その画像をAIに渡して、モックとして実装する • → たたき台が早く出来るから、同じイメージを持って進めやすい • 先に基本的なバックエンドを作りきってしまう • モック作成と並行して、DBやAPIの設計をしてしまう • → FEと比較して自由度が低い（？）ため、フロントの設計・実装時に 各々での齟齬が起こりにくい 04 8
10. 失敗したこと • コンフリクト • issueドリブンの開発（開発ごとにissueを立てて開発する方式）で やってるのに、焦るにつれて1つのissueでの規模が大きくなり マージしたらコンフリクト...ということも多々 • → 開発単位をissue段階で明示的にして、同じところを並行に作業し ないように... • 寝坊 • 初日夜にちょっと進めたいな〜としてたら翌日寝坊 • 1時間くらい遅刻しました • → 寝坊して迷惑かけるか、当日頭が働かないんでちゃんと寝よう 05 9
11. ハッカソンでの学び • 発表は「詳細な説明」よりも「頑張りを明確」に • 前者をやっちゃって、結果的に結構淡白な発表になっちゃった • 一般的なものよりも尖ったもののほうがウケが良い • 今回はアイディアベースが多かったからこそ、実用性特化が逆に尖った所感 • （時間をオーバーするくらいの熱量で発表しよう） byメンター 06 10
12. まとめ • 設計とか準備を綿密にやっておくことで開発が楽だった！ • 発表が丁寧にやりすぎたなぁと • 知らない技術を使ってたり、分野がぜんぜん違う人が居たり 色々なつながりが増えてすごい楽しい会でした • サークル内のハッカソンはもちろん、外部のイベントも 出会いや学びがたくさんあるのでたくさん行こう 07 11
13. 制作は地道に、成果は派手に！ ハッカソン楽しもう 12