ハッカソンへ初参加し、待ち時間を楽しくするサービス NANIMACHI を開発した話［Qiita Hackathon 2024］

はじめに

先日行われた Qiita Hackathon 2024 に友人と運営している団体、Rowicy一同で参加してきました。

本記事では、参加した経緯やメンバー、事前準備や当日の進め方などをご紹介いたします！

作成したサービス

待ち時間を楽しくするサービス「NANIMACHI」を開発しました！

主な機能は下記です。

• 待ちスレッド
  • 新規登録
  • 編集
  • リアクション登録(待ってる)
• コメント
  • 投稿

ちなみに、「NANIMACHI」は、俳優の反町隆史さんと同じイントネーションです。
NANI(↑)MACHI(↓)です。重要です。

発表スライド

参加した経緯

Rowicyでは現在、サービスの開発を行っております。
開発を進めていく中で、どのようなサービス・機能が世に求められているのか、これらをどういった技術で実現するかを考える工程にメンバー一同楽しさを感じておりました。
ただ、本業に支障をきたさないよう、無理のない範囲で進める方針であるため、本業が立て込んでいる時期などは進捗が出せず、気が緩んでしまうタイミングもしばしありました。

• サービスの開発の士気を再度高める
• ハッカソン内で一つのサービスを作り上げ、開発の楽しさを再認識する

上記の目的があり、Rowicy一同で参加をすることとなりました！

RowicyのWebサイトはこちら

メンバー

下記の4名で参加しました。
また、タスクもバランス良く分散することを意識して分担しました。

• Naoki (@Naoki_dev)
  • 担当
    • フロントエンド
    • スライドテンプレート作成
    • 発表用スライドベース作成
• RiiiM (@riiim400th）
  • 担当
    • バックエンド
    • 開発環境構築
    • デプロイ環境構築
• Millin (@millinya319)
  • 担当
    • バックエンド
    • サービスカラー選定
    • 発表用スライドベース作成
• Tanizaki (@l8blb)
  • 担当
    • バックエンド
    • サービスロゴ作成
    • プレゼンテーター

事前準備

ハッカソンは事前準備が大事という噂を耳にしていたため、約一カ月前から準備を行いました。
参加してみたいけど何をしたら良いかわからないという方はぜひご参考いただけますと幸いです！

ざっくり技術の選定

当日の実装内容によって変更する可能性もあるため、あくまでざっくり、使う言語・フレームワーク・デプロイ周りを選定しました。

ちなみに、今回開発した「NANIMACHI」の技術構成も、事前に決めた技術をベースとして、必要な部分のみ変更する形で進めました。
下記が当日採用した構成です。(大枠のみ掲載してます。)

本番を意識したデモンストレーションを実施

仮のテーマを作成し、前述で選定した技術をベースに何を作るかのディスカッション ~ 実装までを1日かけて行いました。
このデモンストレーションをしていたおかげで当日迷わず進められたシーンも多々あったので、実施する価値はあると思います。

スライドテンプレート作成

こちらは最悪なくても良かったのですが、今後もハッカソン含め他のイベントに参加する際、使い回しができそうだなと思い、筆者がベースを作成し、メンバー全員で手を加えブラッシュアップをしていきました。
実際に当日の発表資料作成にも使用しましたが、なかなか良いテンプレートができたと自負しています。
ちなみに、RowicyのロゴはメンバーのRiiiMが作成してくれたものです。
何度見てもかわいい。お気に入りのロゴです。

当日の進め方

方針決め

テーマが「オープン」という広い意味のものであったため、チーム内で「オープン」の定義を揃えるために2時間ほどディスカッションを行いました。
そして、下記の2つのキーワードにフォーカスしたサービスを開発する方針としました。

• オープン待ちの時間
• オープンな交流の場

開発するサービス決め

いよいよハッカソンの肝となるサービス決めです。
ただ、私たちのチームでは前工程でしっかりと方針を決めていたこともあり、

< オープン待ちの時間ってワクワクするよね。例えば超人気店に並んでる時とか、ライブの待ち時間とか。
< でも、待つのが嫌な人も一定数いそうだよね。
< たしかに。待ち時間をポジティブに捉えてる人はよりワクワクする時間に、ネガティブに捉えてる人には楽しい時間に感じてもらえるようなサービスにしたいね！
< 良いね！待ち人数を可視化して、多い＝盛り上がってるような表現をする、かつ待ち人同士がコミュニケーションを取れたら良さそう！

のような流れでスムーズに決まりました。
その後、必要な機能の洗い出しをし、簡単にDB設計をして実装に移りました。

実装

フロント周りの環境構築は筆者のNaokiが、バックエンド・DB・デプロイ周りの環境はRiiiMが担当しました。
環境構築完了後、ガリガリコーディングを進めました。
みんな睡魔に負けず頑張りました
迷ったところやお願いしたいことは都度相談し合い助け合う、最高のチームワークでした。
Rowicy 𝑩𝑰𝑮 𝑳𝑶𝑽𝑬！

発表用スライドを作成

こちらは事前に担当を決めていなかったので、早めにタスクが空いた筆者NaokiとMillinでベースを作成し、最終調整時に全員で手直しを行いました。

最終調整

完走直前...
最後に成果物および資料の最終調整を全員で行いました。
ダミーデータを投入したり、画像・ロゴを作成したり、資料の調整をしたり、必要なものを手当たり次第に潰していきました。
実は裏でダミーデータ投入時に画像が全て吹き飛ぶアクシデントもありましたが、なんとか提出まで漕ぎ着けることができました...！

結果

最後の力を振り絞り、プレゼンテーターTanizakiがサービスに込めた想いと魅力を最大限にアピールする発表をしてくれました！

そして結果は...
予選補欠通過（？）でした。惜しい...！

悔しい気持ちもありますが、どちらかというとよく頑張った、やり切った、という気持ちが強いです！
お疲れRowicyメンバー！お疲れ自分！

まとめ

今回ハッカソンに参加して、改めてチームで作りたいものを定め、作り上げるという目標に向かって開発を行う楽しさを感じました。
この気持ちを忘れずに楽しんで今後の開発ライフを送ろうと思います！

この記事を読んで、少しでもハッカソン面白そうと感じていただけたら嬉しいです。
筆者自身、初めて参加して、休日夜通しで開発をしたことによる身体へのダメージもありましたが...
それ以上に得られたものが大きかったです！
みなさまもぜひ参加してみてください！

最後までお読みいただきありがとうございました！