ゆるテックノート

WWW(World Wide Web)とは?

ブラウザで検索してリンクをクリックする。当たり前の動きの裏側には「ハイパーリンクで文書を結ぶ」というシンプルな仕組みがあります。ここでは、毎日無意識に使っているWWWがどんなレイヤーで動き、どこに気をつけるとトラブルを避けられるのかをざっくりまとめます。

WWWって何?

World Wide Webは「ハイパーリンクで世界中の文書をつなぐ仕組み」。インターネットという道路の上で、HTTPとHTMLを使って情報を運ぶ交通体系です。

インターネットとの違い

  • インターネット:回線と機器をつなぐネットワークの土台(IP, ルーター, 光回線など)。
  • WWW:その上で動く情報の配達ルール(HTTP/HTTPS)と文書フォーマット(HTML)。メールやFTPなど、Web以外のプロトコルもインターネット上に共存する。

WWWを形作る3要素

  • URL(URI):どこにあるかを示す住所。
  • HTTP:住所にリクエストを届ける配達ルール。
  • HTML+リンク:人が読めて、次の場所へ橋をかける文書。

URLを覗いてみる

アドレスバーに出る文字列には、配送先や安全性のヒントが詰まっています。

URLの構造

部分 例 意味
スキーム https 通信手段。WebではHTTP/HTTPSが主役。
ホスト www.example.com 接続先の名前(IPアドレスの場合もある)。wwwあり・なしは別のホスト名で、同じサイトになるかは設定次第。
パス /docs/www 資源を識別するパス。実際のファイルの場所とは限らない。
クエリ ?q=web 追加パラメーター。検索やフィルターでよく使う。
フラグメント #what-is ページ内の位置などを示す。通常のHTTPリクエストには含めず、ブラウザ側で処理する。

リンクを踏むと何が起こるか

  • ブラウザがDNSでホスト名をIPに変換する(キャッシュがあれば再利用)。
  • 新しいHTTPS接続ではTLSで暗号化し、証明書の名前・信頼性・有効期間などを確認する。既存接続を再利用する場合もある。
  • HTTPでリクエストを送る(GET/POSTなどメソッドやヘッダーを付与)。
  • サーバーがレスポンスを返し、HTML/CSS/JS/画像を追加で取得して描画する。

HTTPのキホン

HTTPはリクエストとレスポンスで通信するプロトコルです。各要求の意味は独立していますが、アプリはCookieやサーバー側セッションで状態を管理できます。要求の情報はURL・ヘッダー・本文などに分かれ、すべてをヘッダーに入れるわけではありません。

リクエストとレスポンス

  • メソッド:GETは取得、POSTは送信/作成、PUT/PATCH/DELETEは更新や削除のAPIで利用される。
  • ヘッダー:User-Agent, Accept, Cookieなどで条件や状態を伝える。キャッシュ制御もここで行う。
  • レスポンス:ステータスコードとヘッダーなどを返す。HEADへの応答や204・304など、本文を持たないものもある。

状態を覚える仕掛け

  • Cookie:ブラウザに小さなデータを保存し、次のリクエストで送り返す。セッションIDやログイン状態で利用。
  • キャッシュ:Cache-ControlやETagで同じ資源の再利用を指示し、速度と帯域を節約。
  • リダイレクト:301/302/307/308などで別URLへ誘導。常時HTTPS化やwww有無の統一に使う。

よく見るステータスコード

コード 意味
200 OK 正常に返せた。
301/302 301は恒久的、302は一時的な移動を表す。
304 未変更。キャッシュをそのまま使ってよい合図。
400/403/404 リクエスト不正 / 許可なし / 見つからない。
500/503 サーバー側の問題。メンテナンスや負荷で返ることがある。

いまのWeb事情

「とりあえずブラウザで開けばいいよね」という時代だからこそ、背景の変化を押さえておくと安心です。

HTTPSがデフォルト

  • 証明書の期限切れは接続エラーの原因になる。自動更新と更新失敗の監視を組み合わせると、更新漏れを減らせる。
  • 主要ブラウザのHTTP/2利用は通常HTTPS経由。ただしHTTP/2の仕様には平文TCPでの利用もある。HTTP/3はTLSを組み込んだQUICを使う。速度の改善幅は環境による。
  • HSTSやリダイレクトでHTTPをHTTPSへ強制するのが一般的。

ブラウザ以外のWeb

  • スマホアプリやIoTもHTTP(S) APIを叩いてデータを取得・更新する。
  • HTMLではなくJSONやXMLを返す「Web API」もWWWの仲間。URL設計とキャッシュ戦略は同じように大事。

プライバシーの変化

  • サードパーティCookieの扱いはブラウザ・設定で異なる。Cookieの有無だけで利用者数や追跡の可否を決めつけない。
  • トラッキング防止でリファラやUAが削られる場合があり、解析ツールの設定が重要。

覚えておくと役立つ小ネタ

日常のトラブルシュートや設計のときに思い出したいポイントをメモしました。

トラブル時のチェックリスト

  • まず再読み込みや別のブラウザプロファイルで比較する。必要なら対象サイトのキャッシュ・Cookieを削除するが、ログアウトや設定消失に注意する。
  • DNS切り替えは反映に時間がかかるので、digで応答を確認する。
  • 証明書の有効期限・接続先の名前・中間証明書を確認する。警告を無視して接続しない。
  • 同一生成元ポリシー(SOP)でブロックされていないか。CORS設定やサブドメイン分割に注意。

リンク設計のコツ

  • パーマリンクを意識してURLを安定させる。移動時は301リダイレクトで旧URLを尊重する。
  • フラグメント(#id)を使うと長文に直接リンクでき、Webらしい引用がしやすい。
  • OGPなどメタデータを整えると、SNSや検索でリンクプレビューがきれいに出る。

仕様・関連記事

RFC 9110: HTTP Semantics / RFC 9113: HTTP/2
HTTPの基本 / HTTPのバージョン / DNSの基本