［作って学ぶ］ブラウザのしくみ ──HTTP、HTML、CSS、JavaScriptの裏側 のメモ

［作って学ぶ］ブラウザのしくみ ──HTTP、HTML、CSS、JavaScriptの裏側 のメモ

目次

• 第1章：ブラウザを知る──Webサイトを表示するアプリケーション
• 第2章：URLを分解する──リソースを指定する住所
• 第3章：HTTPを実装する──ネットワーク通信を支える約束事
• 第4章：HTMLを解析する──HTMLからDOMツリーへの変換
• 第5章：CSSで装飾する──CSSOMとレイアウトツリーの構築
• 第6章：GUIを実装する──ユーザーとのやりとり
• 第7章：JavaScriptを動かす──ページの動的な変更

実行環境

$cat /etc/os-release
PRETTY_NAME="Parrot Security 6.2 (lorikeet)"
NAME="Parrot Security"
VERSION_ID="6.2"
VERSION="6.2 (lorikeet)"
VERSION_CODENAME=lory
ID=debian
HOME_URL="https://www.parrotsec.org/"
SUPPORT_URL="https://www.parrotsec.org/community/"
BUG_REPORT_URL="https://gitlab.com/parrotsec/"

エディタ

• RustRover

第1章：ブラウザを知る──Webサイトを表示するアプリケーション

• 結構慣れ親しんだ内容だった
  • 細かい部分までは知らないが、それぞれの概念と役割くらいは知っている状態
• これから作るものの前提知識みたいなところで、実装もまだ始まっていない

第2章：URLを分解する──リソースを指定する住所

• parser の実装
• Rust は Hello World レベルなので、シンタックスなどは全くわかっていない
  • 所有権の話は知っている
    • 理解はしてない
• とりあえず書いてあるとおりに写経した
  • やっていることはわかる
  • 中身自体は全然DRYではないので、追加で共通関数書きたくなる
• 処理自体は難しい部分は一切なかった
• 実装PR
  • https://github.com/nabeen/saba/pull/1

第3章：HTTPを実装する──ネットワーク通信を支える約束事

• HTTP Client の実装
• 写経量としてはそこそこあった
  • Copilot が結構補完してくれるので、写経といいつつも結構楽している
• noli で実装されているものの詳細がよくわかってないが、RFC に定義されている形を愚直に書いている印象
  • match 式めっちゃ使う
    • 好き
• HTTP/1.1 以降の話も載っていたが、今回実装するわけではないようだ
  • この実装もどこかで公開してくれるとありがたいのだけど
  • 言葉での差分よりも実装を知りたい派
• 実装の概略は理解できるが、Rust のメソッドが全くわからないので、解像度が低い部分が多々ある
  • とりあえず一周し終わったらこういう部分もちゃんと調べていこう
• 実装PR
  • https://github.com/nabeen/saba/pull/2

第4章：HTMLを解析する──HTMLからDOMツリーへの変換: 1日目

結構分量多い章に入ってきたので、日を分けて写経

• tokenizer の実装
• 前回の HTTP Client と同じく仕様に沿って、愚直に実装していく
  • この本では仕様を全部網羅するわけではない
  • 写経後に拡張していくなら、まずはここに手を入れていくのが良さそうな印象
• 普通に写経をミスってテストを通せず、ちょいとカンニングしてしまった
  • 本当はデバッグすべきなんだろうけど、気力が持たず
• 前回からちょっと感じていたけど、「すでに出来上がったものを上から順に説明している本」という印象
  • 良い悪いではなく、思考の軌跡が辿りづらいと言うか。うまく言語化はできない
    • 特に知見のない言語、知見のない分野のコードだからというのはあると思う
  • 前に読んだ（読んでない）「なっとく！関数型プログラミング」はこういう思考でこうやっていこう、みたいなものが辿りやすかった
    • なっとく！関数型プログラミング
• 実装PR
  • （WIP）https://github.com/nabeen/saba/pull/3

第4章：HTMLを解析する──HTMLからDOMツリーへの変換: 2日目

• renderer の実装など
• 写経がだんだんヘビーになってくる
  • 相変わらず愚直に実装していくので、理解することを重視して写経はそこそこ、に抑えた方が効率良さそうな気がしてきた
  • まだ雰囲気しか理解していない
    • 2周目で頑張る
• とりあえずDOMツリーが構築できて、なんかうれしい
• 実装PR
  • https://github.com/nabeen/saba/pull/3

第5章：CSSで装飾する──CSSOMとレイアウトツリーの構築: 1日目

• DOM の CSSOM 版
• こちらもヘビーだが相変わらず愚直にやっていくだけではある
• まだ token までしか進んでいないが、量的には DOM と同じくらい？考え方的なところはだいぶ似通っているので、特に詰まるところはなさそう
• 実装PR
  • （WIP）https://github.com/nabeen/saba/pull/4