サークルのハッカソンで学園祭向け会計アプリを開発しました
※この記事は，2024年8月5日にNoteに投稿したものを，Zenn向けに一部編集したものです。
こんにちは，みーやです！
先月，プログラミングサークルのハッカソンに参加し，九大祭向け会計システム「q-pos」を実装しました！
本記事では，その体験談をご紹介します！
はじめに
まず，私が所属するサークルとハッカソンの概要についてご紹介します！
GLEAP とは
GLEAP は，九州大学のプログラミングサークルです．学部 1 年生から修士 2 年生までの幅広い年代の学生が 60 人ほど所属しています．
ハッカソンから講習会，業務委託（システム開発や講師）まで，プログラミング関連の活動を幅広く行っています！
参加の経緯
代表の喜多さんから参加を依頼されたことです．
今回のハッカソンは GLEAP で初めての開催であったため，各チームのマネジメント・メンタリングを行う人材が必要でした．
そこで，以前から要望があったテーマを開発する，という形で参加することになりました．
ハッカソンの概要
ハッカソンの内容は以下のとおりです．
| 項目 | 内容 |
|---|---|
| 期間 | 2024 年 5 月 〜 2024 年 7 月 22 日（月） |
| 場所 | 九州大学伊都キャンパス |
| テーマ | 自由 |
| チーム数 | 9 チーム |
| 賞 | 入賞（１〜３位），企業賞（GLEAP 株式会社，HTS ホールディングス） |
同時に，各チームのテーマをご紹介します！
| チーム名 | テーマ |
|---|---|
| A | 無人島開拓ゲーム |
| B | （残念ながら完成ならず...） |
| C | 縁結び |
| D | Unity ちゃん散歩 |
| E | 単位危機管理アプリ |
| F | 2D RPG ゲーム |
| G | スマートスケジュール |
| H | e-しりとり |
| メンター | 九大祭向け会計システム q-pos |
開発の様子
次に，私たちメンターチームがおこなった開発についてご紹介します！
チーム構成
メンターチームは 6 人からなり，以下のような構成でした．ニックネームでのご紹介です笑
| メンバー | 役割 |
|---|---|
| みーや（私） | チームリーダー／フロントエンド |
| こうた | フロントエンド |
| ともひろ | フロントエンド |
| たいせい | バックエンド |
| ゆう | バックエンド |
| こうき | バックエンド |
開発風景
設計・実装、分担、進め方
方針
まず，要件をもとに，機能・UI・データベースの設計を行いました．対面でホワイトボードを用いて議論を行いました．
上記をもとに技術選定をおこない，以下のような技術を採用しました．
| 項目 | 技術 |
|---|---|
| フロントエンド | React, Next.js, Typescript, Chakra UI |
| バックエンド | Go, Gin, Gorm |
| その他 | Docker, MySQL, GitHub |
フロントエンドに関しては，短期間の開発だったことから開発スピードの出せる，書き慣れた技術を採用しました．
その後，Notion を用いてドキュメント管理を行いました．開発中も，進捗管理や議論の記録を行いました．
進捗
ぶっちゃけ，発表の直前まで 2 割も完成していませんでした笑
発表日の前週金曜日から前日（日曜日）の 3 日間（以下，大詰めフェーズと呼びます笑）にかけてほとんどの開発を進めました．
大詰めフェーズ
以下，大詰めフェーズで実際に私がおこなったことをご紹介します．
-
メンバーといっしょにデータベース設計
学園祭においては最重要である割引機能の実装に悩んでいました．具体的には，「商品ごと・会計ごとのどちらに割引を適用させるのか」「割引は割合か金額か」などです．
議論の結果，今回は一番シンプルに感じた「会計ごとに一定額の割引を適用させる」という方針を採用しました．
割引は複数適用可能であるとし，以下のようなデータベース設計にしました．
-
各機能の UI 設計・実装
今回は大きく 4 つの機能を実装したのですが，その実現に必要に必要な UI のほとんどを設計・実装しました．
以下のように，「まずホワイトボードで設計し」「それをコードに落とし込んで実装する」という流れで進めました．
つまりは，デザイナーとフロントエンドエンジニアを兼任した形になります笑
上記のように実装した後，フロント担当のメンバーからコードレビューを受けたり，バックエンド担当のメンバーからデザインフィードバックを受けたりしました．
とくに，私がメンバー間で数少ない学園祭の経験者だったことから，実際の使い心地をとにかく意識 しました．
発表資料作成
ツールとして， 本当は大好きな PowerPoint を採用したかった ですが，デザイン実装と共同編集のしやすさから，Canva を選びました．（笑）
作業量や記述内容が偏らないようにも工夫しました．まず私がアウトラインを作成した後，バックエンド担当メンバーにそれをデザインに落とし込んでもらい，各メンバーが担当した箇所をそれぞれ記入しました．
発表
いよいよ発表会です！
発表会はプレゼン形式で，スポンサーの方々も参加する形でしたが，ピザやお菓子・ジュースを囲みながら行われ，わりとカジュアルな雰囲気でした．
私たちメンターチームは一番最後に発表しました．メンバー数が多かったことから，私が代表して発表を担当させていただきました！
結果
最後に結果発表です．賞の選出は，スポンサーの方々による評価のほか，部員による投票も含めた形で行われました．
結果として，私たちは「2 位」を受賞することができました！！！
副賞として，スターバックスギフトカードをいただきました ✌️
ハッカソン全体での受賞結果は以下のとおりです！
| 賞 | チーム名 | テーマ |
|---|---|---|
| 1 位 | E | 単位危機管理アプリ |
| 2 位 | メンター | q-pos |
| 3 位 | D | Unity ちゃん散歩 |
| 企業賞（GLEAP） | H | e-しりとり |
| 企業賞（HTS） | G | スマートスケジュール |
振り返り
簡単ですが，ここで私たちメンターチームの開発に関して，いくらか振り返りをしたいと思います．
よかった点
- 技術力をふんだんに活かせた点． 「福岡未到卒業生，IPA 未踏採択生，高専編入生 」などのスキルに溢れたメンバーで構成できたおかげで，完成度の高いアプリをつくることができました．
-
はじめての技術に挑戦できた点． 今回バックエンドに
Golangを採用しましたが，バックエンド担当メンバーの誰もGolangの利用経験がありませんでした．しかし，各メンバーが主体的に技術のキャッチアップや調査を行なってくれたおかげで，データベースや API を無事に実装することができました． - リソース変動に臨機応変に対応できた点． 一部のメンバーが体調不良により開発に参加できないという事態が発生しましたが，工数にマージンを見積もっていたことから（本当か？笑），とくに問題なくマイルストーンまで開発を進められました．
改善できる点
- 情報のありかを一元化する． 今回，タスク管理に「Notion のデータベース」「GitHub の Issue」の両方を使ってしまっていました．どちらかに一元化できればより情報の透明性が図れたと思います．
-
デプロイする． 今回プレゼン時にデモを披露しましたが，それは
ngrokというトンネルツールを用いた形式によるものでした．実際に AWS などのクラウドサービス上にデプロイできていればより完成度が高く見えたかと思います．
おわりに
惜しくも 1 位は獲れませんでしたが，私たちのテーマが与えられた実用的なものであったこと，その中でも最大限開発を進めたことを考えれば，十分に頑張ったほうだと自負しています！
そしてなにより，後輩たちがとんでもないスキルを発揮して面白い＋実用性の高いアプリを完成させデプロイまで持っていっていることに驚きと感動を覚えました！
開発したアプリに関しては，今後も開発を進め，九大祭のときに実際に運用したり，今回の開発の様子をご紹介できればと考えています．
今後も GLEAP に関わり，自身の開発力を高めていくとともに，後輩たちに開発のノウハウを教えていければと思います！
ここまでお読みいただきありがとうございました！！🙏
参考資料
-
今回発表した資料は以下のリンクに掲載しています．
-
GitHub レポジトリについては今後公開予定です！
Discussion