# ボタンを押してから、画面が返ってくるまで

> レベル: 初級 ／ 対象: 大人
> 出典: Kotowary — https://kotowary.com/learn/units/web-request-flow?level=beginner&audience=adult
検索ボタンを押すと、一瞬で結果が返ってくる。あの数百ミリ秒のあいだに、裏では何台もの機械が**バケツリレー**をしています。まず全体を1枚の地図で見て、次に順番に追いかけましょう。

この記事は「サービス全体の**構成**の旅」です。そもそもURL入力から画面表示までの通信経路の詳細は [URLを打ってから表示されるまで](/learn/units/url-to-page) で見られます。

## まず全体を1枚で

::diagram{name="request-flow"}

左の**あなた（ブラウザ）**から出たお願いが、右の**データ**まで往復して戻ってくる——これが1リクエストの流れです。各マスをクリックすると、その機械の解説へ飛べます（このあと1つずつ作っていきます）。

ポイントは2つの「囲い」：

- **ネットワーク**＝これらの機械をつなぐ土台。図の線はぜんぶネットワーク。
- **セキュリティ**＝あなたの手元（端末）以外を、まとめて守る囲い。

## リクエストの旅（順番に追う）

1. **あなた（ブラウザ ※1）**が「このページください」とお願いを出す
2. 画像や見た目の部品は、まず近くの **CDN（※2）** が持っていれば即返す（往復が短くて速い）
3. データが要るお願いは、**入口（※3）** が受け取り、空いているサーバへ振り分ける（同時に、あやしいお願いは門番が弾く）
4. **フロントサーバ（※4）** が画面の器を用意し、中身を **バックエンド（※5）** に頼む
5. バックエンドが「何を返すか」を考え、必要なデータを **DBサーバ（※6）** に取りに行く
6. よく使うデータは **キャッシュ（※7）** にあれば、DBまで行かずに即返す（近道）
7. 画像・動画など大きな塊は **ストレージサーバ（※8）** から出す
8. 集めたデータでバックが答えを組み立て、フロント経由であなたに返る → **画面が表示される**

**登場人物メモ**（※の説明）:

- **※1 ブラウザ** — あなたの手元の画面。お願いを出し、返ってきたものを表示する。この図では「フロント（前面）」の役
- **※2 CDN** — 世界中に分散した“利用者の近くの倉庫”。変わらないもの（画像・CSS・JS）を配る係。無ければオリジンに取りに行く
- **※3 入口（ロードバランサ／WAF）** — 混雑を捌く受付（振り分け）＋あやしいお願いを弾く門番
- **※4 フロントサーバ** — 画面（見た目）を組み立てて返す係
- **※5 バックエンドサーバ** — 「何を返すか」を考える頭脳。判断・計算・データ出し入れの指示
- **※6 DBサーバ** — 表の形に整理されたデータの保管係。探す・並べるが得意
- **※7 キャッシュ** — よく使う答えを手元に置く“メモ”。DBより速い（Redisなど）
- **※8 ストレージサーバ** — 画像・動画・ファイルなど大きな塊の倉庫

## 速くする・強くするための工夫

基本は「ブラウザ→入口→フロント→バック→DB」の一本道。そこに、快適さのための脇役が足されます。

- **CDN** — “配信”を速く。近くの倉庫から静的なものを返す
- **キャッシュ** — “処理”を速く。よく使う答えを手元に置き、DBまで行かない
- **入口（ロードバランサ）** — 混雑に強く。同時に来たお願いを複数のサーバへ振り分ける

CDNとキャッシュは名前が似ていますが、**CDN＝配信の近道／キャッシュ＝処理の近道**、と向きが違います。

## ⚠️ うまくいかないとき

- **混雑** — アクセスが集中。入口が複数サーバに分散するが、それでも溢れると「503（混んでいます）」
- **見つからない** — そのページが無い →「404」
- **裏で失敗** — サーバの処理でエラー →「500」
- **遅い** — 毎回DBまで行くと遅い → キャッシュ・CDNで近道を作る

どれも「どの機械で起きたか」を知っていると、原因の見当がつくようになります。