Webアプリの2つのタイプ：一人完結型とデータ共有型

バイブコーディングでWebアプリを作るとき、「データをどこに置くか」を最初に意識しておくと、設計の見通しがよくなる。データの置き場所が異なると、必要な技術要素が大きく変わる。

一人完結型とデータ共有型

フロントエンド：ブラウザ上で動く、ユーザーが直接見て触る部分。

バックエンド：データの受け取り・処理・保存を担う仕組み。ユーザーからは見えない。

ホスティング：Webアプリをインターネット上に公開・配信すること。

デプロイ：作ったアプリをインターネット上に公開・反映すること。

1. 一人完結型

データはブラウザの中に保存される。端末が違えば別々になるのはもちろん、同じPCでもSafariとChromeでは中身が別になる。自分一人で使うことを前提としたシンプルな構成で、URLを共有すれば他の人も同じアプリを使えるが、お互いのデータは完全に独立している。「アプリを共有する」ことと「データを共有する」ことは別の話。

例：TODOリスト、メモ帳、家計簿、ポモドーロタイマー、単語帳

• フロントエンド: HTML / CSS / JavaScript のみ
• データ保存: ブラウザの中（localStorage など）
• ホスティング: 静的ファイルを置くだけでよい

バックエンドが不要なため、構成はシンプル。Claude Codeに頼んで作ったファイルをそのままデプロイすれば動く。

静的ファイル（static files）：HTMLやCSS、JavaScriptなど、サーバー側で処理をせずそのまま配信できるファイル。一人完結型のWebアプリはこれだけで構成される。

ただし一つ大事な前提がある。ブラウザ内の保存は「永続」ではない。localStorage などのブラウザ保存は、ずっと残る恒久ストレージではなく「そのアプリを使い続けているあいだ生きるキャッシュ」に近い。とくに iPhone・iPad のブラウザ（Safari も Chrome も中身は同じ WebKit）と Mac の Safari は、プライバシー保護のしくみで、そのサイトを7日ほど開かないでいると保存データを自動で消すことがある。毎日使うアプリなら問題にならないが、「大事なデータを保存して、しばらく後に見返す」用途では消えうると考えておく。

消えて困るデータを守る3つの手：(1) データをファイルに書き出せるエクスポート機能を付ける、(2) ホーム画面に追加して使ってもらう（消えにくくなる）、(3) そもそもサーバーに保存する（下記のデータ共有型）。手軽さはこの順で、確実さは逆の順。

2. データ共有型

データはブラウザの外に出る。複数のユーザーや端末からアクセスでき、データを共有・参照できる。

例：掲示板、チャット、アンケート、ランキング、共同ホワイトボード

• フロントエンド: HTML / CSS / JavaScript（一人完結型と同じ）
• バックエンド: APIサーバー
• データの置き場: ブラウザの外。データをどう読み書きするかで形が変わる（後述）
• ホスティング: フロントエンドとバックエンドの両方を動かせる環境が必要

フロントエンドに加えて、データを受け取り・返すAPIが必要になる。構成が複雑になる分、考えることも増える。また、データが複数人に見える分、セキュリティへの配慮が求められる。

API（Application Programming Interface）：フロントエンドとバックエンドがデータをやり取りするための窓口。

2-1. データの置き方は3つある

データ共有型といっても、置き方はひとつではない。「データをどう読み書きするか」で3つに分かれ、必要なものが変わる。データベースが要るのは、このうちひとつだけ。

置き方	どういうことか	例	技術
集計	集めて数える。1件ずつは取り出さない	アンケート、投票、アクセス解析	イベントログ（Workers Analytics Engine）
出し入れ	1件ずつ出し入れする。あとから直す・消すもできる	掲示板、チャット、コメント、予約	データベース（D1）
リアルタイム	その場で見える、その場で決まる	共同ホワイトボード、リアルタイム対戦	常駐サーバー（Durable Objects ＋ WebSocket）

