リクエストはどう流れるか
ここまでを一つにつなげましょう。ユーザーが**「プロフィールを保存」**をクリックするのを、いま出会ったばかりのすべての部品を通して追いかけてみます。これは本書の中でいちばん役に立つ思考モデルです。もし図を一つだけ頭に刻むなら、これにしてください。
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でメールを検証して」)——そして正確さこそがこのゲームのすべてです。