• はじめに
• 本書を読むにあたって
• 目次

第1章：ブラウザを知る──Webサイトを表示するアプリケーション

ブラウザの役割❶──Webクライアントとしてのブラウザ

クライアント／サーバモデル

• Webクライアント
• Webサーバ

インターネットとWeb

• 通信プロトコル
• HTTP
• URLによるリソースの指定
• DNS

ブラウザの役割❷──レンダリングエンジンとしてのブラウザ

Webサイトの構成

HTML

• HTMLトークン
• DOMツリー

CSS

• CSSトークン
• CSSOM
• レイアウトツリー／レンダーツリー

ブラウザの役割❸──JavaScriptエンジンとしてのブラウザ

JavaScript

• JavaScriptトークン
• 抽象構文木（AST）

ブラウザAPI

コアの役割を支えるためのさらなる機能

ストレージとキャッシュ

• ストレージ
• キャッシュ

拡張機能

PWA

UIにまつわる機能

マルチプロセスアーキテクチャ

プロセス

• ブラウザプロセス／レンダラプロセス

スレッド

• UIスレッド／メインスレッド
• ワーカースレッド
  • [Column] iOS上でのブラウザアプリ

ブラウザのセキュリティ対策

サイト分離（Site Isolation）

同一生成元ポリシー（Same Origin Policy）

• オリジン間リソース共有（CORS）

コンテンツセキュリティポリシー（CSP）

本書のゴール・注意点

第2章：URLを分解する──リソースを指定する住所

URLとは

スキーム（scheme）

ホスト（host）

ポート番号（port）

パス（path）

クエリパラメータ（searchpart）

URLの構文解析の実装

ライブラリクレートの作成

実装するファイルの追加

Url構造体の作成

parseメソッドの作成

URLの分割の実装

• スキームの確認
• ホストの取得
• ポート番号の取得
• パス名の取得
• クエリパラメータの取得

parseメソッドの完成

ゲッタメソッドの追加

• • [Column] clone()はなぜ必要？

ユニットテストによる動作確認

成功ケース

失敗ケース

テストの実行

第3章：HTTPを実装する──ネットワーク通信を支える約束事

HTTPとは

HTTPのバージョンの違い

• HTTP/1.1の特徴
• HTTP/2の特徴
• HTTP/3の特徴

HTTPの構成

• リクエストラインとは
• ステータスラインとは
• ヘッダとは
• ボディとは

HTTPクライアントの実装

サブプロジェクトの作成

• サブプロジェクトのCargo.tomlの変更
• ルートディレクトリのCargo.tomlの変更
• Features
• バイナリターゲットの設定

リクエストの構築

• HttpClientの作成
• ホスト名からIPアドレスへの変換
• ソケットアドレスの定義
• ストリームの構築
• リクエストラインの構築
• ヘッダの構築

リクエストの送信

レスポンスの受信

HTTPレスポンスの構築

• HttpResponse構造体の作成
• Header構造体の作成
• エラー構造体の作成
• 文字列の前処理
• ステータスラインの分割
• ヘッダとボディの分割
• HttpResponse構造体を返す
• ゲッタメソッドを追加する

ユニットテストによる動作確認

成功ケース

失敗ケース

テストの実行

WasabiOS上で動かす

http://example.comへのアクセス

• メイン関数の実装
• 実行

テストサーバとのやりとり

• テストページの作成
• ローカルサーバの実行
• localhost
• メイン関数の変更
• 実行

第4章：HTMLを解析する──HTMLからDOMツリーへの変換

HTMLとは

HTMLの構成要素

• タグ
• コンテンツ
• 要素
• 属性

DOMとは

• DOMツリーを構成するノード

HTMLの字句解析──トークン列の生成

字句解析とは

トークン化アルゴリズム

実装するディレクトリとファイルの作成

HtmlTokenizer構造体の作成

HtmlToken列挙型の作成

Attribute構造体の実装

ステートマシンの実装

