はじめに

某Sier企業にて運用監視職に従事する翔と申します。
業務中にブラウザで顧客のURLを手動確認する機会などがあり、ブラウザのしくみを知りたいと思っていたところ、「[作って学ぶ]ブラウザのしくみ」なる技術書を書店で見つけ購入。

今回はその「[作って学ぶ]ブラウザのしくみ」のハンズオンに必要な環境構築を行ってみた感想を記事にまとめました。
これから本書を手に取る方は参考にして頂けると嬉しいです。

動作環境

今回私が本書のハンズオンを行った動作環境は以下です。

項目名	種類
コンピュータ名	Macbook Air
プロセッサ	1.1 GHz クアッドコアIntel Core i5
グラフィックス	Intel Iris Plus Graphics 1536 MB
メモリ	8 GB 3733 MHz LPDDR4X
OS	macOS Sequoia バージョン15.5

環境構築を行ってみて

本書冒頭「環境構築」（iv〜x）は以下の流れになっています。

Rustのインストール
rust-toolchain.tomlをトップディレクトリに追加
QEMUのインストール
Gitのインストール
run_on_wasabi.shをトップディレクトリに追加
プロジェクトの作成

僕は「rust-toolchain.tomlをトップディレクトリに追加」でまず躓きました。
トップディレクトリとは何ぞ？と。
で、chatgptに聞いてみたら以下のような答えが返ってきました。

Rust プロジェクトの「トップディレクトリ」＝ Cargo.toml がある場所
そこに rust-toolchain.toml を置けば、自動的にその設定が適用される

なるほどね、よく分かんないけどCargo.tomlなるファイルがある場所と同階層にrust-toolchain.tomlを置けばいいのね。
そこで以下コマンドを実行し（これもchatgptで調べた）、Cargo.tomlを探してみます。

cargo locate-project

もちろんありません。当然の話ですね。
後で調べて分かったことですが、Cargo.tomlはプロジェクトの作成時に生成されるファイルなので、何もしてない段階でそんなファイルがあるはずもない。

じゃあ僕のmac内のトップディレクトリって結局どこよ？
考えてもよく分からないので「rust-toolchain.tomlをトップディレクトリに追加」は一旦飛ばし、QEMU・Gitのインストールを行います。
run_on_wasabi.shなるファイルもトップディレクトリに置く必要があるらしいですが、トップディレクトリの場所が分からないままなのでこれも飛ばします。

そして「プロジェクトの生成」項目まで進んで初めて気付きます。
なるほどね、ここでCargo.tomlが生成されるのか！と。
そう理解できた後はすいすい進んだ……こともなく、次はrun_on_wasabi.shの実行時に躓きが発生しました。具体的には以下です。

wasabiOSをダウンロード（clone）できない
wgetコマンドが存在しない
使っているRustのバージョンが古くてedition2024に対応してない

一つ一つ解決策を記載します。

wasabiOSをダウンロード（clone）できない

Warning: Permanently added 'github.com' (ED25519) to the list of known hosts. git@github.com: Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists.

これについては、上記error文をchatgptにぶん投げました。
彼によると、SSHでGitHub にアクセスしようとしたけど認証に失敗したことを意味するエラー文らしく、提示された解決策は以下２パターン。

SSH 鍵を作成して GitHub に登録する（推奨）
HTTPS URL を使う（簡単）

僕はもちろん簡単な方を選びました。鍵を生成する方は面倒そうでしたし。
多分エンジニアを目指す人間としては正しくない。

で、次。

wgetコマンドが存在しない

これは超簡単です。コマンドがないなら入れるだけ。
というかそもそも、QEMUやGitのインストールについては冒頭に載せてくれてるのに、なぜwgetだけ省かれてる。

で、最後。

使っているRustのバージョンが古くてedition2024に対応してない

これは普通に僕のミスです。
プロジェクトの作成時にCargo.tomlが生成された後、このファイルの中身を書き換える指示があります。
書き換える内容の中で、エディションなる項目は以下のように記載されてました。

edition = "2021"

一方、生成されたファイル内のエディションは以下。

edition = "2024"

うん、明らかに違いますね。
僕はこのエディションなる項目を軽視し、修正せず次へ進みましたが、これが大きな間違いでした。
なぜなら本書の環境構築ではrust-toolchain.tomlをトップディレクトリに追加した際、rustのツールチェインのバージョンを書き換えているので。
そのバージョンがedtion2024に対応してないということらしい。

(以下追記)
後日気付いたのですが、run_on_wasabi.shを実行した際にQEMUのGUIが立ち上がってませんでした。
なぜ立ち上がらないのかは分かりませんが、以下コマンドを打ってrun_on_wasabi.shを実行するとGUIが立ち上がりました。

export DISPLAY=0

本事象の解決については以下リンクを参考にしてます。
run_on_wasabi.shを実行してもQEMUのGUIが立ち上がらない

環境構築の流れ

最後に環境構築の流れをまとめます。
なお、実際に自分が辿った順番ではなく、もし次同じことをするならこの順番にするかな〜という考えで整理し直してます。
また、本書に記載のないコマンドについてはこちらに記載してます。
良かったら参考にしてください。

Rustのインストール
QEMUのインストール
gitのインストール
wgetのインストール
2〜4は順不同。コマンドは以下の〇〇をQEMUやwgetに読み替える。
brew install 〇〇
プロジェクトの作成
sababookのclone
git clone https://github.com/d0iasm/sababook.git
rust-toolchain.tomlをトップディレクトリに配置
cp sababook/ch0/saba/rust-toolchain.toml saba/
run_on_wasabi.shをトップディレクトリに配置
cp sababook/ch0/saba/run_on_wasabi.sh saba/
sabaディレクトリへの移動
cd saba
Cargo.tomlの編集
コマンドは以下。編集内容は書籍を参照。
vi Cargo.toml
src/main.rsの編集
コマンドは以下。編集内容は書籍を参照。
vi src/main.rs
run_on_wasabi.shの編集
コマンドは以下。
vi run_on_wasabi.sh
ファイル内32行目を以下のように修正。
修正前）git clone --branch for_saba git@github.com:hikalium/wasabi.git
修正後）git clone --branch for_saba https://github.com:hikalium/wasabi.git
run_on_wasabi.shの実行
※実行の際、QEMUのGUIが立ち上がらない場合は以下コマンドを打った後ファイルを実行すること
export DISPLAY=0

感想

普段運用監視職に従事しており、技術的な知見の少ない自分にはまず環境構築が大変でした。貴重な休日の半日が潰れた。。。

参考文献

［作って学ぶ］ブラウザのしくみ──HTTP、HTML、CSS、JavaScriptの裏側