ゆるテックノート

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 DNSで引ける名前。wwwは単なるサブドメインで、付けても付けなくてもOK。
パス /docs/www サーバー内の場所。静的ファイルでも動的生成でもよい。
クエリ ?q=web 追加パラメーター。検索やフィルターでよく使う。
フラグメント #what-is ページ内リンク。サーバーには送られずブラウザが処理。

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

  • ブラウザがDNSでホスト名をIPに変換する(キャッシュがあれば再利用)。
  • HTTPSならTLSで暗号化チャネルを確立する(証明書の有効期限もここで確認)。
  • HTTPでリクエストを送る(GET/POSTなどメソッドやヘッダーを付与)。
  • サーバーがレスポンスを返し、HTML/CSS/JS/画像を追加で取得して描画する。

HTTPのキホン 📨

HTTPは「リクエストを送ってレスポンスを受け取る」シンプルなプロトコル。状態は基本的に覚えない(ステートレス)ため、必要な情報は毎回ヘッダーに載せます。

リクエストとレスポンス

  • メソッド:GETは取得、POSTは送信/作成、PUT/PATCH/DELETEは更新や削除のAPIで利用される。
  • ヘッダー:User-Agent, Accept, Cookieなどで条件や状態を伝える。キャッシュ制御もここで行う。
  • レスポンス:ステータスコード(200, 404, 503など)とヘッダー/本文で構成される。

状態を覚える仕掛け

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

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

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

いまのWeb事情 🚀

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

HTTPSがデフォルト

  • 証明書が切れると警告画面になりユーザーが離脱する。自動更新(Let's Encrypt + cronなど)は必須。
  • HTTP/2やHTTP/3はHTTPS前提で高速化。並列通信やヘッダー圧縮が効く。
  • HSTSやリダイレクトでHTTPをHTTPSへ強制するのが一般的。

ブラウザ以外のWeb

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

プライバシーの変化

  • サードパーティCookieの制限が進み、計測や広告は別の仕組み(ファーストパーティやサーバーサイド計測)へ移行。
  • トラッキング防止でリファラやUAが削られる場合があり、解析ツールの設定が重要。

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

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

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

  • キャッシュやCookieをクリアして再試行(古いリダイレクトやセッションの影響を除去)。
  • DNS切り替えは反映に時間がかかるので、digで応答を確認する。
  • 証明書の有効期限・SAN・中間証明書を確認。期限切れはブラウザ警告の最頻出原因。
  • 同一生成元ポリシー(SOP)でブロックされていないか。CORS設定やサブドメイン分割に注意。

リンク設計のコツ

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