# フロントサーバ — 画面を組み立てて返す係

> レベル: 初級 ／ 対象: 大人
> 出典: Kotowary — https://kotowary.com/learn/units/front-server?level=beginner&audience=adult
バックエンドが「頭脳」なら、フロントは「顔」。あなたが実際に目にする画面を用意して返すのが**フロントサーバ**です。

## これは何をする係？

レストランのホール係を思い浮かべてください。注文を受け、料理（データ）は厨房（バックエンド）に頼み、盛り付けてテーブルに運ぶ——お客さんが接するのはこの人です。

::image{src="/images/web-services/server.webp" alt="サーバ機器" caption="フロントサーバの実体もこうしたコンピュータ"}

フロントサーバは、**見た目（HTML・CSS・JS ※1）** を組み立てて返します。中身のデータは自分では作らず、バックエンドに頼みます。

**登場人物メモ**:

- **※1 HTML・CSS・JS** — HTML（骨組み）・CSS（見た目の装飾）・JS（動き）。この3つで画面ができる
- **※2 静的ファイル** — 画像・CSS・JSなど、誰に対しても同じもの

## 仕事の流れ

1. ブラウザから「このページください」を受け取る
2. 画面の器（HTML）を用意する
3. 中身のデータが要るなら、バックエンドに頼む（API）
4. 受け取ったデータを画面にはめ込み、組み立てて返す
5. ブラウザがそれを描画 → あなたが見る

## 静的と動的

- **静的配信** — 誰に見せても同じもの（画像・CSS・JS）は、そのまま配る。速い
- **動的（SSR）** — 人によって違う画面（ログイン後など）は、その場で組み立てて返す

「トップページの見た目」は静的、「マイページ」は動的、と混ざっているのが普通です。

## なぜフロントだけじゃダメ？

「フロントだけで全部やればいいのでは？」と思うかもしれません。でも、それだと困ることが3つあります。

1. **手元は改ざんできる** — ブラウザはあなたのPCの中。中身は見えるし、書き換えられます。もし「支払い済みか」をフロントで判断したら、誰でも書き換えて「済み」にできてしまう。だから**大事な判断はサーバ（バック）でやる**
2. **みんなで同じデータを見たい** — 在庫や残高は、全員が同じ正しい値を見る必要がある。各自の手元で持つとバラバラになる。だから**DBという「1つの正しい置き場」に集める**
3. **秘密が置けない** — DBの鍵やAPIキーは、中身が見えるフロントには置けない。だから**秘密に触れるのはサーバ側だけ**

つまりフロントは「顔」に徹し、判断とデータは**信じられない場所（手元）ではなく、守られた場所（バック）**で扱う。これがフロントとバックを分ける理由です。

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

- **見た目は出るが中身が空** — バックエンドやDBが応答していない（顔はあるが料理が来ない）
- **レイアウトが崩れる** — CSSやJSが読み込めていない
- **真っ白** — JSのエラーで描画が止まった