Supabase ✖️ Next.jsで個人開発してみた話
はじめに
都内でフロントエンドエンジニアをしている hirotiia です！😊
個人で「カジ活 〜家庭内で使うタスク管理アプリ」を作ってみたので、開発の道のりをシェアしていきます。
個人開発に興味はあるけど、何を作ればいいか迷っている方の参考になれば嬉しいです。
使った技術やこだわりポイントを気軽に紹介していくので、最後までお付き合いください！
どんなサービス？
カジ活は、家族やパートナーと一緒に家事の分担を見える化できるTODOアプリです！
「誰がどの家事をどれくらいやってるの？」「ゴミ出し、今週誰の担当だっけ？」みたいな家庭あるあるを解決します。お互いの負担を可視化して、不公平感をなくし、チームワーク良く家事をこなせる関係づくりをサポートします✨
なぜ作ったのか？
会社ではタスク管理ツールで仕事をバッチリ管理してるのに、家に帰ると...
「あれやっといて」の口頭伝達
数日後...
「言ったよね？」「聞いてない！」の無限ループ😅
こういう小さなことが、意外と大きな喧嘩に発展することも。
パートナーに負担が偏ると、知らない間に不満が溜まっていきます。
お互いの頑張りを見える化して感謝し合える関係を築けば、もっと楽しい生活になるはず！そんな思いから作り始めました。
🛠️ 個人開発の道のり
1. 課題探し
最初は全然別のアプリを作ろうとしていたのですが、APIの利用規約の制限にぶつかって断念...😭
気を取り直して、自分自身の「家事を忘れてパートナーに怒られる問題」を解決することに決めました（笑）
必ずAPIの利用規約は事前に確認しておくように戒めとします。
2. 解決策を考える
「会社ではタスク管理ツールでちゃんと管理できてるのに、なんで家では忘れてしまうのだろう？」
そう考えたら答えは簡単！家庭用のタスク管理アプリを作ればいいんじゃない？というわけで、TODOアプリの開発をスタートしました。
3. 機能を考える
アプリの方向性が決まったら、必要な機能を洗い出しました：
👨👩👧👦 家族やパートナーとTODOを共有するグループ機能
✅ タスクの作成・編集・削除の基本機能
📜 「言った・言わない問題」を防ぐ履歴機能
⚡ リアルタイム更新で快適操作
などなど。。。
4. 細かい挙動を決める
基本機能が決まったら、細かい動きについても考えました。例えば：
グループに入る前は何のタスクを表示するか？
どんな流れでグループに参加できるようにする？
グループに参加したユーザーが脱退したらどんな画面にする？
脱退したらグループ内で共有されていたタスクはどうする？
など、使う場面をイメージしながら設計しました。
5. データベースを作る
ここがフロントエンドしかやったことがない自分にとっては一番の難関でした...😅
書籍は「達人に学ぶDB設計徹底指南書」や参考記事を読みながら：
- テーブル関係を整理
- 正規化
- セキュリティのためのRLS設定
バックエンドは初心者だったので、かなり勉強になりました！
ただまだまだ非効率な部分が多いと思うので、インデックス化など今後しっかり学んでいこうと思ってます。
6. UI/UXデザイン
Figmaで画面をデザインしました。
「直感的に使える」をモットーに作りました。
7. 実装スタート！
開発環境を整えて、あとはひたすらコーディング！🔥
使用技術と選定理由
| 主要な技術 | バージョン | 選定理由 |
|---|---|---|
| Next.js | v15.2.1 | TypeScriptとの互換性、効率的なレンダリング、フロント・バックエンド両対応 |
| React | v19.0.0 | Next.jsの基盤、Hooksによる便利なUI構築、コミュニティもおおきい |
| Typescript | v5.6.3 | 型安全に開発を進められる。ドキュメントにもなる |
| redux | v5.0.1 | グローバルな状態管理 |
| zod | v3.24.1 | サーバーサイドでのフォームバリデーション、セキュリティ向上 |
| Tailwindcss | v3.4.14 | 開発スピード向上、Reactコンポーネントとの相性 |
| Supabase | - | 機能が豊富。DB、認証機能、ストレージ、リアルタイム更新 |
機能一覧
- 認証まわり
- 🔑 ログイン/ログアウト
- 📝 サインアップ
- 🔄 パスワードリセット
- 🌐 Googleアカウント連携
- タスク管理
- ➕ 作成/編集/削除
- 👤 担当者割り当て
- グループ機能
- 🏠 グループ作成
- 👋 脱退機能
- 📨 招待機能（QRコード）
- その他
- アバター変更
- ⚡ リアルタイム更新
- 📜 履歴表示
こだわったポイント
Next.jsの思想をもとに、基本的にはサーバーコンポーネントを使用するようにし、クライアントの負荷をなるべく減らすようにしました。
パフォーマンス最適化
- 初期表示の高速化：
- page.tsxではサーバーからのデータ取得を待つような重い処理は避けて、画面をサクッと表示
- サーバーコンポーネントで事前データ取得
- Suspenseの範囲を適切に区切る。
- 体感速度の向上：
- 楽観的UI更新を利用してボタンを押したら即UIが変わる！裏でサーバー処理が完了するの待たない設計
- 再レンダリング最適化：
- useEffectを必要最小限に抑え、パフォーマンスを向上（まだ改善の余地ありなので、少しずつリファクタリングしていく予定）
ユーザービリティとアクセシビリティ
- Webアクセシビリティを考慮したコンポーネント設計
- セマンティックHTMLやスクリーンリーダーで読まれた時の考慮、キーボード操作など
- シンプルなアーキテクチャ:
- Supabaseとの連携は直接クライアントを通して行う設計
- QRコードによる招待:
- グループ参加のハードルを下げる工夫
- 履歴表示:
- 「言った・言わない」問題の解消
- リアルタイム更新:
- WebSocketを活用し、データベースを監視し、即座に変更を反映
今後追加していきたい機能
ゲーミフィケーション要素を取り入れていきたいと考えています！
- タスクに応じたポイント機能
- 家事の負担をポイント化し、貢献度を数値で確認
- チャート表示機能
- 家事の進捗やバランスをグラフやチャートで可視化
まとめ
個人開発を通じて、技術だけじゃなく本当にたくさんのことを学びました。
普段の仕事では触れない領域に挑戦することで、フロントエンドエンジニアとしての視野が大きく広がりました。「ユーザーが本当に欲しいものは何か」を常に考え、サービス全体を設計する経験は何物にも代えがたいです。
フロントからバックエンドまで全工程を担当して、各技術の繋がりを肌で感じられたのは大きな収穫だったなと思います。「どうすれば迷わず使えるか」を追求する中で、UIやUXへの理解も深まりました。
何度もエラーと格闘する日々でしたが、自分のアイデアが形になっていく喜びは最高でした！
個人開発の魅力は、自分の思いを形にできる自由さにあると実感しました。
カジ活は今後もアップデートを続けていく予定なので、もし「家事の見える化」に興味がある方は、ぜひ使ってみてください！フィードバックもお待ちしています😊
Discussion