2025年度 1-Monthon 12 班: 総合進捗環境『Progres』

これは 2025 年度 1-Monthon にて制作された作品です。部内投票により新人賞を頂戴しました。

作品概要

traP に入部して以降耳にする頻度が格段に増えた単語の一つに、「進捗」があります。

現在に至るまでまだ一度も明確な定義を耳にしたことはありませんが、兎にも角にも、このサークルではその「進捗」というものを生み出すことこそが絶対的な正義であるとされているようです。~~なんかこわいですね~~

「進捗」の分かりやすい指標としては traQ (部内チャットツール) への投稿があり、先輩方も我々新入生も、挙って #***/***/progress といったようなチャンネルにおいて日々の頑張りを共有しているようです。

しかしながらチャットツールという性質上、作品共有の場として捉えたときの一覧性や検索性にはやや難があります。これをどうにかして解決できないかという思いの元、我々の班としては、traQ へ投稿された作品と、その付加情報や他者の反応とを線で結びつけられるような、網羅的な作品検索・レビューサービスの制作を試みました。

メンバー紹介

後述しますが、今回は開発の基盤として Next.js を採用したため、全員がフロントエンドとバックエンドを満遍なく触れられるような構成となりました。

役割分担

uni_kakurenbo: リーダー, フロントエンド, バックエンド
ruraruto246: チーフデザイナー, フロントエンド, バックエンド
shr1444: フロントエンド, バックエンド
arisu_0086a2: フロントエンド
Ch-eeze: フロントエンド

技術スタック

主には Next.js を用いました。traP に React の風を吹かせよう。
正直フロントエンドが人員不足になることは目に見えていたので、全員をフロントエンドエンジニアに仕立てるつもりで準備していました (結構な分量のチュートリアルを嫌がらずに走ってくれたみんなに大感謝)。Go + Vue.js がデファクトスタンダードになっている traP においてかなり異質な構成であることは否めませんが、これは単に逆張りをしたかったというわけではなく、開発期間とメンバーの特性などを鑑みた結果、Next.js に手を出してみるのも手だろうとある程度合理的に意思決定を進めたつもりです。振り返ってみても真面目にサーバーつくっている時間はなかったので良い判断だったかな、と思っています。

短期開発ということもあり、UI ライブラリは積極的に利用する方針で HeroUI を採用してみました。癖のあるライブラリではありますが、適当に作ってもそれなりに整った見た目になってくれるので助かりました。短期開発には欠かせない Tailwind CSS との相性がよいのも嬉しいポイントです。

ORM として利用した Prisma も、migration 周りでやや難はあるものの、TypeScript との相性はやはり抜群で、今回の開発環境においてはまさにあつらえ向きだったと思います。

traQ の API を叩く必要があるので、その際のクライアントには cp20 神の創造された traq-bot-ts を利用しました。

部内 PaaS 基盤の NeoShowcase にデプロイしたのですが、メモリの制限が 200MiB と Next.js にとってはかなり厳しく、画像を扱うことが困難だったので、その部分に関する処理だけは Go を用いて実装されています。ですから、実は "だいたい" フルスタック TS というのがより正確です。

今考えると無理に NeoShowcase を使わなくても良かったかもしれないのですが，まあサークル内ハッカソンですしせっかくですからね。

ひとこと

@uni_kakurenbo

やる気満々で臨んだ 1-Monthon のつもりだったのですが、免許合宿とダダ被りで班員のみなさんには沢山ご迷惑をおかけしました......
時間が限られている中 Next.js を実験的に採用してみたのですが、これがなんとかうまくハマったのか短期でガッと集中して開発することができ、ギリギリある程度動くところまで完成させることができました。巷では Next.js は難易度が高く初心者には厳しいといったような話もちらほら耳にしますが、使いようによってはよい武器になるのではないかと思います。諸刃の剣であることに変わりはありませんけどね。
データベースはじめ設計まわりも初めてやったので、強い人が見たらありえないことをしている可能性も全然あるのですが、ハッカソンクオリティということで見逃していただければと思います........ これからもっと勉強します。

リーダーとしては班員のみんなに楽しんでもらうことを第一に考えていました。終了後に「楽しかった」との声を沢山聴くことができて嬉しい限りです。

@ruraruto246

この度は新人賞に選んでいただき本当にありがとうございます！
実はハッカソン自体が初めてだったのですべてが新鮮な約1か月でした。

今回のwebアプリ制作ではデザイン全般とフロントを少し担当しました。
フロント関連はよちよち赤ちゃんなところからのスタートでしたが、リーダーの教えのおかげでどうにか形にできたと思います！ほんとうにありがとう。
あとロゴデザインを褒めてくれた方々本当にありがとうございます。

みんなで企画立ててみんなで開発して、discordで話しながら開発することってこんなに楽しいんだ～！って日々（短期集中型）わくわくしていました。日和らずワンマンソン参加してよかった！
メンターのお二方、そしてメンバー全員に感謝です！最高の経験をありがとうございました。
もっと多方面につよつよになって来年もチャレンジしたいなと思います！

@shr1444

事前準備から最後の日まで楽しくやることができました。
リーダーの @uni_kakurenbo が使う技術の勉強法やチュートリアルまで教えてくれたので、ゼロの状態から色々学ぶことができました。
Nextjsを学んでいたときは本当に楽しかったです。
会議などでも円滑に楽しく進めていただきチームの皆さんに感謝してます！
ありがとうございます！お疲れ様でした！

反省点としてはあんまり時間がかけれなかったので、もっと積極的に開発に携われたらもっと良いものが作れたのではないかと思っています...
もっとワンマンソン期間の他の予定を減らすべきだったなと思ってます。

忙しい中運営やメンターをしていただいた先輩方、ありがとうございます。
また新入生賞に選んでいただきありがとうございます。これを励みに頑張ります！

@arisu_0086a2

お疲れさまでした！
初めてのweb開発で分からないことだらけだったんですが、リーダーの @uni_kakurenbo が参考になるサイトを教えてくれたりたくさんサポートしてくれたのでとてもやりやすかったです！
最初の一週間はTSやNextjsのお勉強に費やしたんですが、それ以降の期間はほぼ全くといって作業もできなかったのが申し訳なかったです。
それでも皆さんと作業できたのがとても楽しかったです！ありがとうございました！また、運営やメンターの皆さんも忙しい中ありがとうございました！