• Iteratorの実装
• Data状態の実装
• TagOpen状態の実装
• 文字の再利用
• EndTagOpen状態の実装
• TagName状態の実装
• BeforeAttributeName状態の実装
• AttributeName状態の実装
• AfterAttributeName状態の実装
• BeforeAttributeValue状態の実装
• AttributeValueDoubleQuoted状態の実装
• AttributeValueSingleQuoted状態の実装
• AttributeValueUnquoted状態の実装
• AfterAttributeValueQuoted状態の実装
• SelfClosingStartTag状態の実装
• ScriptData状態の実装
• ScriptDataLessThanSign状態の実装
• ScriptDataEndTagOpen状態の実装
• ScriptDataEndTagName状態の実装
• 一時的なバッファの管理

ユニットテストによる字句解析の動作確認

空文字のテスト

開始タグと終了タグのテスト

属性のテスト

空要素タグのテスト

スクリプトタグのテスト

HTMLの構文解析──ツリーの構築

実装するディレクトリ，ファイルの作成

ノードの構造

• 循環参照問題
• ノードのゲッタ・セッタメソッドの実装

ノードの種類

Window構造体の作成

Element構造体の定義

Parser構造体の作成

ツリー構築アルゴリズム

• Initial状態の実装
• BeforeHtml状態の実装
• BeforeHead状態の実装
• InHead状態の実装
• AfterHead状態の実装
• InBody状態の実装
• Text状態の実装
• AfterBody状態の実装
• AfterAfterBody状態の実装
  • [Column] 間違ったHTMLをできる限り描画するブラウザ

要素ノードの追加

開いている要素のスタックの管理

テキストノードの追加

段落タグ（<p>）の追加

• ElementKind列挙型に段落の追加
• InBody状態の変更

見出しタグ（<h1>，<h2>）の追加

• ElementKind列挙型に段落の追加
• InBody状態の変更

リンクタグ（<a>）の追加

• ElementKind列挙型に段落の追加
• InBody状態の変更

テキストの追加

• InBody状態の変更

ユニットテストによる構文解析の動作確認

PartialEqとEqトレイト

Node構造体にPartialEqトレイトの実装

空文字のテスト

bodyノードのテスト

テキストノードのテスト

複数ノードのテスト

WasabiOS上で動かす

メイン関数の変更

Browser構造体の作成

Page構造体の作成

HttpResponseからDOMツリーを作成

デバッグ用にDOMツリーを文字列に変換

実行

第5章：CSSで装飾する──CSSOMとレイアウトツリーの構築

CSSとは

CSSの構成要素

• セレクタ
• プロパティ
• 値
• 宣言ブロック
• ルール

CSSOM

レイアウトツリー

• フロー
• ボックスモデル

描画

CSSの字句解析──トークン列の生成

実装するディレクトリ・ファイルの作成

• • [Column] HTMLを策定するWHATWGとCSSを策定するW3C

CssToken列挙型の作成

CssTokenizer構造体の作成

次のトークンを返すメソッドの実装

• 記号トークンを返す
• 文字列トークンを返す
• 数字トークンを返す
• 識別子トークンを返す

ユニットテストによる字句解析の動作確認

空文字のテスト

1つのルールのテスト

IDセレクタを持つルールのテスト

クラスセレクタを持つルールのテスト

複数のルールのテスト

CSSの構文解析──CSSOMの構築

実装するディレクトリ・ファイルの作成

CssParser構造体の作成

CSSOMのノードの作成

• ルートノード（StyleSheet）の作成
• ルールノード（QualifiedRule）の作成
• セレクタノード（Selector）の作成
• 宣言ノード（Declaration）の作成
• コンポーネント値ノード（Component value）の作成

CSSOMの構築

• 複数のルールの解釈
• 一つのルールの解釈
• セレクタの解釈
• 複数の宣言の解釈
• 1つの宣言の解釈
• 識別子の解釈
• コンポーネント値の解釈

