ブラウザ作りのすゝめ @Shinyaigeek/Shinobu Hayashi

Who am I ● Shinobu Hayashi ● GitHub & Twitter: @Shinyaigeek ● vs 卒論 🔥 ● 4月から某メディア企業でWebをやります👶 ● 💕 : 🎯 🍻 🍣 🕸

イベント参加前夜... という無茶振りがきた ...

自作ブラウザ Shinyaic についての 話をします

Agenda 🗒 1. ブラウザの仕組み(簡略な) 🤓 2. 実装方法 🤖 3. 参考リンク集 (後で資料もツイートします) 📕 4. Shinyaic Browserの実装状況 ⏩ 5. ブラウザを作る楽しさ 🔥

ブラウザの仕組み(概略図)(実際にはもう少し細かい)

実装方法 (HTML Parser) ● HTML ファイルから DOM を構築する ● 丁寧に行うのであれば ○ 1文字 (Character) ずつ解析して Token に落とし込む(開始タグ, 閉じタグ, self closing tag, text, attribute key, etc…) ○ それをもとにDOMを構築していく ● Shinyaicでは簡単に ○ < から始まったら開始タグとして処理 ■ まずattributesをタグが閉じられるまで処理する ■ そのタグの子を再帰的に parseしていく ● といった実装になっています

実装方法 (CSSOM) ● まず #id1 や p , .class1 といった selector をparseする ○ pseudu elementsやcombinatorにも配慮が必要 ● selectorのparseが終わり { にぶつかるとそのブロックの parseにはいる ● ブロック内のparseでは, key: value; とし処理していく ● @以下のメディアクエリも処理する

実装方法 (RenderTreeの構築) ● DOM と CSSOM によって RenderTree を構築する ● RenderTree はその名の通り, 矩形情報を算出する処理や , 描画する処理に必要な情報が入る Nodeで構 成されるTree <-> Document OM Tree ● display: none; が付与されている要素や,

実装方法 (RenderTreeの構築) ● どのDOM Nodeにどのstyleが割り当てられるか というアルゴリズムは思っていた以上に大変だっ た ● 最初シンプルに作るなら, 結合子のことは考えずに シンプルなセレクターにのみ対応するのがいいか も

実装方法(Layout) ● RenderTreeを元に, そのNodeの種類やstyleによって矩形情報を計算する ○ 例えばinline, blockかで幅や並びの計算は変わってくる ○ Blockだとまずwidth, 次に位置，次に再帰的に子要素を計算し子要素から高さを割り出す ● テキストがこのフォントで描画された時高さがどうなるかなどの計算も必要 ● paddingやwidthなど割り当てられたstyleがあればそれを元に計算する

実装方法(paint) ● ここでlayoutした情報をもとに実際に描画する ● iced という描画エンジンを利用 ● styleから色味やフォントを描画エンジン向けの表現にする

参考にしたリンク集 ● How Browsers Work: Behind the scenes of modern web browsers : ブラウザの仕組みが細かく解説 されている ● lmt-swallow/puppy-browser :セキュキャンの資料に作られたブラウザ . 知る限り最もシンプルで読みや すい. ● ブラウザレンダリングの仕組み ：日本語資料でわかりやすい ● W3C/WHATWG: 実際に実装する際にはここを読んでいく ○ MDNをリンク集として、まず MDNで調べる箇所を調べてジャンプするとわかりやすい ○ TC39って何？W3Cって何？ってなる人は　 Web技術の調査方法 　を読むといいかも

Shinyaic の進捗 ● example.com を表示できるようになった ● HTTP通信には, 自作HTTP Clientの konnnyakuを利用している ○ TCPの上から実装した ○ TLSについてはnative-tlsを利用 ● JSはほぼ進捗がない ○ とりあえずJS -> bytecodeにして, bytecodeを実行する部分を学生の うちに作ってしまいたい ○ なのでWeb APIもまだ ● HTML, CSSについても足りない部分はま だ多い

ブラウザを作る楽しさ ● 仕様を読んでいくモチベーションにつながる ● Webフロントエンドをやるだけではなかなか身につかない知識もついていく ○ 通信プロトコル ○ 描画エンジン ● 仕様の量は膨大なため, そう簡単には終わらない, なので盆栽の気分で一生楽しめる趣味 ● 使うだけではなく実際に作ることでブラウザの内部についてより身近に詳しく知れる ● 既存のブラウザは凄い😇 ● みんなもブラウザ, 作ろうや....

❌ 早く雑に作る ⭕ 早く小さく作る ● このような完全に趣味に振り切ったような個人開発であっても , 成果は大事 ○ モチベーションに繋がる 🔥 ○ 正直苦行かと聞かれると苦行なのでモチベーションがないとなかなか続かない ● 早く成果を出すために, テストを書くことをサボる, するべき抽象化をしない, 設計をちゃんと考えないといっ た, 雑に作ることをしていてはいつか破綻する ○ ブラウザ作りは時間がかかるので , 早く成果を出すことと長く続けることを意識する ● 早く作るために雑に作るのではなく , 早く作るために小さく作る ○ まずHTMLをparseするところからしよう , まずは

hoge

をparseできるように, 次に attributeあってもparseできるように.... ○ RenderTreeの構築をしたいけど , CSSとNodeのマッチングは難しそうなので一回単純なセレクターのみに対して マッチングできるようにしよう ...

当たり前のことを当たり前にする(仕 様に従えば)当たり前に動く

ご静聴有難うございました