これがあなたのアプリにどう対応するか

さあ、この絵の全体をバイブコーディングで作ったアプリの上に重ねてみよう。あなたが作るすべての部品が、このダンスの片側に住んでいるからだ:

• フロントエンドはブラウザで動くすべてだ — ユーザーが見てクリックするボタン、フォーム、レイアウト。それがクライアントだ。おもにリクエストを送り、レスポンスを表示する。
• バックエンドはサーバーで動くあなたのコードだ — リクエストをどう扱うかを決め、データベースと話し、レスポンスを組み立てるロジック。それがサーバーだ。

本物のやり取りはそのすべてを縫い合わせる。ユーザーが「サインアップ」をクリックする(フロントエンド)。ブラウザはフォームのデータを載せて、/api/signup のような path へ HTTPS 越しに POST リクエストを送る。あなたのバックエンドがそれを受け取り、アカウントを作り、ユーザーがログイン状態を保てるよう クッキー を設定し、200 を返す。フロントエンドは成功を見て、ようこそ画面を見せる。そこで太字になっているすべての言葉は、あなたがたった今学んだものだ — そしてそれが、あなたが作るほぼすべてのものの全体の形だ。

これらすべてを一度に頭に抱えておく必要はない。だが後の章が「リクエストはサーバーに届いたのに 500 で返ってきた」、あるいは「このヘッダーを設定せよ」、あるいは「このルートが POST を処理する」と言うとき、あなたは今、それがダンスのどの部分を指しているかを正確に分かる。そのメンタルモデルこそが本当の前提条件だ — そしてあなたはもうそれを手にしている。