2種類の往復

アドレスを打った直後に起きるのが、入れ物の往復だよ。返ってくるのは HTML で、そこに書かれている CSS や画像や JavaScript を、ブラウザが見つけるたびにもう一度取りに行く。

つまり①は1回では終わらない。ファイルの数だけ往復するので、1ページの表示は何十回もの往復の集まりになるよ。

ここで運ばれるものの大きな特徴は、中身が誰にとっても同じだということ。あなたが見る style.css と、隣の人が見る style.css は同じファイルだね。

同じものを配るだけなら、プログラムを動かす必要が無い。置いてあるファイルをそのまま返せばいい。だからこの往復は速いし、安く済ませられるんだ。

入れ物が届いて JavaScript が動きはじめると、そこから2つめの往復が始まるよ。「ログインしているのは誰か」「その人の投稿はどれか」を聞きに行くんだ。

こちらで返ってくるのは、たいてい HTML ではなくデータだけ。見た目の情報は入っていなくて、値が並んでいるだけだよ。運び方としてよく使われるのが JSON という書き方だね。

①と決定的に違うのは、返す前に考える必要があること。誰からの要求かを確かめ、データベースを見に行き、その人のぶんだけを選び出す。置いてあるものを返すのとは手間がまるで違う。

だから①と②は、別のサーバが担当していることも多いよ。

この2つの往復に、名前が付いている。

• フロントエンド … 学習者の端末（ブラウザ）で動く側。見せることと、操作を受け取ることが仕事
• バックエンド … サーバで動く側。データを預かり、正しいかを判断することが仕事

分ける理由は、変えたい理由が別々だからだよ。ボタンの色を変えるのに、料金の計算方法を触る必要は無いよね。逆に、料金の計算を直しても、画面の作りは変わらない。

もうひとつ大きいのは、同じバックエンドを何種類ものフロントエンドで使い回せること。Web の画面もスマホアプリも、同じデータの往復を叩けばいい。データが見た目を持っていないからこそできることだよ。

ここがいちばん大事な線引きだよ。フロントエンドに送ったものは、学習者から全部見えるんだ。

ブラウザには開発者ツールが付いていて、届いた HTML も JavaScript も、往復の中身も読める。難読化しても読めるし、書き換えて実行することもできるよ。

つまり、秘密をフロントエンドに置くことはできない。外部サービスの API キーを JavaScript に書けば、それは公開したのと同じこと。

判断も同じだよ。「管理者のときだけボタンを出す」を画面だけでやっても、そのボタンが出す往復は手で作れる。だから、判断はバックエンドがもう一度やる必要があるんだ。

合言葉は、画面のチェックは親切で、サーバのチェックが本番。

HTTP には、知っておくと納得のいく性質がある。1往復が終わると、サーバは相手を忘れるんだ（ステートレス）。

だから、データの往復は毎回まっさらなところから始まる。「さっきログインしたじゃないか」は通じないよ。

そこで、リクエストのたびに身分証を持たせる。Cookie に入れて自動で送ることもあれば、Authorization という欄に入れて送ることもある。どちらにしても、毎回付けるという点は同じだよ。

忘れる作りは手抜きではなくて、サーバを何台にも増やせるようにするための設計。どの台に当たっても同じ結果になるのは、前回を覚えていないからなんだ。

ここまでを1枚にまとめると、こうなるよ。

入れ物の往復は、置いてあるファイルを配る係が答える。データの往復は、プログラムが動いてデータベースまで見に行って答える。

この地図が頭にあると、遅いときの原因も分けて考えられるよ。枠が出るまでが遅いなら①の話（ファイルが大きい、数が多い）。枠は出ているのに中身が来ないなら②の話（データベースが遅い、往復の回数が多い）。

直す場所も、直し方も、まるで違うんだ。

通信の重さは、運ぶ量だけでは決まらないよ。1回ごとに固定の手間がかかるので、回数そのものが効いてくるんだ。

小さなデータを100回に分けてもらうのと、まとめて1回でもらうのとでは、後者のほうがずっと速い。1回あたりの往復には、相手を探して、つないで、確かめて、という手続きが必ず付いてくるからだね。

よくある失敗が、一覧を出すために1件ずつ聞きに行くやつだよ。20件の投稿を出すのに、投稿の一覧で1回、それぞれの書き手を聞くのに20回。合計21往復になる。

直し方は「まとめてもらう」。一覧の往復で、書き手の名前まで一緒に返してもらえばいいよね。

1つの画面に、両方の往復で来たものが混ざっていることもあるよ。

たとえばニュースサイトの記事ページ。記事の本文は入れ物と一緒に来ているのに、下のおすすめ記事だけあとから出てくる、ということがあるよね。前者は①、後者は②で運ばれている。

どちらで運ぶかは、誰にとっても同じかとすぐに要るかで決めるよ。全員に同じ本文は①でまとめて運んだほうが速いし、人によって変わるおすすめは②であとから運んだほうが、最初の表示を待たせずに済む。

次のレッスンでは、この「①でどこまで運ぶか」の選び方 — HTML をどこで作るかを扱うよ。

この章の土台になる4つだよ。

• 往復には入れ物の往復（誰が見ても同じ）とデータの往復（人によって違う）がある
• フロントエンドは見せる係、バックエンドは預かって判断する係。同じバックエンドを複数のフロントエンドで使い回せる
• ブラウザに送ったものは全部見える。秘密は置けないし、判断はサーバでもう一度やる
• サーバは前回を覚えていないので、身分証は毎回付ける

「表示されない」と言われたとき、どちらの往復の話なのかをまず決める。それだけで、探す場所が半分になるよ。