技術の列は Cloudflare を使う場合のもの。一人完結型で使う localStorage はブラウザ自体に備わっている機能なので、この列にあたるものが要らない。

バックエンドは3つとも要る。データの置き場が変わっても、ブラウザからそこへ直接書き込むわけではなく、サーバー側のコードを通す。集計もリアルタイムも例外ではない。3つで違うのは、その先の置き場の形だけ。

いちばん汎用的なのは出し入れ。倉庫の棚のように、入れたものを名指しで取り出せて、入れ替えも削除もできる。この形でたいていの用途は足りるので、よく使うことになる。データベースが要るのはここ。

集計は数えるだけなので、1件ずつ取り出すしくみが要らない。アンケートなら「どの選択肢が何票か」は分かるが、「誰がどう答えたか」は取り出さない。表も列も設計しないので、データベースを使わずに作れる。取り出せないことが匿名性の裏付けになる、という使い方もできる。

リアルタイムは、相手が操作した結果が自分の画面にその場で映る必要があるとき。共同ホワイトボードで、相手が描いた線がリロードなしで見えるのがこれにあたる。ここだけはしくみが変わり、ブラウザとサーバーをつなぎっぱなしにする WebSocket という仕組みと、その接続を保ち続けるサーバーが要る。作るのも難しくなる。

迷ったときの判断：リロードして見えれば十分なら、リアルタイムは要らない。ネット対戦のオセロも、予約の空き枠も、押した結果が返ってくれば成立する。「同時に書き換えるか」ではなく「他の人が動かしたものが、自分の画面にその場で映ってほしいか」で分かれる。

3. 一人完結型から始めて、データ共有型へ

多くのWebアプリは、一人完結型として始まり、必要に応じてデータ共有型へ進化する。TODOリストがチームTODOになり、家計簿が家族で共有する家計簿になる。どんなアプリがどこへ進むかは、4章の付録にまとめた。

バイブコーディングでWebアプリを作るときも、まず一人完結型で動くものを作り、そこから必要な部分だけ共有化していく順番がおすすめ。一人完結型はシンプルに作れるので、アイデアを形にする最初のステップとして最適。何を作るか迷ったときも、まず一人完結型で試してみよう。共有機能は後からでも追加できる。

移行のきっかけは「他人と共有したくなったとき」だけではない。共有には、もっと身近な相手がいる。別の端末の自分（スマホで入れたデータをPCでも見たい）と、未来の自分（今書いたものを、しばらく後にまた開きたい）だ。どちらも立派な共有で、ブラウザ内の保存だけでは届かない。端末をまたげないし、時間が経つと消えることもあるからだ。だからデータ共有型は、他人がいなくても出番がある。なくしたくないデータ（アカウント、購入履歴、長く貯めた記録）は、サーバーに置いて、別の端末の自分や未来の自分と共有する。他人と共有するとは限らず、一人用のままでよい（ログインキーで自分のデータを持ち歩く、など）。いきなりサーバーが大げさなら、まずエクスポート機能やホーム画面追加で寿命をのばす手もある。

ただし、最初からデータ共有型でしか成立しないものもある。掲示板やチャットは書く相手がいないと始まらないし、アンケートは回答者が集まらないと意味がない。「まず一人完結型で」が当てはまるのは、自分の作業が目的で、共有があとから乗るものだ。

• CloudflareにHTMLファイルなどをブラウザでアップロードしてWebサイトとして公開する：一人完結型の一番簡単なパターン
• Claude Code で一人完結型のWebアプリを作る：一人完結型を3つ作る演習。エクスポート機能とホーム画面追加も、そこで扱う
• Claude Codeでデータ共有型Webアプリを作ってCloudflareに公開する：データ共有型のうち「出し入れ」を作る
• Claude Codeでイベントログを使った匿名アンケートを作ってCloudflareに公開する：データ共有型のうち「集計」を作る

