Show HN: ブラウザの仕組みを学ぶためのインタラクティブガイド

概要

本ガイドは エンジニアや好奇心旺盛なWeb利用者 向けの、 ブラウザの仕組み を直感的に理解できるインタラクティブな解説。 複雑すぎず、浅すぎない バランスの良い内容 を目指し、重要な詳細はあえて省略。 様々な インタラクティブ例 を通じて、技術的な流れや直感的な理解をサポート。 オープンソース として公開され、誰でも改善提案が可能。 主な流れは「URLからHTTPリクエスト」「DNS解決」「TCP接続」「HTMLパース」「レンダリングパイプライン」。

ブラウザの仕組み インタラクティブガイド

• 対象者 ：エンジニアやWebを日常的に使うが、ブラウザ内部の動作を体系的に理解していない人
• 特徴 ：従来の技術解説よりも直感的・実践的なアプローチ
• 省略事項 ：HTTPバージョン、SSL/TLS、DNSの細かな挙動などは割愛
• 参加方法 ：インタラクティブな例を操作しながら学習可能
• オープンソース ：GitHubで改善提案やプルリクエストが可能

ブラウザとURL

• アドレスバー には何でも入力可能だが、内部では URL として扱う
• 例：「pizza」と入力→検索URL（例: https://google.com/search?q=pizza）へ変換
• 「example.com」などのドメイン名→完全なURL（例: https://example.com）へ正規化
• 実際にアドレスバーに入力し、変換を体験できるインタラクション

URLからHTTPリクエストへの変換

• ブラウザは HTTPプロトコル を使い、サーバーへリクエストを送信
• URLをHTTPリクエスト形式に変換する過程を体験可能
• 例：Hostヘッダ（Host: example.com）、Acceptヘッダ（Accept: text/html）など
• Hostヘッダはリクエスト先のサーバー識別に利用

サーバーアドレスの解決（DNS）

• ブラウザはドメイン名（例: example.com）をそのまま扱えない
• DNSシステム を使い、ドメイン名を IPアドレス に変換
• 入力したドメイン名をIPアドレスに解決するインタラクション

TCPコネクションの確立

• IPアドレス取得後、 TCPプロトコル でサーバーと信頼性の高い通信路を確立
• 三者間ハンドシェイク （SYN、SYN-ACK、ACK）の流れ
  • SYN: クライアントから接続要求
  • SYN-ACK: サーバーが応答
  • ACK: クライアントが確認し接続完了
• パケットの流れや通信の信頼性維持の仕組みを可視化
• ネットワークの遅延や切断をシミュレート可能

HTTPリクエストとレスポンス

• TCP接続確立後、 HTTPリクエスト をサーバーへ送信
• サーバーからの HTTPレスポンス を受信
• パケットの往復を可視化し、レスポンス到着後にHTMLがブラウザで処理される流れを体験

HTMLパースとDOMツリーの構築

• レスポンス到着後、HTMLの ヘッダ と ボディ を分離
• HTMLタグをトークン化し、 DOMツリー を生成
• 例：

  タグがノードとしてDOMツリーに追加

• パースはストリーミング&エラー耐性あり
  • 文書全体が揃う前にノード作成
  • タグ抜けも自動補完