Webアプリの2つのタイプ
AIと会話しながらコードを書いていくスタイルの開発。プログラミングの詳細な知識がなくても、AIに依頼するだけでソフトウェアが作れる。
このサイトでは Claude Code を使って、Webアプリを作ることを扱う。
このサイトの情報は個人開発・小規模向け。以下のような用途を想定している。
大規模なサービスや商用グレードのシステム構築には向かない情報も含まれる。
バイブコーディングでWebアプリを作るとき、「データをどこに置くか」を最初に意識しておくと、設計の見通しがよくなる。
データは端末（スマホやPC）ごとにブラウザの中に保存される。自分一人で使うことを前提としたシンプルな構成で、URLを共有すれば他の人も同じアプリを使えるが、お互いのデータは完全に独立している。「アプリを共有する」ことと「データを共有する」ことは別の話だ。
例：TODOリスト、メモ帳、家計簿、ポモドーロタイマー、単語帳
データはインターネット上の外部システムに保存される。複数のユーザーや端末からアクセスでき、データを共有・参照できる。
例：チャット、SNS、ランキング、共同編集ツール
この2つのタイプは、データの置き場所が異なるため、必要な技術要素が大きく変わる。
フロントエンド — ブラウザ上で動く、ユーザーが直接見て触る部分。HTML / CSS / JavaScript で作られる。 バックエンド — データの受け取り・処理・保存を担う仕組み。ユーザーからは見えない。 API — フロントエンドとバックエンドがデータをやり取りするための窓口。 ホスティング — Webアプリのファイルをインターネット上に公開・配信すること。
バックエンド（データの処理や保存を担う仕組み）が不要なため、構成はシンプルだ。Claude Codeに頼んで作ったファイルをそのままデプロイ（本番環境への公開・反映）すれば動く。
フロントエンドに加えて、データを受け取り・返すAPIと、データを永続的に保存するデータベースが必要になる。構成が複雑になる分、考えることも増える。また、データが複数人に見える分、「誰がアクセスできるか」を制御する仕組みが必要になることも多く、セキュリティへの配慮が求められる。
多くのWebアプリは、一人完結型として始まり、必要に応じて共有型へ進化する。
バイブコーディングでWebアプリを作るときも、まず一人完結型で動くものを作り、そこから必要な部分だけ共有化していく順番がおすすめだ。一人完結型はシンプルに作れるので、アイデアを形にする最初のステップとして最適だ。何を作るか迷ったときも、まず一人完結型で試してみよう。共有機能は後からでも追加できる。
実際に手を動かしてみよう。 本サイトのハンズオンを上から順番に進めていくのがおすすめ。 例として、一人完結型と共有型のハンズオンを一つずつあげておく。
Webアプリを目的ごとに分類したうえで、一人完結型と共有型の例を並べた。
| カテゴリ | 一人完結型 | 共有型 |
|---|---|---|
| 記録 | TODO / 日記 / 習慣トラッカー / 体重記録 / 支出メモ / 読書ログ / 作業ログ / 旅行ログ / 睡眠ログ / 食事記録 / 運動記録 / 体調メモ / アイデアログ / 買い物メモ / 観た映画ログ | チームTODO / 公開日記 / 共有家計簿 / 読書レビュー共有 / 旅行ログ共有 / 勉強記録ランキング / 食事投稿 / 映画レビューサイト / ライフログSNS |
| 思考・整理 | メモ帳 / マインドマップ / アウトライナー / アイデア帳 / プロンプト管理 / タスク分解 / KJ法ツール / 思考ログ / 意思決定メモ / 目標管理 / WBS簡易版 | 共同メモ / 共同マインドマップ / アイデア投稿 / プロンプト共有 / ナレッジベース / FAQ / 企画ブレスト / ドキュメント共有 |
| 可視化 | グラフ / 学習時間可視化 / ヒートマップ / ライフログ可視化 / 時間分析 / 睡眠可視化 / 気分トラッカー / 進捗バー | ランキング / 学習時間ランキング / 全体ヒートマップ / 推移グラフ / トレンド分析 / 投稿数ランキング / 活動量ランキング |
| ツール | JSON整形 / 文字数カウント / 日付計算 / 色変換 / 正規表現 / Base64 / パスワード生成 / URLエンコード / QRコード / UUID / diff / CSV整形 / 抽選 / ルーレット | テキスト共有 / URL短縮 / 共有リンク / 画像アップ / ファイル共有 / コード共有 / QR共有 / 抽選共有 / フォーム投稿 |
| 学習 | 単語帳 / クイズ / 暗記カード / ポモドーロ / 問題演習 / タイピング / 計算ドリル / 英単語 / 資格対策 / 音声学習 | クイズランキング / 単語帳共有 / 問題投稿 / 学習SNS / 勉強時間ランキング / 模試共有 / 解説投稿 |
| ゲーム | パズル / タイピング / 反射神経 / 放置ゲーム / スライドパズル / ソリティア / 神経衰弱 / 数独 / 脳トレ / 迷路 / クリック連打 | スコアランキング / 対戦（麻雀・オセロ・将棋・トランプ） / 協力ゲーム / デイリーランキング / イベント / タイムアタック / ゴースト対戦 |
| コミュニケーション | — | チャット / 掲示板 / SNS / Q&A / コメント / いいね / DM / スタンプ |
| 収集・キュレーション | ブックマーク / お気に入り / リンク集 / レシピ / 商品メモ / 行きたい場所 | ブックマーク共有 / レシピ共有 / 商品レビュー / リンク投稿 / まとめサイト / お店レビュー |
| 生成・クリエイティブ | ランダム生成 / おみくじ / 名前生成 / 画像生成 / 詩 / コピー生成 | 作品投稿 / 画像共有 / AI生成共有 / 小説投稿 / お題投稿 / ランキング |
| イベント・管理 | カレンダー / 予定管理 / リマインダー / タイムライン | 出欠管理 / 共有カレンダー / ミートアップ / 参加者管理 / 掲示板 |
| ビジネス（業務） | レシート管理 / 経費メモ / 簡易帳簿 / 売上記録 / 請求メモ / 顧客メモ / 案件メモ / 在庫メモ / 作業時間 / タスク管理 / 進捗管理 | 会計 / 請求管理 / CRM / 案件管理 / 在庫管理 / プロジェクト管理 / チームタスク / 工数管理 |
2026-05-05 (last updated: 2026-05-06) タツヲ (yto)