~/VibeHandbook
$39

05 · 07

リクエストはどう流れるか

ここまでを一つにつなげましょう。ユーザーが**「プロフィールを保存」**をクリックするのを、いま出会ったばかりのすべての部品を通して追いかけてみます。これは本書の中でいちばん役に立つ思考モデルです。もし図を一つだけ頭に刻むなら、これにしてください。

1. ユーザー が「プロフィールを保存」をクリック
        │
        ▼
2. FRONTEND(HTML フォーム、JavaScript が値を読む)
        │   HTTP リクエストを送る:  "POST /profile  { name: 'Ada' }"
        ▼
3. HOSTING がリクエストを、動作中の BACKEND へ振り分ける
        │
        ▼
4. BACKEND
     ├─ このユーザーはログインしてる?       (no  → 401 を返す、停止)
     ├─ データは正しい?                     (no  → 400 を返す、停止)
     └─ 問題なし → DATABASE に保存
        │
        ▼
5. DATABASE が行を書き込み、BACKEND に確認を返す
        │
        ▼
6. BACKEND が応答:  "200 OK  { saved: true }"
        │
        ▼
7. FRONTEND が応答を受け取り、DOM を更新
        │   (「プロフィールを保存しました ✓」) — ユーザーがそれを見る
        ▼
   完了

各層が何をしたかをたどってみましょう。frontend は入力を集めて送り、ホスティング はリクエストを正しい場所へ届け、backend はルール(ログイン、検証)を守らせて判断し、データベース はそれを恒久的なものにし、そして応答がずっと戻ってきて、frontend が画面を更新できました。あらゆるアプリはこのループのバリエーションであり、毎秒何千回も実行されています。

チェックがすべてbackendで行われ、frontendでは決して行われないことに注目してください——最初の節のルールが実際に働いているのです。frontendはユーザーのためのもの、backendは真実のためのものです。各ステップがどこで起きるかを知っていれば、機能を曖昧にではなく(「フォームを動くようにして」)、正確に説明できます(「保存する前にbackendでメールを検証して」)——そして正確さこそがこのゲームのすべてです。

オフラインでも読みたい?

PDF + EPUB + ダウンロード可能なプロンプトライブラリ + バージョンアップデートを入手しよう。

$ PDFを入手 — $39