IT女子 アラ美お疲れ様です！IT業界で働くアライグマです！
「データベースを使わずに、メッセージアプリが作れる」と言われたら、信じられますか？
通常、チャットアプリにはメッセージを保存するデータベースが必須です。しかし、Zennで話題の「VanishChat」は、なんとWeb Push APIのキュー保存機能を「一時的なストレージ」として利用することで、サーバー側にデータベースを持たない完全ステートレスなアーキテクチャを実現しています。
「オフライン時のメッセージはブラウザベンダーのPushサーバーが預かってくれる」
この仕様を逆手に取った発想は、まさに目から鱗。
今回は、この常識破りのアーキテクチャを紐解きながら、Web標準技術のクリエイティブな活用法について解説します。
常識を覆すVanishChatの「DBレス」アーキテクチャ
IT女子 アラ美クラウドPCで快適なリモート開発環境を月額定額で使えるわよ
いつでもどこでもクラウド上PCにアクセス！仮想デスクトップサービス【XServer クラウドPC】
VanishChatの最大の特徴は、メッセージの永続化を放棄し、その代わり「相手に届くまでの保持」を他人のインフラ（GoogleやAppleのPushサーバー）に任せてしまう点です。
通常のアプリが「DBに保存→相手がポーリング/WebSocketで取得」という流れなのに対し、VanishChatは「Push通知として送信→相手のService Workerが受信して表示」という流れだけで完結します。ブラウザが閉じられていても、Pushサーバーがメッセージを保持し、再開時に届けてくれるのです。
この仕組みは、WebRTCのデータチャンネルとも似ていますが、大きな違いは「相手がオフラインでもメッセージを“置配”できる」点にあります。WebRTCはP2Pなので双方がオンラインである必要がありますが、Push APIを使えば、非同期なコミュニケーションが可能になるのです（参考：Dockhandで始めるセルフホストで紹介したような自前サーバーすら不要です）。
IT女子 アラ美
ITアライグマWeb Push APIをStorageとして使う仕組み
この仕組みを従来のDB型と比較してみましょう。
グラフのように、VanishChatのアプローチは「データ永続性」を犠牲にする代わりに、「プライバシー（匿名性）」と「実装コスト」の面で圧倒的なメリットがあります。サーバーには何も残らないため、運営者がメッセージを覗き見ることも物理的に不可能です。
サーバーレス時代の新しい選択肢
このアーキテクチャは、すべてのアプリに使えるわけではありませんが、「一回切りの秘密の会話」や「ログを残したくないシグナリング」といった用途には最適です。AWS LambdaなどのFaaSと組み合わせれば、維持費ほぼゼロでの運用も夢ではありません。
実際に、Vercel FunctionsやCloudflare Workersと組み合わせることで、月間10万リクエストまで無料枠で収めることも現実的です。DBのストレージ料金やIOPS課金から解放されるのは、個人開発にとって大きな福音と言えるでしょう（詳細はFUNSTACK Staticでのサーバーレス開発を参照）。
また、プライバシー保護の観点からも注目されています。EUのGDPRなど、データ保持に対する規制が年々厳しくなる中、「そもそもデータを持たない」というアプローチは、コンプライアンス対応コストを劇的に下げる可能性を秘めています。
IT女子 アラ美ITアライグマ具体的な実装：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女子 アラ美ITアライグマ【ケーススタディ】個人開発での応用可能性
IT女子 アラ美正社員並みの福利厚生で安心して独立できるエージェントがあるわよ
フリーランスエンジニアに安心保障と豊富な案件紹介を【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女子 アラ美ITアライグマよくある質問
Web Push APIのペイロードサイズ制限はどのくらいですか？
ブラウザやPushサービスによりますが、一般的に4KB程度が上限です。テキストメッセージなら十分ですが、画像や大きなデータの送信には別の仕組みが必要です。
VanishChatのアーキテクチャは商用サービスに使えますか？
「メッセージの永続化が不要」な用途なら商用でも活用可能です。ただし、法的にメッセージの保存義務がある場合は使えないため、サービスの要件を確認してください。
Service Workerの「通知を出さないPush」はすべてのブラウザで動きますか？
Chrome/Edge/FirefoxではUser Visible Onlyポリシーがあり、一定期間内に通知を表示しないと制限される場合があります。本番運用ではサイレントPushの制限を事前にテストしてください。
こうした技術力を活かしたキャリアアップについてはハイクラスエンジニア転職エージェント3社比較もチェックしてみてください。
IT女子 アラ美ITアライグマおすすめキャリア支援サービス比較
面白い技術に挑戦できる環境を探すなら、技術力を正当に評価するエージェントを活用しましょう。市場価値を高めるポートフォリオ戦略も参考にしてください。
さらなる年収アップやキャリアアップを目指すなら、ハイクラス向けの求人に特化した以下のサービスがおすすめです。
| 比較項目 | TechGo | レバテックダイレクト | ビズリーチ |
|---|---|---|---|
| 年収レンジ | 800万〜1,500万円ハイクラス特化 | 600万〜1,000万円IT専門スカウト | 700万〜2,000万円全業界・管理職含む |
| 技術スタック | モダン環境中心 | Web系に強い | 企業によりバラバラ |
| リモート率 | フルリモート前提多数 | 条件検索可能 | 原則出社も多い |
| おすすめ度 | 技術で稼ぐならここ | A受身で探すなら | Bマネジメント層向け |
| 公式サイト | 無料登録する | - | - |
IT女子 アラ美ITアライグマまとめ
VanishChatの「Web Push APIをDB代わりに使う」という発想は、エンジニアとしての柔軟な思考力を鍛える良い教材です。
「この技術はこう使うもの」という固定観念を捨て、APIの仕様書を隅々まで読んでみることで、独自の解決策が見つかるかもしれません。
最後に、今日からできるアクションプランを整理しました。
- Service Workerの
pushイベントの仕様を確認してみる - 簡単なPush通知デモアプリを作り、ペイロードの送受信を試してみる
- 既存のプロジェクトで「DBを使わずに解決できる部分」がないか再考してみる
技術の引き出しを増やして、独創的なエンジニアを目指しましょう！
あなたのチャレンジを応援しています！
IT女子 アラ美ITアライグマ
