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 のどれで作る?