複数人が同時に使うアプリを作っていると、「Aさんが投稿したコメントが、Bさんの画面には表示されない」という状況に出会うことがあります。よくある原因と、Supabaseで用意されている解決策を見てみます。

なぜ他の人の投稿が画面に出ないのか

// 悪い例: ページを開いた時にだけデータを取得
useEffect(() => {
  fetchComments().then(setComments);
}, []); // 依存配列が空＝最初の1回だけ実行

このコードは、ページを開いた瞬間のデータだけを取得して画面に表示します。その後に別の人がコメントを追加しても、こちらの画面は最初に取得した内容のまま更新されません。ブラウザの中では何も間違ったことは起きておらず、単に「もう一度取得し直す」処理が仕組みとして存在しないだけです（依存配列の書き方自体を間違えているわけではなく、正しく空にしていても「他の人の変更が届かない」という別の問題です）。

リロードすれば直るが、それでは体験が悪い

ページを再読み込みすれば最新のデータが表示されるので、「バグ」と気づかれないまま放置されがちです。ただ、リアルタイム性が求められる画面（チャット、コメント欄、在庫数の表示など）では、この体験の悪さがそのままアプリの使いにくさに直結します。

// 悪い例: 定期的に自分でポーリングする
useEffect(() => {
  const interval = setInterval(() => {
    fetchComments().then(setComments);
  }, 3000); // 3秒ごとに取得し直す
  return () => clearInterval(interval);
}, []);

一定間隔で取得し直す方法もありますが、変化がない時も含めて延々とリクエストを送り続けることになり、無駄な通信が増えてしまいます。

Supabaseのリアルタイム機能を使う

// 良い例: 変更があった時だけ通知を受け取る
useEffect(() => {
  const channel = supabase
    .channel('comments-channel')
    .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'comments' },
      (payload) => {
        setComments((prev) => [...prev, payload.new]);
      }
    )
    .subscribe();

  return () => supabase.removeChannel(channel);
}, []);

SupabaseのRealtime機能を使うと、テーブルに変更があった瞬間だけ通知を受け取れます。無駄なリクエストを送り続ける必要がなく、変更があった時にだけ画面を更新する、という本来やりたかった形に近づきます。

この機能を使うには、事前にSupabaseダッシュボードの「Database → Replication」で対象テーブルをRealtime配信対象に有効化しておく必要があります（SQLで行う場合は alter publication supabase_realtime add table comments;）。ここを有効化し忘れると、.subscribe()自体はエラーなく成功するのにイベントが一切届かない、という気づきにくい詰まり方をするので注意が必要です。

なお、上のコード例はevent: 'INSERT'（新規追加）だけを対象にしています。既存コメントの編集や削除も検知したい場合は、event: '*'に変更するか、UPDATE・DELETE用の.on()を追加します。

どこにでも使うべきというわけではない

このRealtime機能も、すべての画面に付ければいいわけではありません。1人しか見ない設定画面や、頻繁に更新されないマスターデータの一覧などには、常時接続を維持するコストの方が上回ることがあります。複数人が同じデータを見ながら作業する場面かどうかが、使うかどうかの目安になります。

AIに「リアルタイムに更新されるようにして」と依頼する時も、「このデータは複数人が同時に見るものです」と伝えると、必要な画面にだけRealtime機能を組み込んだ、無駄のない実装が返ってきやすくなります。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください