Web の仕組み
ブラウザでページを開いてから表示されるまでに動く仕組みを、通信・ブラウザ・キャッシュ・認証・配信の形に分けて学ぶ。似ているが違う概念を比べて、場面ごとに使い分けられるようにする。
この教材で学ぶ
学習記録を読み込んでいる
1 回は約 10 分。段階 1 の短い問いで温めてから、段階 2・3 の問いを考える
概念 23
段階 1 のカードがすべて定着した概念には段階 2 を勧める。勧めるだけで、どの段階も選べる
- DNS
ドメイン名を IP アドレスに変換する、インターネットの名前解決の仕組み。
- TCP と UDP
TCP は接続を確立して順序と再送を保証し、UDP は保証を省いて軽く速く送るトランスポート層のプロトコル。
- TLS
通信の暗号化と、証明書によるサーバーの認証を担うプロトコルで、HTTPS の土台になる。
- HTTP/2
1 本の TCP 接続の上で複数のリクエストを多重化して、HTTP/1.1 の待ち時間を減らした版。
- HTTP/3
UDP の上に作られた QUIC を使い、パケットの損失が他のストリームを止めないようにした版。
- ステータスコード
レスポンスの結果を 3 桁の数字で表したもので、先頭の桁が成功やエラーなどの種類を示す。
- HTTP メソッドと冪等性
GET や POST などのメソッドは、何度送っても結果が同じになるか (冪等性) で性質が分かれる。
- 同一オリジンポリシー
スキーム・ホスト・ポートが同じオリジンでなければ、スクリプトから応答を読めないようにするブラウザの決まり。
- CORS
サーバーがレスポンスヘッダで、別オリジンからの読み取りを許可する仕組み。
- Cookie の属性
SameSite・HttpOnly・Secure などの属性で、Cookie をいつ送り、誰に読ませるかを決める。
- localStorage と sessionStorage
オリジンごとに文字列を保存するブラウザのストレージで、localStorage は残り続け、sessionStorage はタブを閉じると消える。
- レンダリングの流れ
ブラウザは HTML と CSS から DOM と CSSOM を作り、レイアウトで位置を計算してから画面に描画する。
- Cache-Control
レスポンスをキャッシュしてよいか、どれだけの期間使ってよいかを指定するヘッダ。
- ETag と条件付きリクエスト
リソースの版を表す ETag を送り返し、変わっていなければ本文なしの 304 を受け取る仕組み。
- CDN
世界各地のサーバーにコンテンツをキャッシュし、利用者の近くから配信する仕組み。
- セッションとトークン
ログイン状態をサーバーに保存して ID で引くか、情報を詰めたトークンをクライアントに持たせるかの違い。
- JWT
ヘッダ・ペイロード・署名をつないだ、改ざんを検出できるトークンの形式。
- OAuth 2.0
利用者のパスワードを渡さずに、別のアプリへ API を使う権限を与える認可の仕組み。
- OpenID Connect
OAuth 2.0 の上に、ログインした利用者が誰かを確かめる認証の仕組みを足した規格。
- パスキー
端末に保存した秘密鍵で署名して本人を確かめる、パスワードを使わない認証の仕組み。
- SSR・SSG・CSR
HTML をリクエストごとにサーバーで作るか、ビルド時に作るか、ブラウザで JavaScript から作るかの違い。
- REST と GraphQL
REST はリソースごとの URL で取得し、GraphQL は 1 つのエンドポイントに必要なフィールドを問い合わせて取得する。
- WebSocket と Server-Sent Events
WebSocket は双方向にメッセージを送り合い、Server-Sent Events はサーバーから一方向に送り続ける。
段階 2・3 の論点 8
復習のたびに同じ論点を別の角度から問う。答えられなければ段階 1 の問いに分けて出し直す
- 段階 2 つなげる · 問い 2Cookie の SameSite=Lax と Strict は何が違う?
- 段階 2 つなげる · 問い 2PUT は冪等で POST は冪等でないのはなぜ?
- 段階 2 つなげる · 問い 2HTTP/1.1・HTTP/2・HTTP/3 は、複数のリクエストの扱いがどう違う?
- 段階 2 つなげる · 問い 3CORS を初心者に一言で説明すると?
- 段階 2 つなげる · 問い 2OAuth 2.0 と OpenID Connect は何が違う?
- 段階 3 使う · 問い 3Cache-Control の no-cache と no-store は何が違う?
- 段階 3 使う · 問い 3管理画面のログインに JWT をブラウザの localStorage へ置く案が出た。どう答える?
- 段階 3 使う · 問い 3更新が月に数回の会社のお知らせページと、ログイン後のダッシュボード。SSR・SSG・CSR のどれで作る?