30. どこに活かすか — 各段で身についたことと、日々の開発への写し方
ブラウザを 1 つ作って手に入るのは、ブラウザを作る力ではなく、「Web の表側で起きていることを、どの段の仕事か分けて読む力」と、「文字列を木に、木を別の木に変える処理を設計する力」です。下の表に、段ごとに何を作ったか、それが日々の開発のどこに出てくるか、次に読むと深まる一次ソースを並べます。
読む力の例を 3 つ。開発者ツールで打ち消し線の引かれた CSS は、F 章ので負けたです。 が null を返すのは、H 章の実行タイミング(script がより前)です。サニタイザをすり抜けた HTML は、E 章の「止まらずに直す」規則がサニタイザの想定とずれたものです。どれも「どの段の仕事か」が分かれば、調べる場所が決まります。
設計する力の例を 3 つ。(D 章)は、プロトコルの受信、複数行ログの解析、入力モードのある UI に。(H 章)は、検索条件式や料金計算式のような小さな言語に。「壊れた入力の最小限だけを捨てて続ける」(F 章)と「失敗を で返す」(B 章)は、取り込み処理と入力検証に。 / / (E 章)は、双方向に辿る木を Rust で持つ場面に。
この実装に無いもので、業務上の理解に一番効くのは(クリックや fetch の完了をどう順番に処理するか)と、本物の script の実行タイミング、そしてレイアウトとの分離による再描画の最適化です。これらは /training の「ブラウザの内部」と「ページの旅」の読み物、/cs の と のクイズ群で扱っています。コードを 1 本書いたあとに読むと、言葉が実感に変わります。
最後に、作ったものは仕様の名前のまま作ってあります。HTML Standard の 13.2.5 と 13.2.6、CSS Syntax Level 3、Selectors Level 4、CSS Cascade Level 4、 の §13 と §14 を、このコードを横に置いて読んでください。仕様の文が、自分の書いた enum の腕と関数に 1 対 1 で対応して見えるはずです。
点線の付いた語はタップすると説明が出ます。用語集を開く →
① 段ごとの「作ったもの → 日々の開発 → 次に読むもの」
右の一次ソースは、このコードを横に置いて読むと、どの文がどの enum の腕かで読めます。
手元で動かす(配布物)
- 完成版のプロジェクト(tinybrowser.zip)
- GitHub: kazumasamatsumoto/rust-tiny-browser ↗段を足す(文字参照・結合子・margin・if/for)ときの出発点