ユニットテストによる構文解析の動作確認

空文字のテスト

1つのルールのテスト

IDセレクタのテスト

クラスセレクタのテスト

複数のルールのテスト

レイアウトツリーの構築

実装するディレクトリ・ファイルの作成

LayoutView構造体の作成

DOMツリーの特定の要素を取得する関数の作成

LayoutObject構造体の作成

• ゲッタ／セッタメソッドの追加
• ブロック要素とインライン要素
• LayoutPoint構造体の作成
• LayoutSize構造体の作成

ComputedStyleの作成

• ゲッタ／セッタメソッドの追加
• Color構造体の作成
• FontSize列挙型の作成
• DisplayType列挙型の作成
• TextDecoration列挙型の作成

レイアウトツリーの作成

レイアウトオブジェクトのインスタンス化

• ノードが選択されているかを判断するメソッド
• CSSルールの適用（Cascading）
• 指定値の決定（Defaulting）
• ブロック／インライン要素の最終決定

ノードの位置／サイズ情報の更新

• 定数の設定ファイル
• サイズの計算
• 位置の計算

ユニットテストによるレイアウトの動作確認

LayoutObject構造体にPartialEqトレイトの実装

テスト用の便利関数の作成

空文字のテスト

<body>タグのみのテスト

テキスト要素のテスト

bodyがdisplay:noneのテスト

複数の要素がhidden:noneのテスト

GUI描画のための準備

DisplayItem列挙型の作成

LayoutObjectノードの描画

• テキストを折り返す

DisplayItemの管理

• Page構造体にフィールドを追加する
• receive_responseメソッドを更新する
• create_frameメソッドを更新する
• set_layout_viewメソッドを追加する
• paint_treeメソッドを追加する
• DisplayItemのベクタのゲッタメソッドを追加する

第6章：GUIを実装する──ユーザーとのやりとり

GUIとは

GUIアプリケーションのウィンドウの作成

サブプロジェクトの作成

• サブプロジェクトのCargo.tomlの変更
• 実装するファイルの作成

背景となる白い四角を描画する

ツールバーを描画する

• 定数を追加する
• noliライブラリの描画API
• ツールバーを描画する

UIを開始するメソッドを追加する

アプリケーションの開始時にウィンドウを描画する

• Cargo.tomlを変更する
• main.rsを変更する

ユーザーの入力を取得

マウスの位置を取得する

マウスのクリックを取得する

文字を入力する

ツールバーをクリックして入力を開始する

• InputMode列挙型を作成する
• URLの文字を保存する
• URLの情報をツールバーに反映する
• ツールバーをクリックしてInputModeを変更する

マウスを描画する

• Cursor構造体を追加する
• WasabiUIにマウスカーソルを追加する
• マウスカーソルを描画する

アドレスバーからナビゲーション

Enterキーによってナビゲーションを開始する

コンテンツエリアをリセットする

ネットワークの実装をUIコンポーネントに渡す

• 関数ポインタ
• クロージャ
• handle_urlの実装
• handle_url関数ポインタを渡す

ページの内容の描画

テキストを描画する

• 文字を出力するAPIを使用する
• 描画するための関数を実装する
• 文字の大きさの型変換を行う
• update_uiメソッドを更新する

テキストリンクを描画する

• 文字を出力するAPIで下線を引く
• update_uiメソッドを更新する

四角を描画する

WasabiOSの上で動かす

リンククリックでナビゲーション

handle_mouse_inputメソッドを更新する

clicked関数を追加する

• DOMツリーのノードの指定した属性の値を取得する
• find_node_by_positionメソッドを追加する
• find_node_by_position_internal関数を追加する

WasabiOSの上で動かす

第7章：JavaScriptを動かす──ページの動的な変更

JavaScriptとは

インタプリタ，JIT，コンパイラ言語

動的なページと静的なページ

• サーバサイドレンダリングとクライアントサイドレンダリング

ブラウザAPI

ECMAScript

