はじめに

ハッカソンでWebサービスを開発するときの技術スタック比較第1弾、フロントエンド編です！

最近ハッカソンにたくさん出て、いろんな人の技術スタックを見てきたので、ハッカソンで成績を残しやすい という観点から、Webサービスの技術スタックについてまとめていこうと思います！

注意：自分の中で技術スタックはある程度固まっていて、採用しないスタックについても書いています。それらについては、採用しなかった理由 として参考にしていただけると。

フロントエンド

Next.js

結局これ。 Vercelデプロイが早いのも、tailwind.cssでのデザインコンポーネントが強いのも最強と言ったところ。

また、バックエンドや認証についてもNext.jsまわりですぐ実装できる、という意見もありますね。バックエンドはPrismaでApp router、認証はNextAuth.js、みたいな。
よほど短いハッカソンでない限り（2日間、JP HacksのHack Dayとか）、これらは使わない方が技術スタックの規模（これは僕が勝手に言ってるだけですが、スタック図がデカい方が一般に強い）、スケールしやすさのアピールにつながるので、バックエンドはバックエンドを作るのをお勧めします。

上述のTailwind CSSに加え、デザインコンポーネントは積極的に採用するべきで、Shadcn/UI、Chakra UIはよく使うと良いです。
個人的なおすすめはTailwind CSS + Shadcn/UI。

Nuxt.js

正直全然見ない。 開発の容易さ（SFCが保守しやすい・理解しやすい）みたいなのはあるけど、ハッカソン程度の規模のサイトでNext.jsよりNuxt.jsの方が上記要件から特に秀でることはないかなと。Next.jsも十分扱いやすい規模にとどまります。
あとNuxt.jsが珍しいから絶対審査員に詰められる。 「なんでNuxt.jsを使ったの？」に対して、「簡単そうだったんで…」とか言った日には負けます。

そういう「なんでこれ使ったの？」を避けるためにも、よくある技術スタックを使うことは多少の便利さがあります。

Hono.js

去年めっちゃ見たけど今年全然見なかった。 流行り終わった感じがある。

こういう新興フレームワークを使う上で気にしなければならないのは、Nuxt.jsと同じように選定理由の準備をしなければならない点と、AIの学習量がNext.jsよりも少ない ということ。（選定理由については、高速な実行が可能なためデモのために採用した、内部処理が重いため、などがあります）
正直おすすめはしない。

個人的な意見を言うと、ハッカソンは技術を学ぶ場じゃなくて披露する場なので（特に結果を残したいなら）、短期間のハッカソンで知らんものを取り入れるのはやめた方がいいです。技術的な挑戦って別に新しい技術を学んだことに対して使う言葉じゃない。

その他

Svelte、Compose Multiplatform、Flutter on the Webをそれぞれ1度だけ見たことがある（Compose MultiplatformについてはKotlin大好きさんが使ってたイメージ）。
それだけの熱意があればぜひ使って欲しいなと思います。そういう熱意って、なんだかんだ審査員大好きなので。

まとめ

結局、審査員になんでこれを選んだか、を説明できるなら、開発したいものに沿って選ぶべきです。ビジネス的な観点からも。
でもハッカソンだからね。僕も前に「SwiftUIでClean Architectureをやりました！」って言ったらすごい評価（チームメイトの手柄）された経験があります。技術にgeekであることはむしろ歓迎されるべきだし、そうなれる自信があるのなら、まだ見たことのない技術に飛び込んでみるのも良いのではないでしょうか。