DB不要！VanishChatに学ぶ、Web Push APIをデータベース代わりに使う裏技アーキテクチャ

2026年1月31日

当ページのリンクには広告が含まれています。

お疲れ様です！IT業界で働くアライグマです！

「データベースを使わずに、メッセージアプリが作れる」と言われたら、信じられますか？

通常、チャットアプリにはメッセージを保存するデータベースが必須です。しかし、Zennで話題の「VanishChat」は、なんとWeb Push APIのキュー保存機能を「一時的なストレージ」として利用することで、サーバー側にデータベースを持たない完全ステートレスなアーキテクチャを実現しています。

「オフライン時のメッセージはブラウザベンダーのPushサーバーが預かってくれる」
この仕様を逆手に取った発想は、まさに目から鱗。

今回は、この常識破りのアーキテクチャを紐解きながら、Web標準技術のクリエイティブな活用法について解説します。

常識を覆すVanishChatの「DBレス」アーキテクチャ

💡 技術力を武器に年収アップと好条件を確実に目指す

高還元SESや自社開発への転職で、あなたのスキルを正当に評価してもらう

ITエンジニアのための転職エージェント【TechClipsエージェント】

VanishChatの最大の特徴は、メッセージの永続化を放棄し、その代わり「相手に届くまでの保持」を他人のインフラ（GoogleやAppleのPushサーバー）に任せてしまう点です。
通常のアプリが「DBに保存→相手がポーリング/WebSocketで取得」という流れなのに対し、VanishChatは「Push通知として送信→相手のService Workerが受信して表示」という流れだけで完結します。ブラウザが閉じられていても、Pushサーバーがメッセージを保持し、再開時に届けてくれるのです。

この仕組みは、WebRTCのデータチャンネルとも似ていますが、大きな違いは「相手がオフラインでもメッセージを“置配”できる」点にあります。WebRTCはP2Pなので双方がオンラインである必要がありますが、Push APIを使えば、非同期なコミュニケーションが可能になるのです（参考：Dockhandで始めるセルフホストで紹介したような自前サーバーすら不要です）。

IT女子アラ美

DBがないのに、相手がオフラインでもメッセージが消えないなんて不思議ですね。

ITアライグマ

そこがミソなんです。「通知」として送ってしまえば、配送保証はPushサービスの責任範囲になるので、自前でDBを持つ必要がなくなるんですよ。

Web Push APIをStorageとして使う仕組み

この仕組みを従来のDB型と比較してみましょう。

グラフのように、VanishChatのアプローチは「データ永続性」を犠牲にする代わりに、「プライバシー（匿名性）」と「実装コスト」の面で圧倒的なメリットがあります。サーバーには何も残らないため、運営者がメッセージを覗き見ることも物理的に不可能です。

サーバーレス時代の新しい選択肢

このアーキテクチャは、すべてのアプリに使えるわけではありませんが、「一回切りの秘密の会話」や「ログを残したくないシグナリング」といった用途には最適です。AWS LambdaなどのFaaSと組み合わせれば、維持費ほぼゼロでの運用も夢ではありません。
実際に、Vercel FunctionsやCloudflare Workersと組み合わせることで、月間10万リクエストまで無料枠で収めることも現実的です。DBのストレージ料金やIOPS課金から解放されるのは、個人開発にとって大きな福音と言えるでしょう（詳細はFUNSTACK Staticでのサーバーレス開発を参照）。

また、プライバシー保護の観点からも注目されています。EUのGDPRなど、データ保持に対する規制が年々厳しくなる中、「そもそもデータを持たない」というアプローチは、コンプライアンス対応コストを劇的に下げる可能性を秘めています。

IT女子アラ美

維持費ゼロは魅力的！個人開発のアイデアが広がりますね。

ITアライグマ

はい。既存のAPIの仕様を深く理解することで、こうした「ハック」が可能になるんです。基礎知識の重要性がわかりますね。

具体的な実装：Service Workerでの“横領”

このアーキテクチャの肝は、Service WorkerによるPush通知のハンドリングです。通常は「通知バナー」を表示しますが、VanishChatでは通知を出さずにデータだけ受け取り、アプリ内のステート（Reactの状態など）を更新します。

