完成品

先日の記事のシステムに引き続き、AIを用いた個人開発の練習に打ち込んでいます。

まだこちらもMVPと称して簡単な画面しか作成していませんが

以下のようなアプリを作成しました。

※ ユーザー登録は実装済みですが、有効なメールアドレスが登録されメール送信されるため、
ログイン画面に表示されているデモログインをご利用ください。

ログイン画面

ユーザー登録画面

メール認証

ホーム画面

ユーザー編集画面

こだわりポイント

このアプリのポイントは、

ユーザーの投稿したコメントが、リアルタイムで他のログインしているユーザーにも

表示されるような仕様になっているところです。

（動画やGIFを埋めようと色々努めましたが、結局何をやっても小さくなったりしたので

以下キャプチャを貼ります。ご容赦ください。）

① 左画面の公開ユーザーから投稿する

② 右画面（シークレットブラウザ）の公開ユーザー2が、動的に1の投稿を取得することを確認

③ 右画面からも同様に投稿する

④ 左画面も動的に投稿を取得することを確認

技術的にはSupabase Realtimeを使用し、WebSocketで動的に通信しています。

アーキテクチャ
┌─────────────────────────────────────────────────────────┐
│                    ユーザーAのブラウザ                     │
│  ┌──────────────────────────────────────────────────┐   │
│  │  Next.js App (React)                             │   │
│  │  useEffect(() => {                               │   │
│  │    subscribeToNewPosts((newPost) => {            │   │
│  │      setPosts([newPost, ...posts]); ← 画面更新    │   │
│  │    });                                           │   │
│  │  }, []);                                         │   │
│  └──────────────────┬───────────────────────────────┘   │
│                     │ WebSocket接続                      │
└─────────────────────┼───────────────────────────────────┘
                      │
                      ↓
┌─────────────────────────────────────────────────────────┐
│              Supabase Backend (クラウド)             　 　│
│  ┌────────────────────────────────────────────────┐     │
│  │  Realtime Server (WebSocketサーバー)        　   │ 　  │
│  │  - クライアントのWebSocket接続を管理          　　  │     │
│  │  - PostgreSQLの変更を検知                        │     │
│  │  - 接続中の全クライアントに通知                     │    │
│  └───────────────┬────────────────────────────────┘    │
│                  │ LISTEN/NOTIFY                       │
│                  ↓                                     │
│  ┌────────────────────────────────────────────────┐    │
│  │  PostgreSQL Database                           │    │
│  │  - posts テーブル                               │  　 │
│  │  - INSERT時にNOTIFYを発行                       │　  　│
│  └────────────────────────────────────────────────┘     │
└─────────────────────┬───────────────────────────────────┘
                      │
                      ↓ WebSocket経由で通知
┌─────────────────────────────────────────────────────────┐
│                    ユーザーBのブラウザ                     │
│  画面が自動更新される！                                     │
└─────────────────────────────────────────────────────────┘

WebSocket（ウェブソケット）とは？
通常のHTTP通信との違い：
【通常のHTTP】
クライアント → サーバー: リクエスト送信
クライアント ← サーバー: レスポンス返す
（都度接続・切断）

【WebSocket】
クライアント ⇄ サーバー: 常時接続
サーバーから自発的にデータを送信可能！

メリット:
✅ リアルタイム通信
✅ 低レイテンシ
✅ サーバーからプッシュ通知可能

いい感じに実装できたので勉強がてら

React Nativeでネイティブアプリも作成しようかと思います！