8週間、小さなブラウザを作ってみました。
(github.com/beginner-jhj)こんにちは！ コンピュータ工学科への入学を控えた高校3年生です。
8週間にわたり、C++とQTを使って小さなブラウザエンジンを基礎から作ってみました。
C++は今回が初めてだったため数多くの試行錯誤がありましたが、レンダリングパイプラインの中核を自分のコードで直接実装しながら多くを学びました。
レンダリングパイプライン全体を5段階に分けて実装しました:
-
HTML文字列を解析してDOMツリーを生成（エラー補正を含む）
-
CSSルールのパースとCascadeによるComputed Styleの計算
-
block/Inlineモデルに基づくボックスの位置とサイズの計算
-
画像のキャッシュと読み込み後のレイアウト再計算（Reflow）の処理
-
Qt Graphics View Frameworkを使った最終的なPainting
初めて学んだC++で書いたコードなので、至らない点も多いかもしれません。
コード構造や改善の方向性についてフィードバックをいただければ、ありがたく学ばせていただきます！
詳しくは https://github.com/beginner-jhj/mini_browser/blob/main/README.ko.md でご確認いただけます。
14件のコメント
まずは応援しています。
Webブラウザを作ろうと思うなんて…。
良い経験をされたので、次は
Chromium のコードをダウンロードして、
ビルドしてみて、
解析してみる経験をしてみるのも良さそうです。
創造は模倣の母ですから。
面白い作業をされましたね。Claude を使わずに直接やっていたら、もっと多くを学べたのではとも思いますが、AI 活用が主流の時代ですし、これも良い経験だったように思います。
ひとつアイデアを挙げるなら、この経験をもとに og tag parser を作ってみるのはどうでしょうか。
og tag は、Web ページに設定された代表サムネイル画像などの簡単な情報ですが、これを取得するのは DOM parser を使えば簡単な作業である一方、DOM parser は重いという問題があります。
そこで、ほかの DOM parser を使わず、DOM 全体をすべて parsing せずに、特定の tag 情報だけを取得する小さくて効率的な parser を実装できれば、有用なライブラリになるはずです。
特にモバイルアプリでは、こうしたライブラリが物足りないと感じるんですよね。JavaScript/Kotlin/Swift を使ってモバイル向けに作れば、人気のあるオープンソースライブラリになれるかもしれません。
大学入学共通テストが終わってから大学入学まで思い切り遊んだ記憶しかないのですが……README を読んでみると、肝心な内容をしっかり理解されているように思います。私もこの本を読んで、swift で実装してみたことがありますね。笑
えっ、もしかしてどんな本でしょうか？ READMEを一度読んでみたのですが、本への言及は見当たらない気がして……！
README にはそのような内容はないんですね。内容が本と似ていたので、私の勘違いでした……すみません;;;
『ゼロからはじめるWebブラウザ』という本です。書籍のサンプルは Python で実装されています。
教えてくださって本当にありがとうございます :D 教保文庫で一度ちらっと見てみないといけませんね..!
高3のとき、Linuxのapmインストールを少しできるってだけで開発コミュで調子に乗ってたけど
うわ、すげえぇぇ
とても楽しく読ませていただきました！
作ろうと努力して実際に挑戦したこと自体が一流だと思います。READMEがまるで一つのレポートのようで、さらに面白かったです。
次は何を作られるのか楽しみにしています（笑）
本当に素晴らしいですね。
簡単に目を通しただけですが、私が高校3年生だった頃にはとても思いもよらなかったことでした。CSをしっかり勉強して、素敵なエンジニアになってください。
ありがとうございます！ 一生懸命努力して、素晴らしいエンジニアに成長します！
とても楽しく拝読しました！ 個人的にお伺いしたいことがあるのですが、もしよろしければご連絡できる手段はありますか？
長い文章を読んでいただき、本当にありがとうございます！ hj5014221@gmail.com までご連絡ください。
リンクが壊れているようですね （涙）
あっ、メインのrepoリンクをお渡しします！ https://github.com/beginner-jhj/mini_browser