4. 付録：どんなアプリがどこに入るか

4-1. 一人完結型からデータ共有型へ

代表的な組み合わせ。同じ「共有する」でも、行き先は違う。

一人完結型	共有すると	行き先
TODO	チームTODO	出し入れ
家計簿	共有家計簿	出し入れ
オセロ（コンピュータと対戦）	ネット対戦のオセロ（ターン制）	出し入れ
スコアアタック	ランキング（上位だけ）	集計
スコアアタック	ランキング（自分の順位・過去の記録も）	出し入れ
ホワイトボード	共同ホワイトボード（同時に描く）	リアルタイム
なし	掲示板・チャット	出し入れ
なし	アンケート・投票	集計
なし	リアルタイム対戦	リアルタイム

ホワイトボードだけリアルタイムなのは、同じ画面に同時に描くから。共有家計簿もネット対戦のオセロも、書き足したものをあとから読めればよいので出し入れになる。

ランキングが2行あるのは、どこまで見せるかで変わるから。上位だけなら数えるだけでよいが、「自分は何位か」「自分の過去の記録はどうだったか」まで見せるなら、1件ずつ引くことになる。

下の3つに一人完結型がないのは、相手がいて初めて成立するから。ここだけは最初からデータ共有型で作ることになる。

4-2. データ共有型の3つの置き方

置き方	例
集計	アンケート / 投票 / 人気投票 / アクセス解析 / ランキング（上位だけ） / 推移グラフ
出し入れ	掲示板 / 寄せ書き / チャット / コメント / いいね / Q&A / ターン制の対戦 / 予約 / 出欠管理 / チームTODO / 共有家計簿 / レシピ共有 / レビュー / 作品投稿 / 会員名簿 / 在庫管理 / 自分の順位が出るランキング
リアルタイム	共同ホワイトボード / 共同編集 / リアルタイム対戦 / 打鍵が見えるチャット

汎用的なのは出し入れ。例の数もここがいちばん多い。

「対戦ゲームはリアルタイム」「予約はリアルタイム」と思いがちだが、どちらも出し入れで作れる。オセロは手番が交互に来るので同時に書き換わらないし、予約は押した結果が返ってくればよい。リアルタイムが要るのは、他の人が動かしたものが、自分の画面にその場で映ってほしいときだけ。

4-3. 一人完結型の例

何を作るか迷ったときの一覧。すべてブラウザの中だけで完結する。

最初の「見せる」だけ性格が違う。 保存するデータがそもそも無く、置いたものを表示するだけ。それでも構成は同じ（静的ファイルだけ・バックエンド不要）なので、一人完結型に入る。サーバにデータを置くかどうかが分かれ目であって、データを持つかどうかではない。

カテゴリ	例
見せる	自己紹介サイト / お店のサイト / LP / ポートフォリオ / 作品ギャラリー
記録	TODO / 日記 / 習慣トラッカー / 家計簿 / 読書ログ
思考・整理	メモ帳 / マインドマップ / ホワイトボード / アイデア帳 / 目標管理
可視化	グラフ / 学習時間の可視化 / ヒートマップ / 気分トラッカー / 進捗バー
ツール	JSON整形 / 文字数カウント / 日付計算 / QRコード生成 / パスワード生成
学習	単語帳 / クイズ / 暗記カード / ポモドーロタイマー / タイピング練習
ゲーム	パズル / 数独 / ソリティア / オセロ（コンピュータと対戦） / 反射神経ゲーム
収集	ブックマーク / リンク集 / レシピ / 行きたい場所 / ほしいものメモ
生成	ランダム生成 / おみくじ / 名前生成 / キャッチコピー生成 / 詩
予定	カレンダー / 予定管理 / リマインダー / タイムライン
仕事	レシート管理 / 経費メモ / 簡易帳簿 / 顧客メモ / 作業時間記録