Frontend Academy · レッスン

ブラウザー、DNS、HTTP: リクエストのライフサイクル

アドレスバーのURLがDNS解決、TCP接続、HTTPリクエスト、サーバーのレスポンスを経てブラウザーに戻るまでを追います。

「ブラウザー、DNS、HTTP: リクエストのライフサイクル」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

URLを入力すると何が起こるのか

Webサイトにアクセスするたびに、ブラウザーでは正確な手順が順番に実行されます。この手順を理解すると、どこで問題が起こり得るのか、またどのように高速化できるのかが分かるため、より優れた開発者になれます。

ステップ1 — DNS名前解決

DNS（Domain Name System）は、インターネットの電話帳です。ブラウザーはDNSリゾルバーに「example.comのIPアドレスは何ですか？」と問い合わせます。リゾルバーはキャッシュを確認し、必要に応じて権威ネームサーバーに問い合わせます。

# DNS lookup chain
# Browser cache → OS cache → Router cache → ISP resolver → Root NS → TLD NS → Authoritative NS

ステップ2 — TCPハンドシェイク

IPアドレスが分かると、ブラウザーは3ウェイハンドシェイク（SYN → SYN-ACK → ACK）を使ってTCP接続を確立します。HTTPSの場合は、その後にTLSハンドシェイクが行われ、暗号化方式がネゴシエーションされます。

ステップ3 — HTTPリクエスト

ブラウザーはTCP接続を通じてHTTPリクエストを送信します。リクエストには、メソッド（GET、POST…）、パス（/index.html）、HTTPバージョン、HostやAcceptなどのヘッダーが含まれます。

GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Mozilla/5.0

ステップ4 — HTTPレスポンス

サーバーはリクエストを処理し、レスポンスを返します。レスポンスには、ステータスコード（200 OK、404 Not Found…）、レスポンスヘッダー（Content-Type、Cache-Control）、本文（HTML、JSON、画像のバイト列）が含まれます。

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<!DOCTYPE html>...

HTTP/1.1とHTTP/2とHTTP/3

HTTP/1.1では、1つの接続につき1つのリクエストを送信します。HTTP/2では、1つの接続上で多数のリクエストを多重化します。HTTP/3はQUIC（UDPベース）を使用するため、特にパケットロスが発生しやすいモバイルネットワークで遅延を抑えられます。

知っておくべきステータスコード

2xx = 成功（200 OK、201 Created）。3xx = リダイレクト（301 Moved Permanently、304 Not Modified）。4xx = クライアントエラー（400、401、403、404）。5xx = サーバーエラー（500、502、503）。

HTTPSとTLS

HTTPSはTLS（Transport Layer Security）の中にHTTPを包みます。TLSは、通信内容を読み取れないようにする暗号化、証明書による認証（実際にexample.comと通信していることの確認）、データが改ざんされていないことを保証する完全性を提供します。

キャッシュ: 繰り返しアクセスを高速化

レスポンスにはCache-Control: max-age=86400を含めることができ、ブラウザーは1日間、キャッシュ済みのコピーを再利用できます。ETagとLast-Modifiedヘッダーを使うと、キャッシュされたバージョンがまだ新しいかどうかをブラウザーが検証できます。

Cache-Control: max-age=86400, immutable
ETag: "abc123"
Last-Modified: Wed, 01 Jan 2025 00:00:00 GMT

Cookieとセッション

サーバーはSet-Cookieヘッダーを使ってCookieを設定します。ブラウザーは、同じドメインへのすべてのリクエストにCookieを自動的に付けて送信します。セッションは通常、セッションIDを保持するCookieであり、サーバーがそのIDをユーザーデータに対応付けます。

CDN — コンテンツ配信ネットワーク

CDNは、アセットのコピーを世界中のデータセンターに保存します。ユーザーは最寄りのノードからダウンロードできるため、遅延が短くなります。Cloudflare、Fastly、AWS CloudFrontは、多くの大規模Webサイトで使われている代表的なCDNです。

理解度チェック

サーバーにWebページをリクエストする際に使われるHTTPメソッドはどれですか？

まとめ: リクエストの全ライフサイクル

URLを入力 → DNSがドメインをIPアドレスに解決 → TCP（+ TLS）接続を確立 → ブラウザーがHTTPリクエストを送信 → サーバーがステータス + ヘッダー + 本文を返す → ブラウザーがレスポンスを描画します。各ステップはDevToolsのNetworkパネルで確認できます。

よくある質問

「ブラウザー、DNS、HTTP: リクエストのライフサイクル」レッスンは無料ですか？

はい。「ブラウザー、DNS、HTTP: リクエストのライフサイクル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「ブラウザー、DNS、HTTP: リクエストのライフサイクル」で何を学びますか？

アドレスバーのURLがDNS解決、TCP接続、HTTPリクエスト、サーバーのレスポンスを経てブラウザーに戻るまでを追います。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「ブラウザー、DNS、HTTP: リクエストのライフサイクル」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る