こんにちは！フロントエンド・アーキテクトの私です。
日頃からWebサイトを作ったり、ブラウザでいろんなページを巡ったりしていると、「リンクをクリックしたら、一瞬で画面が綺麗に表示されるのって、ぶっちゃけ凄くない？」って思いませんか？裏側では、ブラウザという名の超優秀な職人たちが、ものすごいスピードで連携プレイを繰り広げているんです。
今回は、HTMLやCSSがブラウザに届いたあと、画面に映し出されるまでに起こる「レンダリングパイプラインの4つのステージ（Recalculate Style, Layout, Paint, Composite）」の裏側を、身近な例えを交えながら、とことん優しく紐解いていきます。
「なんだか専門用語が多くて難しそう…」なんて身構えなくて大丈夫ですよ。一つひとつ、一緒に見ていきましょう！
—
そもそも「レンダリングパイプライン」ってなに？
Webブラウザは、サーバーから送られてきたただの「テキスト（文字の羅列）」を、私たちが普段見ているカラフルでインタラクティブなWebページに翻訳する職人集団です。
この翻訳から画面完成までの作業レーン（流れ作業の工程）を、レンダリングパイプラインと呼びます。大まかな流れは、こんな感じです。
1. Recalculate Style（スタイルの再計算）：どの文字を何色にするか決める
2. Layout（レイアウト）：画面のどこに配置するか決める（位置とサイズ）
3. Paint（ペイント）：実際にピクセルを塗っていく（色や影の描画）
4. Composite（合成）：レイヤーを重ね合わせて一枚の画面にする
工場でのモノづくりに例えるなら、「設計図を読む ➔ 部品のサイズを測って床に並べる ➔ 色を塗る ➔ 最後に透明なフィルムを何枚も重ねて完成させる」という流れそのものです。
それでは、各ステージの裏側を覗いてみましょう！
—
ステージ1：Recalculate Style（スタイルの再計算）
〜「この見出しは何色にすればいいんだっけ？」を整理する時間〜
ブラウザがHTMLを読み込んでDOM（文書の構造ツリー）を作り終えると、次は「CSS」という服を着せる番です。
ここでブラウザが行うのは、「どの要素に、どのスタイルが適用されるのか」をすべて計算して紐付けることです。
- 身近な例え：
アパレルショップで、たくさんあるマネキン（HTML要素）に対して、「この赤い服はAくん用、この青いズボンはBくん用…」と、山盛りのコーディネート表（CSS）を照らし合わせながら着せ替えていく作業です。
CSSは、親要素から子要素へとスタイルが引き継がれる（継承）性質があったり、「どのセレクタのルールが一番強いか（詳細度）」という複雑なルールがあったりします。ブラウザはここで脳みそをフル回転させ、すべての要素の「最終的な見た目の設定（Computed Style）」をピシッと決定します。
—
ステージ2：Layout（レイアウト / リフローとも呼ばれます）
〜「画面のどこに、どれくらいのサイズで置く？」を決める空間パズル〜
スタイルが決まったら、次は「物理的な位置と大きさ」の計算です。これが「Layout（レイアウト）」ステージです。
- 身近な例え：
大きなお部屋に、家具（机、ソファ、本棚）を配置していくインテリアコーディネートを想像してください。「机は窓際から20cm離して、その上にランプを置くから…全体の幅はここまでだな」と、メジャーで測りながら配置図を描いていく作業です。
ブラウザはこのステージで、画面全体の幅や高さ、余白（マージンやパディング）を計算し、「すべての要素が、画面上のどこに（X座標・Y座標）、どれくらいの大きさ（幅・高さ）で陣取るのか」をミリ単位（ピクセル単位）で確定させます。
> ⚠️ 現場のちょっとした裏話：
> この「Layout」の計算、実はブラウザにとって一番お仕事が重くて大変な工程です。例えば、JavaScriptで要素の幅を無理やり変えたりすると、ブラウザは「うわっ、全体の配置図をイチから書き直さなきゃ！」とパニックになり、他の家具の配置も全部ずらし直すことになります。これが俗に言う「レイロジカルな重さ（パフォーマンス低下）」の原因です。なるべく避けたいポイントですね。
—
ステージ3：Paint（ペイント）
〜「よし、色を塗ろう！」ペンキをベタ塗りする作業〜
配置場所とサイズ（設計図）が決まったら、いよいよ色を塗る「Paint」の出番です。
- 身近な例え：
キャンバスに下書き（Layout）が終わったので、筆と絵の具を取り出して、「ここは背景を白く塗って、文字は黒、ボタンにはグラデーションをかけて…」と実際に色を乗せていく作業です。
ただし、ここで塗られるのは一気に一枚の絵ではなく、「文字はここ」「背景色はここ」「画像はここ」といったパーツごとのレイヤー（下敷き）に分かれて描画されます。
—
ステージ4：Composite（合成）
〜透明なフィルムを重ね合わせて、最終的な画面を完成させる〜
いよいよ最後の仕上げ、「Composite（合成）」です。
- 身近な例え：
アニメのセル画や、イラストのデジタル制作を思い出してください。背景のレイヤー、キャラクターのレイヤー、手前のエフェクトのレイヤーを、透明なフィルム（シート）の何枚かに分けて描き、最後にピタッと重ね合わせて1枚の絵にしますよね。あれと同じことをブラウザがやっています。
ブラウザは、Paintで作られた個別のパーツ（レイヤー）を、正しい順番（重なり順：z-indexなど）でガチャンと重ね合わせ、最終的に私たちの目に見える「Webページの画面」としてモニターに出力します。
特に現代のブラウザは、この合成作業をパソコンやスマホのGPU（グラフィックボード）に丸投げして高速化しています。だから、スマホでスクロールしたときにヌルヌル動くんです。すごい技術ですよね。
—
実践！ブラウザの動きを意識したミニコード
では、ここで実際にHTMLとCSSを書いてみましょう。
「ブラウザはこのコードを読んで、こういう風にパイプラインを回しているんだな」とイメージしながら見てみてください。
こんにちは！
ブラウザは、裏側で一生懸命スタイルを計算し、位置を測り、色を塗って、画面を組み立てています。
このコードをブラウザのエディタ（ChromeならDevToolsの「Performance」タブなど）で覗いてみると、まさに今回解説した `Recalculate Style` -> `Layout` -> `Paint` -> `Composite` というお仕事のスケジュールが綺麗に記録されているのが見られますよ。お時間があるときに、ぜひ覗いてみてくださいね。
—
最後に：つまずいても大丈夫！
最初は「覚えることが多くて頭がパンクしそう…」と思うかもしれません。でも、すべてを完璧に暗記する必要なんて全くありません。
「あ、今ブラウザは一生懸命、配置の計算（Layout）でパズルをしてるんだな」
「色を塗って（Paint）、最後に重ね合わせる（Composite）んだな」
という大まかなストーリーさえ頭の片隅に置いておけば、いざWebサイトの表示速度を速くしたい（パフォーマンスチューニングをしたい）と思ったときに、必ずあなたの強力な羅針盤になってくれます。
あなたのフロントエンドの旅が、もっと楽しく、ワクワクするものになりますように。
それではまた、次回の記事でお会いしましょう！
コメント