こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。

Webサイトを作っていて、「なんだかスマホでスクロールするとカクカクするな……」「アニメーションがモタつく……」なんて壁にぶつかったことはありませんか？
「コードは綺麗に書いたはずなのに、一体ブラウザの裏側で何が起きているんだ！」と、夜中に天井を見上げた経験、プログラマなら一度や二度ではないはずです。

大丈夫ですよ、安心してください。今日お話しする「ペイント（Paint）」と「コンポジット（Composite）」の仕組みを知るだけで、あなたのそのモヤモヤはスッキリ晴れて、ブラウザと友達になれます。

難しい専門用語はなるべく置いておいて、身近な例え話から一緒に覗いてみましょう！

—

1. レストランの厨房から画面が表示されるまでのおさらい

Webブラウザが画面を表示するまでには、いくつかのステップがあります。HTMLを読み込んで構造（DOM）を作り、CSSを当ててデザイン（CSSOM）を決め、画面のどこに何を配置するか（レイアウト）を計算する……。

ここまでで、いわば「どこに、どんな形の椅子や机を置くか」という設計図が完成しました。

しかし、まだ「色」が塗られていませんし、それを実際に「窓ガラスにどう重ねて配置するか」という仕上げが残っています。ここで登場するのが、今回の主役である「ペイント」と「コンポジット」です。

—

2. 「ペイント（Paint）」：一生懸命に色を塗る職人さん

身近な例え：プラモデルの塗装

ペイントの工程は、プラモデルのパーツに色を塗る作業にそっくりです。

ブラウザの「レイアウト（またはリフロー）」が終わると、次は「よし、このボタンは青色で、背景は白、文字は黒で塗ろう！」と、画面を構成するパーツ（テキスト、背景、ボーダー、影など）のピクセル情報を埋めていく作業が始まります。これがペイントです。

ブラウザの中には、このペイントを担当する職人さんがいます。職人さんは、レイアウトの設計図をもとに、「ここは赤、ここはグラデーション……」と、一つひとつのパーツにせっせと色を塗っていきます。

ここがつまずきポイント！

このペイント、実は結構な重労働です。
例えば、Webページのほんの一部分（ボタンの色など）を変えただけでも、ブラウザが「うわっ、全体をもう一回塗り直さないと！」と勘違いして、ページ全体のペイントをやり直してしまうことがあります（これを「フルペイント」と呼ぶこともあります）。
これが原因で、スクロールやアニメーションがカクつく（フレームレートが落ちる）という現象が起きるのです。

—

3. 「コンポジット（Composite）」：透明なフィルムを重ね合わせる神技

身近な例え：パラパラ漫画やセルのアニメーション

ペイントが終わったら、いよいよ画面を仕上げる最終工程、「コンポジット（合成）」です。

昔のアニメーションを思い出してください。背景画の上に、キャラクターが描かれた透明なセル画を何枚も重ねて、ひとつの画面を作っていましたよね。コンポジットもまさにこれと同じことをやっています。

ブラウザは、ペイントされたパーツたちを、それぞれ独立した「レイヤー（透明なフィルム）」に分けて持っています。

• 一番下：背景のレイヤー
• 真ん中：記事本文のレイヤー
• 一番上：ふわっと浮かぶメニュー（モーダル）のレイヤー

コンポジットの役割は、これらバラバラの透明フィルムを、上から順番に重ね合わせて1枚の画面（私たちが目にするWebページ）に仕上げることです。

なぜこの工程がそんなに大事なの？

ここに、現代のWebパフォーマンスを爆上げする秘密が隠されています。

もし、アニメーションのたびに全てのパーツをペイント（色塗り）し直していたら、ブラウザのCPUはすぐに音を上げてしまいます。
しかし、コンポジットの技術を使えば、「動かすパーツだけをあらかじめ1枚の透明フィルム（独立したレイヤー）にしておき、位置をズラす（合成する）だけ」というズル（褒め言葉です！）ができるのです。

これなら、色を塗り直す必要がないため、GPU（グラフィックボード）の力を借りて驚くほど滑らかに（60fpsや120fpsで）動かすことができます。これが、いわゆる「ハードウェアアクセラレーション」の正体です。

—

4. 実務で使える！ ブラウザを味方につける魔法のコード

百聞は一見にしかず。ブラウザに「ねえ、この要素、特別な透明フィルム（レイヤー）にしておいてよ！」とお願いするための、魔法のようなCSSプロパティをご紹介します。

それが `will-change` や `transform` です。

以下のサンプルコードを見てみてください。エディタに貼り付けて、ブラウザの「開発者ツール（デベロッパーツール）」の「Rendering」タブにある「Paint flashing」などを覗いてみると、ブラウザの動きがよく分かりますよ。

ブラウザの裏側を覗いてみよう

下の赤い箱と青い箱にマウスオーバーしてみてください。

コードのここがポイント！

• `box-normal` の動き: `background-color` を変えると、ブラウザは「色を塗り直さなきゃ！」とペイントの処理を頑張ります。
• `box-optimized` の動き: `transform` や `will-change: transform` を使うことで、ブラウザは最初からこの要素を別レイヤー（透明フィルム）として扱い、動かすときは位置を変えるだけ（コンポジット）で済ませます。だからカクつかないのです。

—

まとめ：ブラウザの苦労を想像してあげよう

Webブラウザは、私たちが書いたHTMLやCSSを受け取って、コンマ数秒の間に「設計（レイアウト） → 色塗り（ペイント） → フィルムの重ね合わせ（コンポジット）」という、ものすごい大仕事をこなしています。

もし、Webサイトを作っていて「なんか動きが重いな……」と感じたら、ブラウザの職人さんが「うわあ、何度も全部の色を塗り直さなきゃいけないよ！」と泣いている姿をちょっとだけ想像してみてください。

• 「位置を動かすときは、`top`や`left`（レイアウトを伴うプロパティ）じゃなくて、`transform`（コンポジットで済むプロパティ）を使おうかな」
• 「アニメーションさせる要素は、`will-change`でそっと別レイヤーにしておいてあげようかな」

そんな風に、ブラウザの仕組みに寄り添った優しいコードを書けるようになったとき、あなたはもう立派なフロントエンド・スペシャリストへの第一歩を踏み出していますよ。

それでは、また次の現場でお会いしましょう！快適なWeb開発ライフを！