← Rust で小さなブラウザを作る コース
1. 何を作るか — ブラウザは「変換の列」でできている
このコースで作るのは、 を受け取って文字の画面に Web ページを描き、JavaScript でその中身を書き換えられる小さなブラウザです。Rust のだけで、テストとコメントを含めて約 4,600 行です。
ブラウザの仕事は一本の長い変換の列として読めます。文字列の URL をとに分け、 でサーバーにつないで HTML の文字列をもらい、HTML をに切り、トークンから ツリーを組み立て、CSS をトークンに切って (ルールの木)にし、ごとに「どの値が勝つか」を決め、の位置と大きさを決め、描く命令の列にして画面に出す。JavaScript はこの DOM を読み書きし、変わったらレイアウトからやり直します。
どの段も入力と出力がはっきりしているので、段ごとに作って、段ごとにテストできます。このコースは段の順に 1 つずつ作り、最後に全部をつなぎます。各レッスンには、そのレッスンまでの部品を 1 ファイルにまとめたソースを付けてあるので、ブラウザ上でそのまま実行するか、手元で 1 本でコンパイルして動かせます。
開発のどこに活かすか: 普段の仕事で触るのはこの列の入口(HTML / CSS / JS を書く)と出口(画面を見る)だけです。間の段を自分で作ると、「なぜこの HTML はこう直されるのか」「なぜこの CSS が効かないのか」「なぜ DOM を触ると遅いのか」が、どの段の仕事かで切り分けられるようになります。
点線の付いた語はタップすると説明が出ます。用語集を開く →
① 入口から出口まで、9 つの変換
URL の文字列http://host:port/path?query
B 章: 部品に分ける
Urlscheme / host / port / path / query
C 章: TCP でつないで GET
HttpResponsestatus / headers / body(HTML の文字列)
D 章: 状態機械で切る
HtmlToken の列StartTag / EndTag / Char / Eof
E 章: 挿入モードで組む
DOM ツリーDocument → html → head / body → …
F 章: <style> の中身を切って組む
CSSOMルール = セレクタ + 宣言
F 章: 要素ごとに勝つ値を決める
ComputedStyledisplay / color / font-size …
G 章: 箱にして並べる
LayoutBox の木x / y / width / height
G 章: 描く命令にする
DisplayItem の列 → 画面Rect / Text
- ・H 章の JavaScript は DOM を読み書きする。書き換えたら G 章をやり直す(再レイアウト)
- ・本物のブラウザも段の名前はほぼ同じ。違うのは各段の中身の厚さ
矢印 1 本が 1 つの関数です。入力の型と出力の型が決まっているので、段ごとに切り離してテストできます。
手元で動かす(配布物)
- 完成版のプロジェクト(tinybrowser.zip)cargo test で 78 本のテストが通る状態
- GitHub: kazumasamatsumoto/rust-tiny-browser ↗同じものを git clone でも取れる(履歴つき)