前回の続き——「Webアプリの中身」を開ける
A-02で見たとおり、Webアプリはユーザーの入力や操作に応じて、処理と保存を行うものでした。前回は、それが何であるかを外側から決めました。この講義では、その中身を開けて、どんな部品が組み合わさって動いているのかを確かめます。A-01で扱った概念理解の第一歩、つまり「何の部品でできているか」を、Webアプリで具体的に埋めていきます。
このスライドのポイント
- A-02: Webアプリ＝ユーザーの入力・操作に応じて処理と保存を行うもの
- 前回は「それが何か」を外側から決めた
- この講義は、その中身を部品に分解する
- A-01の概念理解の第一歩「何の部品でできているか」を埋める
主要部品の定義
主要な部品を一つずつ定義します。ブラウザは、利用者の側でページを表示し操作する場です。フロントエンドは、そのブラウザの中で動く画面側のプログラムを指します。サーバーは、受け取った依頼を処理する側のコンピュータとプログラムです。APIは、A-02で見たとおり、フロントとサーバーの間でやり取りする依頼の窓口でした。残る部品も押さえます。データベースはデータを構造化して保存し検索する仕組み、認証は利用者が本人かを確かめる仕組み、ストレージは画像やファイルの置き場、外部サービスは決済や通知など自作しない機能の借り先です。
このスライドのポイント
- ブラウザ＝利用者側でページを表示・操作する場
- フロントエンド＝ブラウザの中で動く画面側のプログラム
- サーバー＝受け取った依頼を処理する側のコンピュータとプログラム
- API＝フロントとサーバーの間の依頼の窓口（A-02で定義済み）
- データベース＝データを構造化して保存・検索する仕組み
- 認証＝利用者が本人かを確かめる仕組み／ストレージ＝画像やファイルの置き場／外部サービス＝決済・通知など自作しない機能の借り先
なぜ部品の区別が必要か
なぜこれを知る必要があるのでしょうか。部品の区別がついていないと、エラーが起きたときに、それがどの部品で起きているのかを切り分けられません。切り分けられなければ、AIに向かって「どこを直してほしいか」を指示することもできなくなります。バイブコーディングでは、この切り分けと指示が、そのまま成果を左右します。
このスライドのポイント
- 区別がつかないと、エラーがどの部品で起きたか切り分けられない
- 切り分けられないと、AIへ「どこを直して」と指示できない
- バイブコーディングでは、この切り分けと指示が成果を左右する
全体の構造
部品どうしの関係を全体像で見ます。基本の流れは、左から順に、ブラウザ、フロントエンド、そのあいだにAPIを挟んでサーバー、そしてデータベースへとつながります。この並びの下に、認証、ストレージ、外部サービスが控えていて、必要なときに呼び出されます。矢印は一方通行ではなく、依頼と応答が往復している点が大切です。全体像として、どの部品も単独ではなく、依頼を渡し合って動いていると捉えてください。
このスライドのポイント
- 基本の並び: ブラウザ → フロントエンド →（API）→ サーバー → データベース
- 下段に控える: 認証・ストレージ・外部サービス（必要なとき呼び出される）
- 矢印は往復（依頼と応答）
- どの部品も単独では動かず、依頼を渡し合う
処理の流れ——お問い合わせフォームの一往復
お問い合わせフォームの送信を例に、一往復を追います。まず利用者がブラウザで内容を入力します。送信ボタンを押すと、フロントエンドがAPIを通じてサーバーへ依頼を渡します。サーバーは内容を検査し、問題なければデータベースへ保存します。最後に完了の表示がブラウザへ返ります。責任範囲で言えば、見た目が崩れているならフロントエンド、保存されていないならサーバーかデータベースが疑わしい、と切り分けられます。
このスライドのポイント
- 入力（ブラウザ）→ 送信（フロントエンドがAPIへ）→ 検査と保存（サーバー→データベース）→ 完了表示
- 責任範囲: 見た目の崩れ＝フロントエンド
- 責任範囲: 保存されない＝サーバーかデータベース
技術サンプル: 構成図で部品の関係を描く
サンプルは、部品の関係を表すテキストの構成図です。ブラウザからフロントエンド、APIを経てサーバー、そしてデータベースへと矢印でつなぎ、脇に認証、ストレージ、外部サービスを添えます。読み方の要点は二つです。一つは、矢印が往復していること。もう一つは、ブラウザからデータベースへ直接は触れず、必ずサーバーを経由することです。AIには「このアプリの構成図を、ここに挙げた部品名を使って描いてください」と頼めます。
混同しやすい概念——サーバーとデータベース
混同しやすいのが、サーバーとデータベースです。サーバーは依頼を受けて処理する場所、データベースはデータを保存し検索する場所で、役割が違います。同じコンピュータに同居することもありますが、担当する仕事は別物です。実際に保存を指示するのはサーバー側で、データベースはその指示を受けて保存を実行します。
バイブコーディングでの確認点
バイブコーディングでの確認点です。AIが作ったものに対しては、「この機能はどの部品で動いていますか」と尋ね、どこが担当かを部品名で答えてもらいます。あわせて「データベースに直接アクセスしている箇所はありますか」と確認すると、危険箇所の見当がつきます。A-01で見たとおり、部品と責任範囲を自分の言葉で言い直せるかどうかが、理解できているかの目安になります。
このスライドのポイント
- AIが作った後に「この機能はどの部品で動いていますか」と部品名で答えてもらう
- 「データベースに直接アクセスしている箇所はありますか」で危険箇所の見当をつける
- A-01の要素で、部品と責任範囲を自分の言葉で言い直せるかを目安にする
一問一答とまとめ
最後に一問一答です。入力されたデータを保存する役割を持つ部品は、どれでしょうか。答えは、データベースです。ただし、保存を指示するのはサーバーである点も、あわせて押さえてください。30秒でまとめます。Webアプリは、ブラウザ、フロントエンド、サーバー、データベースを中心に、認証、ストレージ、外部サービスが支える構成でできていて、データはこれらを往復して流れます。次回は、この部品たちを扱う上で、人間とAIがどう仕事を分担するのかを決めます。関連資料は「Webアプリ構成図入門」「SaaS要素分解図鑑100」「Webアプリ構築 完全ワークフロー」です。
このスライドのポイント
- 一問一答: 入力されたデータを保存する役割の部品は？ → データベース（保存を指示するのはサーバー）
- 30秒まとめ: 主要部品はブラウザ・フロントエンド・サーバー・データベースが中心、認証・ストレージ・外部サービスが支える。データは往復して流れる
- 次回: 部品を扱う上での人間とAIの分担を決める
- 関連資料: 「Webアプリ構成図入門」「SaaS要素分解図鑑100」「Webアプリ構築 完全ワークフロー」
