Webブラウザ（以後，ブラウザ）を使ったことがない人はいないと思う。少なくとも，このブログ記事の読者の中には。そんなあまりにも身近な「ブラウザ」というものの魅力を，技術的な観点からさらっと書いてみたい。

ブラウザの魅力とは？

ブラウザの魅力は，なんといってもテクノロジーの総合格闘技であるという点につきる。

Webブラウザはwebページを見るだけ，と思っていないだろうか。確かにそれもひとつの機能ではある。ただ，ブラウザがwebページを見るだけのツールだった時代はもはや過去のもの。モダンなブラウザはただwebページを表示するだけではなく，さまざな機能を備えている。

ブラウザができること

Webブラウザができることは多い。

・Webサーバと通信する
・HTML, CSS, JavaScriptを解釈する
・Webページを描画する
・メディア（動画・画像・音声など）を表示・再生する
・様々なプログラム実行環境（Java, Flash（！）, ActiveX, PNaClなど）を提供する
・様々なセンサー値（タッチ・加速度・音声・照度・近接など）を扱う
・様々なストレージ的機能（Cookie, IndexedDB, FileSystem, WebSQLなど）を持つ
・開発者ツールで高度なデバッグ機能を提供する
・WebGL, WebCLによるGPUコンピューティングを扱う
・サードパーティによる拡張機能をサポートする

これら全てが「ブラウザ」というひとつのアプリケーションでできてしまうのだから恐ろしい。しかも，これら機能のほとんどは，どこかのweb開発者が作ったHTMLコードを読み込んで受動的に実行されるものばかり。全く知らないどこかの誰かが作ったHTMLコードをアプリケーションに読み込んで実行するなんて，怖い，怖すぎる。セキュリティも気になるし動作検証を考えただけで気が遠くなりそう。自分だったらそんなアプリケーションは怖くて作れない…。でも，それがブラウザの魅力でもある。

ブラウザ機能を支える仕組み

ブラウザがたくさんの機能を備えていることは分かったけれど，これらの機能はどうやって実現されているのだろうか。

ブラウザ機能を支える機構のひとつとして「レンダリングエンジン」と呼ばれる機構がある。Web開発に携わったことがあるなら，WebkitやBlinkといったレンダリングエンジンの名前を聞いたことがあると思う。C++とかRustで書かれていたりする。

レンダリングエンジンは，HTMLやCSSをパースしてwebページをレンダリングする。それだけの仕事なら，大したことをやってないように聞こえるけれど，実はとてつもないことをやっているのがブラウザなのだ。

レンダリングエンジンの仕事：パース

まず，HTML, CSSのパース処理。一般的にパース処理というのは，ソースコード（入力）からパースツリー（出力）を得るための処理のこと。パース処理機構はさらに2つの機構に細分化することができる。それが「字句解析器（Lexer）」と「構文解析器（Parser）」である。
ただ，これだけならまだ大したことはなくて，大学で言語処理系論などを習った方ならば，XML等の文脈自由文法が簡単にパースできることはご存じかと思う。

ところが，実はHTMLという言語は文脈自由文法ではない。HTML（特にHTML5）はXML互換ではないのだ。ここにHTMLパースの難しさがある。難しいポイントを挙げると下記の通り。

1. 言語の寛容な性質。
2. 無効な HTML のよく知られたケースに対応するため、ブラウザでこれまでエラーが許容されてきたこと。
3. 解析処理が「再入可能（リエントラント）」であること。通常は解析中にソースが変更されることはありませんが、HTML では、「document.write」を含むスクリプト タグによってさらにトークンが追加される場合があるため、実際には解析処理中に入力が変更されます。

   引用元: ブラウザのしくみ: 最新ウェブブラウザの内部構造 – HTML5 Rocks

詳しくは引用元を参照されたい。

レンダリングエンジンの仕事：レイアウトとペイント

次に，webページのレンダリング。ちなみに，レンダリング処理はさらに2つの処理に細分化することができる。それが「レイアウト（Layout）」と「ペイント（Painting）」である。
レイアウト処理によって，要素（ボタンやフォームなど）の描画位置を計算し，ペイント処理によって実際に描画する。

Webページというのは，ページ内容が動的かつインタラクティブに変化する（Ajax時代以後は特に）。ここで「インタラクティブに変化する」というのは，つまりユーザの操作に基いてwebページ内容が変化するということであって，いつ・どのように変化するのかが予測できない。

レンダリングエンジンの苦労のひとつは，上で述べたようなページ内容の動的変化に対してリアルタイムにレスポンスしなければならないし，しかもどんなOSやディストリビューションでも同じ見た目で描画されてほしいという要件もあって…という点。考えただけでもとんでもないシステム。ブラウザそのものがまさに究極の「レスポンシブ」だと思う。

一般web開発者にとってのレンダリングエンジン

とはいえ，一般web開発者にとってはレンダリングエンジンの仕組みは知らなくても生きていけるわけで，ブラウザの仕組みを勉強するよりも流行りのJavaScriptフレームワークを追いかけていたほうがよっぽど仕事には繋がるのかもしれない。

それでも，ブラウザの仕組みを理解していると，一般web開発者にとってもメリットがある。

例を挙げてみる。HTMLを書いていると，よく「この部分に表示されるはずの要素が表示されない…」なんてことが起こる。大抵の原因はCSSの記述ミスだったりするのだけど，たまにレンダリングエンジンの不具合が原因になる場合がある。そんな時に，レイアウト・ペイントの仕組みを知っていると，強制再レイアウト・再ペイントのワークアラウンドを書いて対応できたりする（まあ，そんなエッジケースに陥らないコードを書くのが大前提だけど…）。

• Rendering: repaint, reflow/relayout, restyle / Stoyan's phpied.com

まとめ

ここで述べたことはほんの一部であって，まだまだブラウザの世界は奥が深い。今回は触れなかったけれど，JavaScriptエンジン（V8, Chakraなど）やグラフィックエンジン（Cairo, Skiaなど）だけに限って深掘りしても底は見えない。

とにかく，まずはブラウザの技術的な魅力が少しでも伝わってくれると嬉しい。