RSS Hackathon 2025 Beyond 参加記
はじめに
9月6日～9月7日の2日間で行われた，RSS Hackathon 2025 Beyond に参加してきました．自分はチームアップ希望で参加し，"Linuxペンギン"として，主にReactを使ったフロントエンド開発を担当しました．即席チームでしたが，メンバーに恵まれ，期間中にアプリのデプロイまで行うことができ，奨励賞をいただけました．本記事では開発の過程や学んだことの忘備録として，参加記を書いていきたいと思います．
開発物関連リンク
本ハッカソンでの開発物は，"ナニモノ？"というWebアプリです．グループワークを行う，即席（初対面同士）チームのメンバーを対象としたもので，「初対面の人同士の気まずい雰囲気や，そのときの役割分担の難しさ」という当たり前を解決するWebアプリになります．
目次
参加したきっかけ
Web開発の勉強をするにあたり，アウトプットの機会が欲しかったのがきっかけです．
私自身，Web開発の勉強は今年の5月頃から始めました．HTML, CSS, JavaScriptといった基礎から，Node.js，Express, Reactといったフレームワークなど，フロントエンドからバックエンドまで幅広く学んでいます（特に最近は"Express+Mongoose"によるNoSQLデータベースを利用した開発や"Ruby on Rails"を利用した開発について学習しています）．しかしもっとも効率的な学習にはアウトプットも重要で，そのインプットとアウトプットの黄金比は「3:7」と言われています．
そこで私はアウトプットのため定期的にハッカソンに参加していて，今回が3回目の参加となります．
1日目
10:00~11:00（アイデア出し）
Zoom上で開会式に参加後，チームメンバーと顔合わせをしました．
自分は元々チーム"しろくま"だったのですが，5人中3人が音信不通になっていました．
そこで運営のご配慮もあり，同様の状況になっていたチーム"Linuxペンギン"と急遽合体，5人チームで開発することになりました．合体するまでの間，それぞれのチームでどんな開発物を作るか話し合っていましたが，最終的にはより良いアイデアを出していた"Linuxペンギン"の案を採用することになりました．
11:00~12:30（仕様検討・役割分担）
開発物の案は決まったので，より具体的に仕様検討をしていました．
案の中で特に抽象的な部分を具体的に定義し，最低限実装するべき機能（MVP:Minimum Viable Product）や開発計画について検討していました．内容は大体下記のようでした．
-
どのように同一の利用者グループを判別するか
A. グループごとに共通のリンクを発行する形 -
どんなWebページが必要か
A. 下記のように決定- リンク発行ページ
- 基本情報入力ページ
- 質問回答ページ
- 結果表示前の待機ページ
- 結果表示のページ
-
割り当てる役職の種類数
A. 最低でも5種類 -
質問の内容や個数
A. LLMのユーザーの個性理解のため，個数は多い方が良い -
役割分担
A. フロントエンド側は自分含めて3人，バックエンド・インフラ側は2人が担当
案をある程度まとめた後は，運営の方に進捗報告を行いました．そこで，「チームで行う業務によってどんな役職が存在するか分からないため，出力する役は書記や司会のような具体的なものにするより，ある程度幅を持たせた，抽象的なものの方が良い」というご助言をいただけました．
その後はフロントエンド側，バックエンド側それぞれでグループに分かれ，開発に入りました．
フロントエンド側は，まず各ページの開発の分担を行いました．その後，各Webページの具体的なUI (User Interface)の設計&イメージの共有を行いました．イメージ共有は，メンバー間での認識に齟齬が出ないようにするため，視覚的に行うことが重要です．今回はツールとして Google Slide を用いました（デザイナーの方は Figma を使っているそうです．コンポーネントを中心に再利用・一括管理ができて便利なので，自分もいつか使えるようになりたい...）．
12:30~13:30（昼休憩）
チームとしての昼休憩．フロントエンドチームは早めに昼食を済ますことができたので，13時頃からUIの設計&イメージ共有を再開していました．
13:30~15:00（詳細な仕様検討・コンポーネント設計）
バックエンド側のメンバーと合流後，UIの設計中に発生した仕様に関する疑問点の解消を行いました．
内容は大体下記のようでした．
-
キャラクター画像はどう用意する？既存？AI生成？
A. AI生成（Gemini） -
質問は1ページに全て表示する？ページと質問を1対1対応させる？
A. 1ページに全表示 -
全員答える質問は同じか，ランダムか？
A. 全員同じ．"質問内容"を初対面の人同士の会話のネタにできるから
UIの視覚的な設計を終えた後，3人それぞれのWebページのイメージを互いにチェックし，コンポーネント設計を行いました．
図1 私が担当した質問回答ページのイメージ設計
コンポーネント設計では，複数ページで流用可能な「共通コンポーネント」を洗い出しました．
最初に共通コンポーネントを作成し，各ページの担当者がそれらを共通利用することで，効率的に開発を行えるからです．共通コンポーネントは，こちら のようになりました．自分はその中でも，ButtonとTextInputFieldを担当することになりました．
15:00~19:00（共通コンポーネントの開発）
フロントエンド側も開発に入りました．
私は，まずReactを初めて触るメンバーに，コンポーネントの基本的な作成手順について簡単なレクチャーを行いました。チーム開発では個人の速度より全体の足並みを揃えることが重要だと考えたためです．その後自分の開発に入りました．
私が担当しているコンポーネントの一つであるTextInputFieldは当初，基本情報入力ページと質問回答ページにて"文字列の入力を受け取るコンポーネント"の予定でした．しかし開発中，名前のような1行で収まる入力と，質問に対する回答のような複数行の入力を受け取る場合でそれぞれ適切なスタイルは異なり，別々の2つのコンポーネントを用意する必要があることに気づきました．そこで，複数行用のTextInputFieldと1行用のOneLineInputFieldに分割することをチームに提案し，追加で設計・開発を行いました．
17時頃までは，他のフロントエンドメンバーが開発したコンポーネントのレビューや，自分が担当したButtonとTextInputFieldの開発を行い，それ以降はOneLineInputFieldの開発に移りました．
バックエンド側では，16時頃にAPI設計（ルーティングやJSONの形式）を完了し，その開発前に詳細を Notion で共有してくれたり，Render 上で仮デプロイをしてくれるなど，進捗が見られました．
19:00~21:30（1日目終了&夕食休憩）
運営からの所連絡を終えた後，自由開発の時間に．チームでは，19:30~21:30 まで夕食のために一旦解散したものの，自分は20:30頃まで共通コンポーネントの開発を行っていました．
21:30~（担当ページの開発開始）
開発メンバーと再合流し，「夕食何食べた？」などの雑談を軽く行った後，開発を再開．
自分は担当している"質問回答ページ"の開発に入りました．自分はReactの状態管理の原則（State変数は必要な階層まで持ち上げるが，必要以上に持ち上げない）を意識したり，可読性・保守性のためQuestionContainer（質問と回答入力フォームをまとめたもの）というコンポーネントを追加作成するなどしていて，想定より開発に時間がかかっていました．
他のフロントエンドメンバーは進みが早く，22時過ぎ頃？には担当ページの開発を終え，プレゼン資料の作成に入っていました．バックエンドメンバーもAPIの開発が一部完成し，きちんと動作するかチェックしてほしいという段階に．チームが次のフェーズに進む中，自分はアプリケーションのコアとなる質問回答ページの開発に集中しました。
2日目
~01:00（担当ページの開発完了）
日付が変わり，自分が担当の"質問回答ページ"の開発を終えました．
01:00~04:00（フロントエンド側からのAPI呼び出し実装）
フロントエンド側のレンダリングに関する実装は区切りがついたため，フロントエンドとバックエンド間の連携処理の実装を行っていました．自分は"質問回答ページ"にて，バックエンドサーバへのAPI呼び出しを実装しました．具体的には，fetchAPIとasync/awaitを用いて，質問一覧のGETリクエストと，回答のPOSTリクエスト処理の実装，また取得したデータ（JSON）をReactのStateで管理し，画面に反映させる部分を担当していました．
実装を終えて時間ができたメンバーから，成果物提出フォームに記述する内容のすり合わせとGoogleドキュメントへの下書きを行っていました．
04:00~08:00（仮完成&最終調整）
デプロイで動作の確認も行い，一旦開発物のMVPは実装を終えることができました．そのためプラスαとして，各Webページをより見栄えの良いデザインにしていました．
メンバーにデザインに強い人がいて，自分や他メンバーからの要求に対して，"Tailwind CSS"を用いて細かい調整を行ってくれました．
08:00~10:00（完成&動画撮影&朝休憩）
プラスαの開発も終わり，Webアプリが完成しました．
デプロイ，チームでの試用運転を済ませ，動画撮影を行いました．自分はデスクトップPCで作業していたのもあり，RAMに余裕があったため，デモ動画撮影を担当しました．一度テストで録画してみて，音が入っているか確認後，撮影．動画撮影では，本アプリ上でURL生成 -> discordでURL共有 -> 本アプリ上で操作 の流れで行いました．
撮影後，9:00~10:00はチームで休憩を取りました．自分は休憩前に撮影した動画を確認していたのですが，問題が発生しました．なんと，ずーっとdiscordの画面が映っているという状況でした．動画撮影ではWindowsに標準搭載されている Xbox Game bar を用いていたのですが，こちらは基本1つのアプリしか撮影することが出来ないらしく，デスクトップ全体画面録画はできないようです．そこで，OBS Studio を用いて再撮影を行いたい旨をチームに伝えました．
残り時間で朝食，仮眠を済ませました．
10:00~12:00（開発物の提出）
動画撮影（2回目）と成果物提出フォームの記入を行っていました．
10:00集合でしたが，徹夜の影響もあり，まずは集まれるメンバーで作業を開始しました．その場にいた3人で追加撮影を行い，その後，メンバーが続々と復帰し，作業に加わりました．
自分はGoogleドキュメントの内容をformに記述&添削&提出（プレゼン資料，ソースコードURL，PR内容など）を行っていました．
12:00~13:00（昼休憩）
昼休憩の時間でした．
13:00~17:45（発表会～表彰式）
発表会が行われました．発表では「実は発表者も，本開発物で"リーダーシップ"があると判定された方が担当しています」という流れで行いました．メンバーの一人が発表を担当したのですが，制限時間のピッタリ3分で発表を終えていて，分かりやすく，良い発表をしてくれました（感謝です）．
他チームの発表では，勉強支援や目標達成までのタスク生成を行うアプリ，画像処理を用いたもののほか，スマホで球技を行うゲームなど，様々なものが開発されていて，とても刺激になりました．
発表会を終え，1時間の休憩があったのち，表彰式が行われました．
結果，我々"Linuxペンギン"は奨励賞を受賞しました！とてもうれしかったです．
17:45~19:45（懇親会）
運営の方々と懇親会が行われました．私は懇親会で，自分チームが今回受賞できた理由や即席チームでのハッカソン参加について質問していました．
受賞できた理由としては，
- 開発物がきちんと動く
- プレゼンの中で，開発物をきちんと利用し，活用している（ストーリーがきちんとできている）
という点が高評価だったそうです．
また，即席チームでの開発について，
- 技術選定は難しく，ベストプラクティスはない
- 技術だけの選定にとらわれず，最後の発表者やアイデア担当などに各メンバーの役割分担を行うも手
というご助言をいただけました．
学びと気づき
学び
デプロイの重要性
ハッカソンでは最終的な成果物がデモだけではなく，デプロイまでできていると評価が高い
と，審査員の方からコメントをいただきました．開発物はユーザーが使えてこそだと私も思うので，今後のハッカソンでもデプロイまで行うことを目標に取り組んでいきたいと思います．
フルスタックに学ぶことの利点
Webアプリの開発では，最終的にフロントエンドとバックエンドの連携を行う必要があります．この時に双方の知識があると，その連携もしやすいです．本ハッカソンでも，バックエンドチームからのAPI設計の説明の際，つまずくことなく内容の理解・フロントエンド側の実装方針をイメージすることができ，フルスタックに技術を勉強していることの利点を実感することができました．
便利なAIツール
Geminiのような生成AIや，GitHub Copilot などのAI agentは私も普段から利用していたのですが，本ハッカソンでの発表会資料の作成に用いた Canva というAIツールは初めて触れました．今の時代，AIを上手く使いこなす能力はエンジニアに必要不可欠であるため，AIツールの知見はこれからも増やしていきたいです．
気づき
開発速度を上げるためのAI活用法
自分は開発中，生成AIは主に発生したエラー解消の際に利用していました．しかし，他メンバーの話を聞いてみると，
- AI に一旦ひな形を書かせる
- 微調整は自分で行う
という流れで開発していたようです．ハッカソンという限られた時間では，素早い開発が求められます．これまではエラー解消が中心でしたが，チームメンバーの活用法を取り入れ，今後はコードのひな形作成などでも積極的にAIを取り入れていきたいと思います．
おわりに
人生初めての徹夜でしたが，自分の技術スタックの知識を生かした開発体験ができ，とても有意義な時間でした．チームメンバーの皆さん，改めてありがとうございました！また，本ハッカソンを開催してくださった運営の方々に感謝申し上げます．今回の経験で得た課題と学びを糧に，これからもWeb開発を続けていきます！
Discussion