JavaScriptの加算／減算の実装

実装するディレクトリの作成

トークン列挙型の作成

JsLexer構造体の作成

次のトークンを返す関数の実装

• 記号トークンを返す
• 数字トークンを返す

ユニットテストによるレキサーの動作確認

• 空文字のテスト
• 1つの数字トークンのみのテスト
• 足し算のテスト

加算・減算の文法規則

• ECMAScriptで定義されている文法規則
• 実装する文法規則

抽象構文木（AST）の構築

• 式と文
• ノードの作成
• JsParser構造体の作成
• Program構造体の作成
• ASTを構築するメソッドの作成
• SourceElementの解釈
• Statementの解釈
• AssignmentExpressionの解釈
• AdditiveExpressionの解釈
• LeftHandSideExpressionの解釈
• MemberExpressionの解釈
• PrimaryExpressionの解釈

ユニットテストによるパーサの動作確認

• 空文字のテスト
• 1つの数値だけのテスト
• 足し算のテスト

ランタイムの実装

• JsRuntime構造体の作成
• ASTの実行
• 各ノードを評価するevalメソッドの実装
• RuntimeValue列挙型の作成
• RuntimeValueどうしの加算・減算

ユニットテストによるランタイムの動作確認

• 数値のみのテスト
• 足し算のテスト
• 引き算のテスト

JavaScriptの変数の実装

変数，キーワード，文字列トークンの追加

nextメソッドの変更

• キーワードトークンを返す
• 変数トークンを返す
• 文字列トークンを返す

レキサーのユニットテストの追加

• 変数の定義のテスト
• 変数の呼び出しのテスト

実装するBNFの確認

• ECMAScriptでの定義
• 実装する文法規則

ASTの変更

• ノードの追加
• Statementの解釈の変更
• VariableDeclarationの解釈
• Identifierの解釈
• Initialiserの解釈
• AssignmentExpressionの解釈の変更
• PrimaryExpressionの解釈の変更

パーサのユニットテストの追加

• 変数定義のテスト
• 変数呼び出しのテスト

ランタイムの変更

• 変数を扱うEnvironment構造体の追加
• 変数の取得
• 変数の追加と更新
• evalメソッドの変更
• RuntimeValueに文字列の追加

ランタイムのユニットテストの追加

• 変数定義のテスト
• 変数呼び出しのテスト
• 変数変更のテスト

JavaScriptの関数呼び出しの実装

レキサーの変更

レキサーのテストの変更

実装するBNFの確認

• ECMAScriptでの定義
• 実装する文法規則

ノードの追加

パーサの変更

• SourceElementの解釈の変更
• FunctionDeclarationの解釈
• FormalParameterListの解釈
• FunctionBodyの解釈
• Statementの解釈の変更
• LeftHandSideExpressionの解釈の変更
• Argumentsの解釈
• MemberExpressionの解釈の変更

ASTのユニットテストの追加

• 関数定義のテスト
• 引数付き関数定義のテスト
• 関数呼び出しのテスト

ランタイムの変更

• evalメソッドの変更
• Function構造体の追加

ランタイムのユニットテストの追加

• 関数定義／呼び出しのテスト
• 引数付き関数定義／呼び出しのテスト
• ローカル変数のテスト

ブラウザAPIの追加

getElementByIdメソッドのサポート

• MemberExpressionの解釈の変更
• ブラウザAPIを呼び出すメソッドの追加
• 特定のIDの要素を取得する便利関数
• RuntimeValueにHtmlElementを追加する
• ランタイムにDOMツリーを渡す
• ブラウザAPIを呼び出す

textContentによるDOMノードの操作

• MemberExpressionの解釈の変更
• AssignmentExpressionの解釈の変更

WasabiOS上で動かす

HTTPレスポンスを受け取ったときにJavaScriptを実行する

• <script>タグのコンテンツを取得する便利関数

テストページの追加

ローカルサーバの構築

おわりに

• 索引