なぜ用語がいつも曖昧になるのか
バイブコーディングを始めると、デプロイ、ポート、API、コンテナ、ビルドといった言葉が次々に出てくる。一つずつ調べればその場では分かるのに、数日たつとまた曖昧になる。
ばらばらに覚えているからだ。これらは互いに独立した知識ではなく、一つの流れの上に順番に並んだ位置の名前である。順番を知らなければ二十個の無関係な単語になり、順番を知れば一本の線になる。
だからこの連載は道具の使い方から始めない。九回にわたってその線を前から後ろへたどる。今日はその線全体を一度に見る。
アドレスバーに入力すると起きること
ブラウザのアドレスバーにアドレスを入れてエンターを押すと、三つのことが順に起きる。
一つ、自分のブラウザがどこかにあるコンピュータに、この画面に必要なものをくれと要求する。二つ、そのコンピュータがファイルを送り返す。三つ、ブラウザがそれを読んで画面として描く。
会員登録でも動画視聴でもコメント投稿でも、違うのは見た目だけだ。中で起きているのはこの三段階の繰り返しである。
自分のブラウザ ──── この画面に必要なものをください ────▶ サーバー
◀─── HTML · CSS · JavaScript · データ ───
ブラウザが受け取ったものを読んで画面を描くサーバーは特別な機械ではない
応答するそのコンピュータをサーバーと呼ぶ。名前のせいで専用機材を思い浮かべやすいが、ただのコンピュータだ。
違うのは一点。いつリクエストが来ても答えられるようにつけっぱなしにしてあることである。この語自体が「仕える」という意味から来ている。
だから自分のノートパソコンもサーバーになれる。ネットにつながっていて、電源が入っていて、リクエストに答えるプログラムが動いていれば条件はそろう。開発中に自分の機械でサーバーを立ててブラウザで開くのが、まさにそれだ。
学ぶものがそれぞれ付く場所
この一本の線を描いておくと、これから出てくる技術の居場所が定まる。
リクエストの行き先を決める場所に IP とポートとドメインがある。何を返すかを決める場所にウェブサーバーがある。返すものを作る場所がバックエンドで、返ってきたものを画面に描く場所がフロントエンドだ。中身を貯めておく場所にデータベースとストレージがある。そしてこの全体を別のコンピュータへ丸ごと移す場所にコンテナがある。
九回はまさにこの順に進む。ブラウザが読む三つのファイルから出発し、アドレスと門番を経てフロントエンドとバックエンドへ行き、データがどこに貯まるかを見てからデプロイで終わる。
| 回 | 線の上の位置 | 代表的な名前 |
|---|---|---|
| 02 | ブラウザが読むファイル | HTML · CSS · JavaScript |
| 03 | リクエストの行き先 | IP · ポート · ドメイン · DNS |
| 04 | 何を返すかを決める | Nginx · HTTPS |
| 05 | 返ってきたものを描く | Next.js |
| 06 | 返すものを作る | FastAPI · JSON |
| 07 | 値を貯めておく場所 | PostgreSQL |
| 08 | ファイルを貯めておく場所 | ストレージ · CDN |
| 09 | 丸ごと移す方法 | Docker · Kubernetes |
この地図が実際に効く場面
エージェントが書いたコードを開いたとき、問える質問ができる。これはどのマスの話か。
画面が出ないという一つの症状も、マスごとに原因が違う。アドレスが違う場所を指している、門番が別のフォルダを返している、バックエンドが答えを作れない、データベースが空である。まったく別の四つの問題だ。先にマスを絞れば検索語が変わる。
エージェントに聞くときも同じである。「サイトが動きません」より「デプロイ後にドメインは引けるが 502 が返ります」のほうがはるかに早く終わる。次回からこのマスを一つずつ埋めていく。