これは2026年度春ハッカソンの参加記です。他の班の参加記などは #ハッカソン26spring のタグの他の記事をご覧ください。
こんにちは、25Bのくあらんてぃんです。ブラウザ系の SNS って改造したくなりますよね？異論は認めません。
2026/6/27・28の2日間で開催された春ハッカソンに参加したので、そこで作ったものを自慢しようと思います。
sumire0517
作ったもの
私たちが作ったものは球面 traQ クライアントこと「tra球」です！
惑星を形成しているのは、そのチャンネルに投稿されたメッセージたちです。上の画像ではわかりませんが、小チャンネルは親チャンネルの惑星の「衛星」として実装されています。他にも、そのチャンネルの閲覧者は人工衛星のようにくるくると惑星の周りを周ってくれたりします。
左右には本家 traQ よりもシンプルでスタイリッシュなサイドバーを配置しています。左側がチャンネルリスト、右側は現在閲覧中のチャンネルの統計情報が載っています。
なんで作ろうと思ったの？
traP では部内コミュニケーションツールとして Slack や Discord ライクな内製サービス traQ を開発しています。
spa
traPtitechtraQ にはチャンネルの階層化システムや、投稿メッセージの高度なマークアップ記法のサポートなどがあり、活動の活性化に貢献しています。
しかし、チャンネル間の移動が面倒であるという問題や、1メッセージに情報をたくさん載せることによるメッセージの一覧性の低下の問題が (一部では) 挙げられていました。
今回のハッカソンでは「かん」「きゅう」というお題が与えられていたため、メッセージを球状に表示したり子チャンネルを環状に並べたりする工夫によって、これらの問題を解決できるのではないかと考えました。
というのは建前で、宇宙空間上でメッセージが惑星のように浮かんでたらなんか面白そうじゃね？と思ったからです。
どうやって作ったの？
「子チャンネル = 衛星」という概念を実装したいと考えると、traQ のクライアントが行っている操作と同様のことを行いたくなります。しかし、traQ は6年以上もの継続的 (断続的？) なコントリビューションが行われてきたプロダクトです。いくら AI 時代だからといってもこれを再実装するのは賢明ではありません。
ここで、準備期間のガイドラインを見てみましょう。
事前に変更を加えないテンプレートの使用は許されていそうですね。traQ_S-UI をテンプレートとして使うことにしましょう！
ということで私たちの使用技術と戦略は以下のとおりです。
- traQ_S-UI
既存リポジトリをベースにすることで、開始直後から動く状態を実現できます！
また、新入生に開発クオリティのコードを読んでもらえるのも嬉しいポイントだと思います。 - TresJS
「Vue.js Three.js」と検索したら一番上に出てきたので採用しました。先輩によるとあまり良い選択ではなかったらしい (実際今回も問題にぶつかって hacky な解決をした) のですが、そもそも 3D 経験者がいない・2日間しか開発しない・AIエージェントがいる という状態なので問題ないと思います - Vue.js
traQ_S-UI は Vue.js を採用しているのでこれを書いていきます。バックエンド志望のメンバーもいたのですが、フロントエンドに転向してもらいました。他の Web 班と比較して、平均2倍のフロントエンドエンジニアを擁することで、フロントエンドのクオリティ向上に注力することができました。
感想とか
最後に各メンバーから担当した領域とハッカソンの感想を教えてもらったので載せておきます
ramdos
クライアントの実装を担当しました。普段のサーバーサイド開発ではコードをいじった後コンパイルで数分待たされていたので、特にCSSを当てる作業では書いたコードがホットリロードで見た目としてすぐに反映されてとても体験が良かったです。
全体を通じて「書きたいコードを書く」が体現できてとても楽しかったです。ありがとうございました！
gurukun41
クライアントの実装を担当しました。バックエンドやフロントエンドに当てはまらなそうなことしかやってなかったのですが、初めてちゃんとフロントをやれて楽しかったです。3年生であるにも関わらず初心者として参加させてもらえて感謝しかありません。
1日目はtheフロントエンドなことを2日目は3Dというちょっと変わったことをやらせてもらえて非常にいい体験ができました。
Amuzak
クライアントの実装を担当しました。私は開発経験が無かったため、春墓開始前は本当に仕事できるのだろうかと不安を募らせていました。が、いざ始まってみると優秀な先輩方（とClaudeとCopilot）から沢山の助力を頂くことができ、お陰で未経験ながら右サイドバーの改造に貢献することができました。
初日の半分くらいはコンポーネントの実装と実際の表示の対応関係や、コンポーネント間の依存関係を追うのに費やしました。2日目もVueとCSSの仕様と格闘していた時間がほとんどだったと思います。知らない言語の使用と知識・経験不足に苦しめられた2日間でしたが、自分が作ったものが動く喜びと楽しさを知れた最高の2日間でした！
Tiri_men
クライアントの実装を担当しました。
全くのVue初心者で開発のためにどこを触れば何が変わるのかすらよくわからない、自分が全然何も知らなかったことを実感した2日間でしたが、先輩にチーム開発の作法から手取り足取り教えていただき、いくつか機能の追加リクエストを出せました。
1日目は3Dの背景づくり、その後はメッセージの拡大画面などを先輩方の指摘を受けつつ作りました。自分が機能実装したものが発表でスクリーンに大きく映し出されるのが嬉しかったです。先輩方の開発の様子を間近で見れてすごくよい経験になったと思います！
i_am_13phobic
クライアント実装を担当しました。本番前日に初めてVue.jsに触れた初心者です。本番では、コンポーネントという概念すら知らないレベルなのにもかかわらず、先輩に手取り足取り教えてもらい、簡単なデザイン変更を行うことができました。
gitの使い方もおぼつかなかったが、なんとプルリクを出すことができました。少しながらですが、自分の中のVue.jsやバックエンド開発の解像度が上がりました。これからも、この経験を活かせれたらいいなと思います。
quarantineeeeeeeeee
クライアントの実装を担当しました。クライアント志望の経験者は僕一人なのでとても不安でしたが、強い先輩と意欲的な後輩とLLMという潤沢な計算資源のおかげでなんとか乗り越えることができました。開始前は教育的なハッカソンにする方法は……などと考えていましたが、いざ始まってみると飛んでくるプルリクエストを倒しながら自分の進捗を出すことだけで精一杯でした。今回は満足いく結果を出すことができたと思うので、これをモチベにさらに成長して今後も挑戦したいです！
