なぜWebブラウザを自作するか

　とりわけ低レイヤーで生きている人たちは、学習の一環や趣味として、様々なものを自作しているものと思います。すぐに思いつくものとしては、次が挙げられます。

　・OS

　・プログラミング言語

　・CPU

　こういったものの自作は、傍から見れば"車輪の再開発"といわれることはありつつも、格別なDIYの楽しさが得られます。また、自分の中で『これはこういうもの』としてブラックボックスのまま片付けがちなものを、実際に作ってみることで、その技術に対する解像度が高くなるという実用的なメリットもあります。普段よく使っている『これはこういうもの』の中には、Webブラウザも含まれるとは思いませんか？Webブラウザはアプリケーションゆえに低レイヤーとはいえないでしょうが、先に上げた例にも負けず劣らず、興味深い自作対象なのではないかと思います。

　Webブラウザを自作するのに必要な技術は、ネットワークだけではありません。HTMLはプログラミング言語の一種ですから、これを解釈するために字句解析・構文解析が必要です。また、解釈したものを人間に見せ、インタラクションを図るためのGUIも必要です(世の中にはCUIのWebブラウザもありますが)。プラットフォーム依存のAPIや知識も使いどきがあるかもしれません。

　このように、Webブラウザ自作はさまざまなレイヤーの知識を学習・活用する機会になるといえます。自作OSも同様ではありますが、もう少し易しめで身近なので、チャレンジしやすい題材ではないでしょうか？

　そういった理由で、勉強にもなり簡単でアピールしやすい、とちょっと俗っぽいモチベーションではありますが、Webブラウザを自作してみました。

　なるべく読者の方の手元でも再現できるよう、本書を執筆しているつもりなので、読者の皆様の参考になれば幸いです。

本書の範囲

　自作といっても、どの粒度まで手を付けるかが悩ましいところでした。たとえば通信について、プロトコルスタック一式フルスクラッチで自作するのも、やってやれないことはないのでしょうが、さすがに労力が尋常ではありません。それだけで一冊書けてしまいます。したがって、ここは既存のライブラリーにお任せできるところはお願いすることにしました。一方で、HTML解析部分はフルスクラッチで作成しています。flex/bisonなどの字句・構文解析ツールを使用してしまうと、それはそれでブラックボックスになってしまうことを懸念しました。UIについては、フレームバッファを直接叩くことにしました。QtやX11は便利ですが、やや高級すぎるため、これも実際のところ画面に表示する処理をどう実現しているか？という部分が見えなくなってしまうので、"脳筋で"フレームバッファに無理やり書き込んでいくことにしました。

　次に、この本で範囲外とする事項について詳述します。今回自作するブラウザは動作を考えて実際に作ることがメインであり、セキュリティーに関しては深く考慮していません。作成したブラウザでサポートしていない機能の使用、外部のWebサイトにアクセスする等、なにか不具合が起こったとしても、著者は責任を負いかねるため、ご注意ください。また、本書はあくまでも「自作してみました」という開発日記的なスタンスのため、Webブラウザ自作のベストプラクティスというわけでもないことにご注意ください。より洗練された情報源としては、ここ¹などが参考になると思います。

開発環境

　開発環境はUbuntu 20.04とします。とはいえ、あまりに古くなければ、たいていのLinux環境であれば動作すると思います。筆者はVirtualBoxによりVMを構築しました。そのほか詳細は表1に示します。ライブラリーの具体的なインストール方法は、のちの章で記述があります。

構成を考える

　それでは早速、Webブラウザの全体構成を考えてみましょう。ざっくりとした絵を図1に示します。「本書の範囲」の説でも触れましたが、HTMLを取得する部分はLinux(というよりUNIX？)の力を借りてソケットプログラミングしていくことにします。取得したHTMLは、フルスクラッチで作成した解析器に入力してタグを抽出し、DOMツリーを構成します。ツリーを作成し終えたら、UIとしてフレームバッファに書き込む内容を組み立てていきます。

開発の順番を考える

　大まかな機能ごとに分けて考えたので、どれから作っても動くはずですが、見た目の面白さからGUIを先に作りました。次に、難易度の低いであろうソケット通信部を作成してから、HTML解析器をフルスクラッチで書きました。最後に全部を合体して、晴れてWebブラウザの完成、というわけです。最低限の機能を実装し終えたら、改めて拡張開発をすることにいたしましょう。本書でもこの順番でご紹介したいと思います。それでは早速見ていきましょう！

　なお、本書で作成したソースコードはGitHubで公開²しています。

表記関係について

　本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。