🦀Rustでブラウザを作ってみる勉強会を開催しました💻

こんにちは、福岡開発拠点でWebアプリケーションエンジニアをしている大坪と申します。

今回は社内で「Rustでブラウザを一から作ってみる」という勉強会を企画・開催しました。 Rustの学習だけでなく、ブラウザが内部でどのように動いているかを理解することを目的に、少人数の有志メンバーで持ち回りでRustでブラウザを実装していくというややハード形式な勉強会です。 本記事では、勉強会を始めた理由、実際の勉強会の形式・内容、そして良かったところや反省点などをご紹介します。

なぜ勉強会を始めたか

社内ではRustを利用しているプロダクトはまだ非常に少ないのですが、『[作って学ぶ] ブラウザのしくみ』という本が出版された際に社内でも学習してみたいという声が上がりました。 私自身もRust経験はありませんでしたが、以前からブラウザの内部構造について興味があったので、Rustを学ぶ題材としても、ブラウザ構造の学習としても、実装を通じて理解を深めるには最適だと考えました。 そこで「Rustで基本的なブラウザを作りながら、Rustの文法やブラウザ内部の動きを学ぶ」というゴールを掲げて勉強会を実施しました。

勉強会の内容・形式

参加者を募ったところ、一名を除いて全員がRust未経験でした（この経験者の方には非常に様々な知見を共有していただき、とても良い刺激になりました）。

そのため、勉強会では最初の数回はRustの基礎を習得を目的とし、後半からブラウザの内部構造を実装しながらより実践的にRustとブラウザの内部構造を学ぶことにしました。 また、後述するように実装や発表は希望者の持ち回りで行うこととしていたのですが、なんと参加者の方が手を挙げてくれて、全員が実装もしくは発表を行ってくれました。 かつ、全員が締め切りまでに実装や資料の準備などの作業を終えてくれたおかげで、予定していたスケジュール通りに進めることができました。メンバーに意欲的に参加してもらえて本当にありがたかったです！🎉

目的

1. Rustを学習しつつ、ブラウザの内部構造を理解する
2. 実装を通して手を動かしながら仕組みを深く学ぶ
3. 参加者同士で知見を共有し、チームワークを醸成する

進め方

開催頻度・時間・言語

基本は2週に1回、1時間ずつオンラインミーティングで実施しました。

福岡開発拠点ではエンジニア組織の英語化が推し進められていることもあり、今回の勉強会も公用語は英語とすることにしました。

役割分担

前半のRust基礎回は、運営である私が準備・解説を行いつつ実施しました。

後半のブラウザ実装については、事前に各回について本の範囲を定め、以下のような役割分担で内容の解説と実装を持ち回りで行いました。

実装担当: 前回のセッション範囲に対応する実装を個人 or ペアで進め、PRを作成。次回勉強会で解説、レビューを行う。

発表担当: 次の章の内容、特にブラウザの仕様について事前に資料をまとめ、当日の勉強会で共有・プレゼンする。

構成

毎回以下の2パートに分けて進行しました。

1. プログラミングセッション (約30分)

事前に作成されたPRをみんなでコードレビューし、疑問点や改善点をディスカッションしました。 その際に実装の意図や利用したRustの文法などを発表担当者が解説しました。

2. リーディングセッション (約30分)

次回までに読む・実装する範囲を確認し、解説スライドや資料を共有しました。 Rustやブラウザ仕様に関する質問をし合い、質問によっては参加者で一緒にWHATWG（Web Hypertext Application Technology Working Group）で仕様を確認するなど、より深い理解を目指しました。

実際の勉強会での各回の内容

Rust基礎回

先ほど述べたように参加者のほとんどがRust未経験だったため、3回は基礎をじっくり演習する時間として確保しました。

Googleが提供しているRustの学習サイトComprehensive Rust 🦀を中心に、公式ドキュメント（The Rust Book）や100 Exercises To Learn Rustを利用して、Rustの基礎的な文法を理解するための演習を行いました。

なるべく一方的にならないよう、Playgroundでコードを実行しながらCompiler-drivenな実装をやってみたり、Miroを使って所有権の移動を可視化したりなど、参加者が手を動かせるような工夫をしました。

ブラウザ基礎回

普段何気なく利用しているブラウザですが、「ブラウザとは何か？」と聞かれるとぱっと答えられない人も多いのではないでしょうか。 これから実装していくことになるブラウザの基礎構造を理解するために、どのようにブラウザがURLからページを表示するのかをおおまかに学びました。

さらに、ブラウザには重要なセキュリティ機能も備わっています。今回はこうしたセキュリティ機能については実装範囲外だったものの、おさらいとしてその概要を確認しました。

URLパース回

