【第1回】AIの言う「サーバー側で」が分かるようになる｜Webの仕組み（嫁子が教えるTS講座）
今回のゴール
- 「ブラウザ」「サーバー」「HTTP」の3語が、それぞれ何をしているか言える
- 自分がこれから何を作ろうとしているのか、地図の上で指させる
- コードは一行も書きません
この講座は、AI妻の嫁子が先生役で進めます。コードを全部手で書く講座ではありません（→はじめに：なぜ学ぶのか）。全体の流れは講座の目次にあります。
嫁子: この回、コードが一切出てこないよ。地図を見るだけ。
「早く実践に入りたい」って思うでしょ。でもね、ここを飛ばすとAIとの会話が成立しなくなるんだよ。
たとえばあなたが「ログイン機能を作って」と頼んだとする。AIは「サーバー側で処理しますか、それともクライアント側で？」と聞き返してくる。そこで固まったら、そこで終わりだよ。
逆に今日の15分で地図を掴んでおくと、AIが使う用語の8割が「あ、あれのことか」で済むようになる。指示も具体的に出せるようになるよ。
Webサイトは「荷物のやりとり」でできている
あなたがスマホで買い物サイトを開くとき、実際に起きているのはこういうことです。
- あなたのスマホが「このページください」とお願いを送る
- どこかにあるコンピューターがその荷物を送り返す
- あなたのスマホが受け取った荷物を組み立てて画面に表示する
これだけです。Webサイトを見るという行為は、毎回この往復をしているにすぎません。
そして、この3つの登場人物に名前がついています。
| 呼び方 | 役割 | 身近な例え |
|---|---|---|
| クライアント（ブラウザ） | お願いする側・受け取る側 | 荷物を注文する人 |
| サーバー | 荷物を用意して送り返す側 | 倉庫にいる発送担当 |
| HTTP | やりとりのルール・伝票の書式 | 「送り状の書き方」の決まり |
① ブラウザ（クライアント）は「受け取って組み立てる人」
Chrome、Safari、Edge。これらがブラウザです。
ブラウザの仕事は2つあります。
お願いを送る
アドレスバーに otto-hikidashi.com と打ってEnterを押すと、ブラウザは「このページの中身をください」というお願いを送ります。
受け取ったものを組み立てて表示する 返ってきたのは、実はただの文字の羅列です。それをブラウザが解釈して、見出しを大きくしたり、リンクを青くしたり、画像を並べたりして、私たちが見ている画面を組み立てています。
嫁子: ここ大事。ブラウザに届く時点では、まだ「画面」じゃないんだよ。設計図と材料が届いて、ブラウザが現場で組み立ててる。IKEAの家具みたいなものだね。
だから同じページでも、ブラウザが違うと微妙に見た目が変わることがある。組み立てる人が違うから。
② サーバーは「用意して送り返す人」
サーバーというと巨大な機械を想像するかもしれませんが、これは役割の名前です。「お願いを受けて、何かを返すコンピューター」のことを、そう呼んでいるだけです。
サーバーの返し方には、大きく2種類あります。
A. あらかじめ作っておいたものを、そのまま返す（静的） 出来合いのお弁当を棚から取って渡すイメージです。誰が来ても同じものが返ります。速くて安上がりです。
B. お願いを見てから、その場で作って返す（動的） 注文を聞いてから調理するイメージです。「ログインしている人の名前を表示する」「その人の買い物カゴを見せる」など、人によって中身が変わる場合はこちらが必要です。
嫁子: この講座の最終目標は、Bを自分で作れるようになること。
ちなみにあなたが今読んでいるこのサイトはAの静的だよ。記事は全部あらかじめ作ってあって、誰が来ても同じものが返る。だから速いし、維持費もほぼかからない。
ただ、動的なほうが偉いわけじゃないからね。必要ないのに動的にすると、遅くて高くて壊れやすいだけ。そこは後で詳しくやるよ。
③ HTTPは「やりとりのルール」
ブラウザとサーバーは、勝手な形式で話しかけても通じません。「お願いの書き方」と「返し方」に共通のルールが要ります。それが HTTP です。
送り状にあたる部分には、たとえばこういうことが書かれています。
- どのページが欲しいか（
/yomeko/のようなパス） - 何をしたいか（見たいだけなのか、データを送りたいのか）
- 結果はどうだったか（成功したか、見つからなかったか）
最後の「結果」でよく見るのが、あの数字です。
| 数字 | 意味 | よく見る場面 |
|---|---|---|
| 200 | 成功。ちゃんと返せた | 普通にページが開いたとき |
| 404 | 見つからない | URLを打ち間違えたとき |
| 500 | サーバー側で問題が起きた | 作った本人のミスであることが多い |
嫁子:
httpsのsは「安全（secure）」の s。やりとりの中身が暗号化されているという意味だよ。これが無い
httpのままだと、途中で中身を覗かれる可能性がある。ログインのパスワードとかを扱うサイトでhttpsじゃなかったら、それは避けたほうがいい。今はほぼ全部httpsだけどね。
今回のまとめ
- Webサイトを見る＝「お願い」と「返事」の往復が起きている
- ブラウザはお願いを送り、返ってきた材料を組み立てて画面にする
- サーバーは返す役。あらかじめ用意しておく（静的）か、その場で作る（動的）かの2種類がある
- HTTPはそのやりとりのルール。200なら成功、404は見つからない、500はサーバー側の問題
次にやること
次回は、実際に手を動かす準備をします。VS Code（コードを書くアプリ）と Node.js（コードを動かす仕組み）を入れて、真っ黒な画面（ターミナル）に初めて文字を打ちます。
今回の宿題：いま使っているブラウザで、どこでもいいのでページを開いて、アドレスバーの https の部分を見てください。それが今日話した「安全なやりとりのルールを使っています」という印です。
嫁子: あと、404ページをわざと出してみるのもおすすめだよ。このサイトのURLの後ろに適当な文字を足してEnterしてみて。「見つからない」が返ってくるのが体験できるから。
用語って、読むだけだと入らないんだよね。一度でも自分の目で起こすと、急に自分のものになる。