Service Worker内で push イベントをリッスンし、受け取ったペイロードを postMessage でメインスレッド（アプリ画面）に転送します。ここで重要なのは、self.registration.showNotification をあえて呼ばない（またはサイレント通知にする）ことです。これにより、ユーザーには通知バナーを見せずに、バックグラウンドでのデータ同期だけを行うことが可能になります。

// service-worker.js
self.addEventListener('push', (event) => {
  // Pushサービスの制限値（通常4KB）以内のJSONを受け取る
  const payload = event.data ? event.data.json() : {};

  // 通常の通知表示（showNotification）は行わず、
  // Client（開いているタブ）にメッセージを転送する
  // waitUntilを使うことでSWが終了するのを防ぐ
  event.waitUntil(
    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clients) => {
      // 開いている全てのタブにブロードキャスト
      clients.forEach((client) => {
        client.postMessage({
          type: 'NEW_MESSAGE',
          data: payload,
          timestamp: Date.now()
        });
      });
    })
  );
});

このように、標準APIの挙動を少し変えるだけで、全く別の用途に転用できるのがWeb技術の面白いところです（CSS Anchor Positioningのような最新標準も同様に可能性を秘めています）。また、ブラウザによっては「通知を表示しないPush」を制限している場合があるため、User Visible Onlyオプションの扱いや、デバッグ時の挙動確認には注意が必要です。

IT女子アラ美

なるほど、通知を出さずにアプリにデータを渡すこともできるんですね。これならチャット画面を更新できそう！Service Workerって奥が深い…。

ITアライグマ

PWAなどで使われる技術ですが、工夫次第でバックグラウンド処理の要になります。仕様の隙間を突くような楽しさがありますよね。

【ケーススタディ】個人開発での応用可能性

📚

フリーランスとして独立する

ユニークな技術力を武器に、高単価な案件を獲得しませんか？

フリーランスエンジニアに安心保障と豊富な案件紹介を【Midworks】

この「DBレス」の発想を、実際の個人開発に応用した事例を考えてみましょう。特に、維持費を極限まで抑えたい初期フェーズのサービスにおいて強力な武器になります（参考：フリーランス転向前のチェックリスト）。

状況 (Before)

【Bさんの状況】 28歳 Webエンジニア。個人でWebRTCを使ったビデオ通話アプリ「P2P-Live」を開発中。月間ユーザーは1,500人程度。チーム構成は1名（個人開発）、年商は0円（非営利）。

【課題と悩み】 導入前は、シグナリングサーバーとしてWebSocketサーバー（Socket.ioなど）をVPSで運用しており、月額2,000円の固定費がかかっていました。収益化していない趣味アプリなので、毎月の赤字が痛いという課題を抱えていました。「無料で維持できる方法はないか」と模索していた当時でした。

行動 (Action)

【行動と工夫】 そこでWeb Push APIを導入し、シグナリング情報の交換方法を変更しました。「通話開始」のイベントをPush通知として相手に送信し、相手からの応答もPushで受け取る仕組みを採用しました。
Push通知のペイロードサイズ（4KB）に収まるよう、SDPを圧縮して実装しました。さらにバックエンド処理はVercel Functions（Serverless Functions）のHobbyプラン（無料枠）へ移行し、VPSを解約しました。

結果 (After)

【結果】 その結果、データベースも常時稼働サーバーも不要になり、完全無料で運用可能になりました。月額2,000円、年間24,000円のコスト削減を実現できました。Push通知のインフラはGoogle/Appleが管理するため、突発的なアクセス増でもサーバーダウンの心配がなくなりました。サーバー管理が不要になったことで、GitHubにPushするだけでデプロイが完了する快適な開発体験を手に入れることができました。

IT女子アラ美

WebRTCのシグナリングに使うのは賢いですね！維持費ゼロは個人開発の強い味方です。

ITアライグマ

はい。制約を理解した上で使いこなせば、最強のコストパフォーマンスを発揮します。ただしペイロードサイズ制限には注意が必要です。

比較項目	TechGo	レバテックダイレクト	ビズリーチ
年収レンジ	800万〜1,500万円ハイクラス特化	600万〜1,000万円IT専門スカウト	700万〜2,000万円全業界・管理職含む
技術スタック	◎モダン環境中心	◎Web系に強い	△企業によりバラバラ
リモート率	◎フルリモート前提多数	◯条件検索可能	△原則出社も多い
おすすめ度	S技術で稼ぐならここ	A受身で探すなら	Bマネジメント層向け
公式サイト	無料登録する	-	-