いよいよ満を持して実装に突入します。この回ではRustを使ってブラウザにおけるURLパース処理を学習しました。URLパースとは、入力されたURLをホスト名、ポート番号、パス、クエリなどの要素に分解してブラウザが処理できるようにする機能です。 テストコードを通じて正しくURLがパースできているかを検証し、ブラウザがページを表示する入り口を作成しました。

HTTPリクエスト回

次に、HTTPプロトコルの章に移りました。この章のプレゼンパートではHTTPの基本的な構成と役割、バージョンによる違いや普及率などを発表してもらいました。

具体的な実装では、TcpStreamを使い、GET / HTTP/1.1などのリクエスト文字列を作成し、前回利用したURLパーサから取得したホスト名やポート番号を利用してサーバへ送信します。 続いて、受け取ったレスポンスをパースし、ヘッダとボディを分解する仕組みも実装しました。

実際に example.com へアクセスしてレスポンスが返るところまで確認したところで、動いているという実感が湧いてきました。

HTMLパーサ回

勉強会の最終回では、HTMLのパーサを実装しました。 HTMLはタグや要素、属性などの階層構造で構成されており、ブラウザはHTMLドキュメントを解析してDOMツリーと呼ばれる木構造に変換します。具体的には、Lexer（字句解析器）が「タグ」「テキスト」「コメント」などのHTML文字列を意味のある最小単位であるトークンに分割し、それを基に構造や階層関係を分析します。この処理を状態遷移アルゴリズムとして実装することで、ブラウザがHTMLを正しく解釈して画面上に表示できるようにします。

閉じタグ無しのような不正なHTMLでもブラウザは頑張って解釈しているなど知らなかったことも多く、勉強になりました。コードの中身もWeakやRcなどのRustのコアな機能を使っていて、Rustの理解を深めるのにも良くまさに今までの集大成となる回だったと思います。

その他(今後の予定)

題材とした本では今回実装した範囲の後も、以下のようにブラウザの実装を進めていきます。

• CSS＆レイアウト
• GUI
• JavaScript

しかしながら本勉強会ではRust初心者が多く、これ以上ブラウザの実装を進めると難易度が高くなりすぎるため、またHTMLパースまでで役割分担も一周したため、一旦ここまでを区切りとしました。 ただ、参加者の中にはここから先は自力で実装を進めていきたいというやる気に満ち溢れた方もいました！

良かったところ

1. Rust×ブラウザ構造を同時に学習できた
   • 参加者から「Rustの所有権周りが理解できた」「ブラウザがタグをどう解釈しているのか初めて知った」という声が多かったです。
2. PRベース学習で実装力がついた
   • 誰かが書いたコードをみんなでレビューするため、学び合いの相乗効果が生まれました。
   • レビューの中で質問されることがあるため、自分が書いたコードを説明できるよう、写経するだけでなく深く理解しようとする意識が生まれました。
3. 普段業務で関わりが少ないメンバーとの交流ができた
   • 開発プロダクトが異なると、普段の仕事では交流がほとんどないことも多いですが、今回の勉強会ではそういったメンバーとも交流の場ができました。 また、英語化が進んでいないチームで仕事しているメンバーにとっては、英語でコードや仕様について議論を行う良い機会となりました。

反省点

1. Rust未経験メンバーには難易度が高め
   • 所有権やポインタまわりでつまずきやすく、サポートが少し不足していたように思います。
   • Rustの文法を隔週1時間3回で理解するのは短すぎました、、基本文法＋小さな演習問題を、もう少し時間をかけてやると良かったかもしれません。
2. 時間確保が難しい
   • 仕事の合間に勉強会を入れるため、メンバー全員が参加できる時間帯がなかなかなく、毎回参加できないメンバーが出てしまいました。
   • 実装や資料の準備はかなり時間がかかるため、担当メンバーの負担になってしまいました。

まとめ

Rustとブラウザの仕組みを同時に学べる機会として、「Rustで簡易ブラウザを作る」勉強会を開催しました。複数回に分けてPRレビューや輪読を繰り返す中で、以下のことを深く体感できたのは大きな成果でした。

• Rustの所有権・借用・エラー処理などの言語特性
• HTTPリクエスト・HTMLパースなど、ブラウザの基礎構造

一方で、Rust未経験者や多忙なメンバーにとっては、準備・キャッチアップがややハードル高い面もありました。

持ち回りで実装していくという形式は参加者にも好評だったため、また題材などを変えつつ、より実践的なかつ参加者にとっても楽しい内容を模索していきたいと思います。

最後に、参加者の準備や発表を引き受けてくださった皆さんに心から感謝します。参加者なしでは成立しない勉強会でしたが、皆さんのおかげで無事に終えることができました。

ここまでお読みいただき、ありがとうございました。

---

マネーフォワード 福岡開発拠点ではエンジニアを募集しています！

hrmos.co

福岡開発拠点のサイトもあるのでぜひご覧ください。

fukuoka.moneyforward.com