こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。
Webサイトを作っていて、「なんだかこのアニメーション、カクカクするな……」「スマホでスクロールすると、妙に引っかかる感じがする……」なんて悩んだ経験はありませんか？
「コードは綺麗に書いたはずなのに、一体ブラウザの中で何が起きているんだ！？」と、夜中にモニターの前で頭を抱えたくなる気持ち、痛いほどよく分かります。私も昔はそうでした。
でも、大丈夫ですよ。安心してください。
今回は、ブラウザという「職人たちの巨大なアトリエ」で繰り広げられる、「ペイント（色塗り）」と「コンポジット（重ね合わせ）」という秘密の工程を、身近な例えを交えながら一緒に覗いていきましょう。ここが分かると、あなたの書くコードのパフォーマンスは見違えるほど変わります！
—
1. ブラウザは「超高速の巨大な絵師」である
私たちが普段何気なく見ているWebページ。ブラウザは、HTMLやCSSという設計図を受け取ると、画面というキャンバスに絵を描き始めます。
この一連の流れを「レンダリング」と呼びますが、その中でも後半戦にあたるのがペイントとコンポジットです。イメージしやすいように、「巨大な舞台の背景と役者たちを描く劇団」にたとえてみましょう。
ペイント（Paint）とは？
ペイントは、レイアウト（どこに何を配置するか）が決まったパーツたちに、「色」「文字」「影（シャドウ）」といったお化粧をしていく工程です。
絵の具でキャンバスに色を塗っていく作業をイメージしてください。「このボタンは背景が青で、文字は白、角は少し丸く……」と、一つひとつの要素に指示を出して、ピクセルデータに変換する準備をしていきます。
コンポジット（Compositing / 合成）とは？
ペイントが終わったら、いよいよ仕上げです。
昔のアニメーション制作を思い浮かべてみてください。背景の絵の上に、動くキャラクターのセル画を何枚も重ね合わせて1つの画面を作っていましたよね。あれと同じことをブラウザは行っています。
ペイントされた個別のパーツ（レイヤー）を、GPU（グラフィックス専用の処理装置）という超強力な助っ人の力を使って、パパッと重ね合わせる（合成する）。これがコンポジットです。
—
2. なぜ「レイヤー」に分ける必要があるのか？（お引越しの例え）
ここで、ちょっと考えてみてください。
家全体を模様替えするとき、全部の家具をひとつの巨大な段ボールに詰め込んだらどうなるでしょう？ 一箇所をちょっと動かしたいだけなのに、中のものを全部ひっくり返すハメになって、大汗をかきますよね。
Webブラウザも同じです。
もし画面全体が1枚の巨大な絵（ペイントデータ）だったら、マウスをちょっとホバーさせただけ、あるいは画面を数ミリスクロールさせただけで、「画面全体を最初から塗り直さなきゃいけない（これを『再描画地獄』と呼びます）」ことになります。これではスマホのバッテリーもCPUも悲鳴を上げてしまいます。
そこでブラウザは、賢く仕事を分担します。
「背景は動かないからそのまま固定のレイヤーにしておこう」「このポップアップメニューは動くから、別の透明な下敷き（レイヤー）に描いておこう」という風に、パーツを別々のレイヤーに切り分けておくのです。
そうすれば、いざアニメーションさせる時に、その「動くレイヤー」だけをスイスイと動かせばいいので、CPUに負担をかけず、GPUの力だけでヌルヌルと滑らかに動かすことができるというわけです。
—
3. 実務で役立つ！ブラウザを味方につける魔法のコード
「なるほど、レイヤーをうまく使えばいいんだな。じゃあ、どうやってブラウザに『これ、別レイヤーにしてね』って伝えればいいの？」
安心してください。ここで私たちが日常のコーディングで使える、とっておきの魔法（CSSプロパティ）をご紹介します。
百聞は一見にしかず。まずは、実際にブラウザに「この要素は独立したレイヤーとして扱ってね！」とお願いするためのサンプルコードを見てみましょう。
コードの解説：`will-change` という名の「事前予約票」
上記のコードで登場した `will-change: transform;`。これが現場でめちゃくちゃ役立つ重要アイテムです。
ブラウザに対して、「おい、このカードはあとでグニャッと変形したり動いたりするから、今のうちに専用の下敷き（レイヤー）を用意して待機しておいてくれよ！」とこっそり伝える事前予約票のようなものです。
これをしておくと、ブラウザはあらかじめGPU側にレイヤーを作成してくれるため、マウスを乗せた瞬間にラグ（遅延）が一切ない、極上の滑らかさを演出できるのです。
—
4. やってはいけない！初心者が陥りがちな「レイヤーの罠」
ここで、少しだけ現場の裏話・失敗談をさせてください。
「レイヤーって便利なんだ！ じゃあ、ページ内のすべての要素に `will-change` をつけたり、やたらと `transform` を使ったりすれば、世界一早いサイトになるのでは！？」
……残念ながら、答えは「NO」です。むしろ逆効果になります。
お皿洗いを想像してみてください。お皿を1枚ずつ丁寧に洗うのは楽ですが、食洗機の中に何千枚ものお皿を無理やり詰め込んだら、機械がパンクしてしまいますよね。
ブラウザも全く同じです。
レイヤーを増やすということは、「GPUのメモリを大量に消費する」ということでもあります。スマホなどの限られたメモリの中で、無駄に何百枚ものレイヤーを作ってしまうと、かえってメモリ不足を引き起こし、ブラウザがクラッシュしたり、逆に動作が重くなったりする「メモリ肥大化の罠」にハマってしまいます。
- 動かす必要のある主役（モーダル、ドロワーメニュー、アニメーションするアイコンなど）だけにレイヤーを絞る。
- 背景や静的なテキストなど、動かないものまで無理やりレイヤーにしない。
この「引き算の美学」を持つことが、一流のフロントエンド・エンジニアへの第一歩です。
—
5. さいごに
ペイントとコンポジットの仕組み、なんとなくイメージできましたでしょうか？
- ペイント：パーツにお化粧をして、絵の具で描く工程。
- コンポジット：描かれたパーツのレイヤーを、GPUの力でパズルのように重ね合わせる工程。
- コツ：よく動く主役だけを `will-change` などで上手に別レイヤーにしてあげること。
最初は難しく聞こえるブラウザの内部構造も、私たちの身の回りの作業に置き換えてみると、途端に愛おしく、仕組みが手に取るように分かってきます。
あなたの書いたWebサイトが、今日もどこかの誰かのスマホで、カクつくことなくヌルヌルと美しく動く——。そんな最高の体験を届けるために、ぜひ今日の知識を頭の片隅に置いてコードを書いてみてくださいね。
それでは、また次の現場でお会いしましょう！Happy Coding!
コメント