はじめに

私ともう１名の方を誘ってメンバ2人のチームでQiita Hackasonに参加しました。本記事はその振り返り記事となります。

今回のQiita Hackasonのテーマとしては「つながり」でした。
ハッカソンの期間としては2日間ですが、開発期間は実質1日、その後チームごとのプレゼンテーションの時間となっておりました。

詳細は以下の公式サイトの通りです。

アイデア発想の背景

私たちのチームとしては課題として「孤独」に焦点を当てました。
孤独にも種類があるとは思いますが、1人での作業時間が長いことを原因とした孤独を今回は想定しておりました。
よって対象のユーザとして考えていたのはPCにずっと向かいあっているようなデスクワークが長めの方です。

このような環境のユーザ同士がつながりを意識できるサービスがあればよいと思い、
思いついたのがオンライン自習室の存在です。
Youtubeで検索するとライブ配信されているオンライン自習室がいくつか出てきます。
これのWebバージョン、さらにチームメンバー2人とも触った事があったThree.jsを使用し、
3Dのオンライン自習室を作ってみようとアイデアがまとまりました。

制作物

ハッカソン期間中に作成したものは3D空間のオンライン自習室です。

フロント用リポジトリ

バックエンド用リポジトリ

機能としては大きく3点になります。

ユーザ、目標の表示
3D弾幕コメント
AI（Geminiに相談）

それぞれ紹介していきます。

①ユーザ、目標の表示

3D空間に表示される水色の球体がログイン中のユーザです。
各ユーザの上にタスク・目標等を表示しています。

②3D弾幕コメント

画面左下のテキストフィールド（メッセージを入力）に文字を文字を入力し送信すると、
3D空間内にテキストが表示されます。
WebSocket機能を利用し、他のユーザとリアルタイムコミュニケーションをとることができます。

③AI（Geminiに相談）

画面右下の「AIに相談する」ボタンを押すと、右側からポップアップ画面が表示されます。
ポップアップ内のテキストフィールドに相談したい内容を入力し、
送信ボタンを押す事でgemini pro apiにリクエストを送ります。
レスポンスが返ってくるとローディングが終了し、
レスポンスが表示されるようにしています。

技術構成

フロントはVite、React、TypeScript、Three.js、Material UIで構成しています。
バックエンドはFastAPI、Python、
インフラとしてはDBを使用するためsupabaseを利用しました。
AIに相談するチャットの機能にはgemini pro apiを使用しています。
まとめると次の図の通りです。

振り返り

◆良かった点

ハッカソンに向けて事前準備をしていた点

2名チームだったのでフロント、バックエンドをどちらが担当するか役割を分担できていた。
どんなフレームワーク、ライブラリを使用してWebAppを作るかというところまで決めていた。（フロント：Vite、React、TypeScript、Material UI、DB：supabase）
プレゼン資料のアジェンダくらいは準備できていた。
　⇒プレゼン資料の作成とアイデア出しを同時並行で進めて時短できたと思う。

大勢の方の前でのプレゼンを経験できた点

私自身プレゼンは緊張もあり苦手です。。
カンペをチラ見しながらですが今回はなんとかいけました。
苦手だからこそやってみてよかたたです。貴重な経験になりました。

フロント用とバックエンド用でリポジトリを分けて開発を進めた点

最初からフロントとバックエンドの2つにリポジトリを分けて開発を進めていきました。
フォルダ構造がごちゃらずに済んで良かったです。
フロント用リポジトリ

バックエンド用リポジトリ

◆難しかった点

Three.jsで表示してる3Dモデルの見た目の調整には苦労しました。
Three側のライトの当て方をもっと調整してみたかったです。

フロントエンド⇔バックエンドの情報の受け渡しも大変でした。
WebSocketを利用したフロントとの連携部分で何度も調整を繰り返しなんとか表示できました。。！
無事Three.js側で弾幕テキストが表示されて良かったです。

◆反省点

作りたい機能を設けすぎていた点

アイデアだしの段階であれもこれも作りたいになっていたと思います。
開発期間も実質1日しかないのでこれらは余裕があったら程度で、基本的な部分の作成に集中すべきでした。

3D空間のテーマをなんとなく決めてしまった点

星🌟をパーティクルで作りやすそうだしイメージがしやすかったので、
3D空間としては宇宙をテーマにしています。
ただ、今回のハッカソンのテーマは「つながり」なのでもっと親しみのある空間に設定しても良かったと思います。

終わりに

2日間のハッカソンでしたが、正直めっちゃ疲れましたw。翌日が休みの日で良かったです。
目標に向かって手を動かしてモノづくりをしているあのライブ感は充実してました。
今回は予選を突破する事ができませんでした。悔しいので次回また参加します！
私自身、ハッカソンが好きなのでもしよろしければ誘っていただけると嬉しいです！

いつもXで拝見しているちょまどさんにご紹介いただいたのは嬉しかったです！（22チーム目）。