💨

【Next.js × Supabase】全国のデータをスタイリッシュに可視化するアプリを1週間で作ってみた

に公開
テーマ「2025年の最も大きなチャレンジ」
Next.js
Vercel
Tailwind CSS
Supabase
Drizzle
tech

0. はじめに（Introduction）

我々は、見えない衝撃を可視化する必要があった。

本日、全国ガス観測システム『He-koita（へーこいた）』をリリースしました。

OGP画像

この記事は、この一見ふざけたシステムを、たった1週間で、しかもモダンな技術スタックを駆使していかに真剣に構築したか、その技術的な裏側を共有するものです。

1. 作ったもの（Product Overview）

コンセプト: 「無駄に洗練されたハイテク計器」

真面目な記録アプリへのアンチテーゼとして、徹底的に「カッコよさ」と「無駄な高機能さ」を追求しました。

主要機能

1. 衝撃の可視化（Discharge）

ボタンを押すと、心地よいアニメーションと共に「放屁」が記録されます。

2. スタイリッシュなランキング（Ranking Board）

どの都道府県が最も活発か、ラグジュアリーなデザインでランキング表示します。

3. 日本全国リアルタイム観測（Realtime Map）※実装予定

【今後の目玉機能】
誰かがどこかで「屁」をこくと、リアルタイムで日本地図上の該当エリアがピカッと光る機能を現在開発中です。
Supabase Realtimeの真骨頂をお見せする予定です。

2. 技術スタックとアーキテクチャ（Tech Stack）

「月額0円」かつ「爆速開発」を実現するための選定です。

採用技術

  • Frontend: Next.js (App Router)
    • Vercelへのデプロイの容易さと、next/ogによる動的OGP生成のために採用。
  • Backend/DB: Supabase
    • 認証不要で使えるPostgresとして採用。将来的にはRealtime機能を活用し、WebSocketサーバーを自前で構築することなく、DBの変更を即座にクライアントに通知する予定です。
  • ORM: Drizzle ORM
    • TypeScriptとの親和性が高く、型安全にDB操作を行うために採用。マイグレーション管理も容易です。
  • UI: Tailwind CSS + shadcn/ui
    • 「黒×金」のラグジュアリーな独自デザインシステムを爆速で構築するため。
  • Map: React Simple Maps
    • 軽量かつReactコンポーネントとして扱いやすい日本地図ライブラリ。

3. 技術的なハイライト（Technical Highlights）

開発中に特にこだわった（そして無駄に時間をかけた）ポイントを紹介します。

Pickup 1: shadcn/ui で作る「ラグジュアリー・テック」なデザインシステム

「高級感」を出すために、Tailwindの設定でカスタムカラー（ゴールド）を定義し、全体をダークモードで統一しました。

/* globals.css */
:root {
  --gold: 218 165 32; /* #DAA520 */
  --background: 0 0% 0%; /* Black */
}

shadcn/uiのコンポーネントをベースにしつつ、ボーダーやテキストカラーにこの#DAA520を徹底的に適用することで、「無駄に洗練された」 UIを実現しています。
モーダルが出現する際のアニメーションにもFramer Motionを使用し、リッチな体験を提供しています。

Pickup 2: Next.js (next/og) による動的OGP生成

SNSでシェアされた瞬間に、そのインパクトを伝えるために、動的OGPを生成しています。
「〇〇県でレベル5の放屁を観測」というテキストを含んだ画像をオンデマンドで生成し、Twitter（X）のタイムラインを埋め尽くす戦略です。

Pickup 3: Drizzle ORMによる型安全な開発体験

Supabaseと組み合わせてDrizzle ORMを採用しました。
スキーマ定義から型を自動生成できるため、開発スピードが格段に上がりました。

// schema.ts
export const discharges = pgTable('discharges', {
  id: uuid('id').defaultRandom().primaryKey(),
  prefecture: text('prefecture').notNull(),
  level: integer('level').notNull(),
  created_at: timestamp('created_at').defaultNow().notNull(),
});

4. 1週間でリリースするための戦略（Development Strategy）

「Less is more」の徹底

  • ログイン機能を捨てた:
    • 「屁を記録するのにログインは必要か？」と自問自答し、MVPとしてはゲスト利用のみ。これにより認証周りの実装工数を削減。
  • 機能の絞り込み:
    • 「記録」と「閲覧（ランキング）」だけにスコープを限定。コメント機能やいいね機能は（実装したかったですが）涙を飲んでカットしました。

個人開発のスピード感

迷ったら**「面白い方」を選ぶ。
「このアニメーション、過剰かな？」と思ったら採用**。「この文言、真面目すぎるかな？」と思ったらボツ。
この判断基準が、迷いをなくし、開発スピードを加速させました。

5. おわりに・今後の展望（Conclusion & Future）

技術は使い方次第です。
最新のNext.jsとSupabaseを使って、こんなにバカバカしいことも真剣にできる。それがエンジニアリングの楽しさではないでしょうか。

今後の展望

  • 日本全国リアルタイム観測機能: Supabase Realtimeを使って、地図がピカピカ光る機能
  • 屁エピソード投稿機能: 屁エピソードを投稿して、みんなで楽しめる機能。
  • 音の追加（ブボボ、プゥなど）

ぜひ、皆様も一度「記録」してみてください。

開発の裏側、マネタイズの泥臭い話は note で公開予定です。

Discussion