こんにちは！フロントエンドの現場を長年歩んできたシニア・アーキテクトの私です。
Webサイトを作っていて、「なんだかスマホでスクロールするとカクカクするな……」「アニメーションがちょっと重いな……」と頭を悩ませた経験はありませんか？ デベロッパーツールを開いては、「どうしてここでフレームレートが落ちるんだよ！」と画面に向かってつぶやいた夜が、私にもたくさんありました。大丈夫、あなただけじゃありません。プロの現場でも、この「描画の重さ」とは毎日格闘しているんです。
今回は、そんな画面のカクつきを華麗に解決してくれる魔法の切札、「GPUアクセラレーションとコンポジット（レイヤー合成）」の世界へあなたをご案内します。
難しい専門用語はなるべくキッチンの道具や身近な例えに置き換えてお話しするので、どうぞ温かいコーヒーでも飲みながら、リラックスして読み進めてくださいね。
—
1. Webブラウザの「お絵描き」の裏側を覗いてみよう
まずは、Webブラウザが私たちの目に見える画面を作り上げるまでの「裏側のストーリー」を少しだけ覗いてみましょう。
Webブラウザは、私たちが書いたHTMLやCSSを受け取ると、次のような手順で画面をキャンバスに描き出します。
1. HTMLを読んで骨組みを作る（DOMツリーの構築）
2. CSSを読んでお化粧のルールを決める（CSSOMツリーの構築）
3. 「どこに何を配置するか」を計算する（レイアウト・フロー）
4. 「何色で、どうやって塗るか」を決める（ペイント）
5. 最後に、それらを重ね合わせて1枚の絵にする（コンポジット）
ここで想像してほしいのですが、もしあなたが大きなキャンバスに絵を描いていて、ほんの一部分（例えば、マウスを乗せたときに出る小さなメニューや、くるくる回るローディングアイコン）だけを動かしたいとします。
もし通常のやり方だとどうなるでしょう？ 小さなアイコンが1ミリ動くたびに、ブラウザはキャンバス全体を一から描き直し（再ペイント）させられちゃうんです。これでは、まるで毎回キャンバスを真っ白にして全体を描き直すようなもので、ブラウザもCPUもヘトヘトになってしまいます。これが、スクロールやアニメーションがカクつく大きな原因の一つです。
—
2. 救世主登場！「レイヤー（層）」という秘密兵器
そこでブラウザは、頭を使いました。
「全部を1枚のキャンバスに描くから大変なんだ。透明なフィルム（レイヤー）を何枚も重ね合わせる仕組みにすればいいんだ！」と。
これが、「コンポジット（合成）」の考え方です。
身近な例で言うと、「パラパラ漫画」や「セルの重ね合わせアニメーション」をイメージしてください。背景の動かない絵は一番下のフィルムに描き、動かすキャラクターだけは別の透明なフィルムに描いておきます。キャラクターが動くときは、そのフィルムの位置をずらすだけでいいので、背景を何回も描き直す必要がありませんよね。
Webの世界でも同じように、特定の要素を「別の独立した透明なフィルム（グラフィックレイヤー）」に切り分けてあげることができます。そして、そのフィルムの移動や拡大・縮小などの面倒な計算を、私たちのパソコンやスマホの頭脳であるCPUではなく、画像描画のプロフェッショナルである「GPU（グラフィックス・プロセッシング・ユニット）」にお願いしちゃうのです。
これが、世に言う「GPUアクセラレーション（ハードウェアアクセラレーション）」の正体です。
—
3. GPUを味方につける魔法のプロパティたち
では、どうすればブラウザに「この要素を別のフィルムにして、GPUにお願いしてよ！」と伝えられるのでしょうか？
実は、いくつかのCSSプロパティを使うだけで、ブラウザは自動的に「おっ、これは独立したレイヤーとして扱ったほうがよさそうだな」と察知してくれます。
代表的なものがこちらです。
- `transform: translate3d(0, 0, 0);` や `transform: translateX(…)` （要素を動かしたり変形させたりする）
- `opacity` （透明度を変える）
- `will-change` （これから変わることを事前にブラウザに教える）
特に `will-change` は、ブラウザに対する「事前連絡」のようなものです。「もうすぐこの要素をグリグリ動かすから、心の準備（レイヤーの独立化）をしておいてね！」とあらかじめ伝えておくことで、いざアニメーションが始まった瞬間のカクつきをピタッと防ぐことができます。
実際に書いてみましょう：優しいサンプルコード
それでは、実際にGPUアクセラレーションの恩恵を受けられる滑らかなボタンのアニメーションのコードを見てみましょう。そのままコピーして、ブラウザで動かしてみてくださいね。
このコードでは、マウスを乗せたときにボタンがフワッと浮き上がります。`width` や `height`、`top` や `left` といったプロパティで位置を変えるのではなく、`transform` を使っているのがポイントです。`transform` はブラウザのレイアウト計算をスキップしてGPUで合成処理を行えるため、驚くほど滑らかに動いてくれます。
—
4. 注意！便利だからといって「全部をレイヤー化」してはいけない理由
ここまで読んで、「なんだ、じゃあサイト内のすべての要素に `will-change` をつけて、全部 `transform` で動かしておけば最強じゃん！」と思ったそこのあなた。
……ふふふ、実はそこに、Webフロントエンド開発者が陥りがちな「甘い罠」があるんです。
GPUアクセラレーションは魔法の杖のように聞こえますが、実は「メモリ（VRAM）」をたくさん消費するというトレードオフ（代償）があります。
先ほどの「透明なフィルム（レイヤー）」の例えを思い出してください。
もし、ページ上のすべてのパーツ（画像や文字、ボタン一つひとつ）をバラバラの透明フィルムに分解してしまったらどうなるでしょう？
- フィルムの枚数が何百枚、何千枚にも膨れ上がる。
- スマホやパソコンのメモリ（GPUメモリ）がパンクしてしまう。
- メモリが足りなくなると、逆に動作が重くなったり、最悪の場合はブラウザがクラッシュ（強制終了）してしまう。
これを業界用語で「メモリプレッシャー（メモリへの圧力）」や「レイヤーの爆発」なんて呼んだりします。
アーキテクトからのアドバイス
ですから、実務で使うときは以下のルールを心にとめておいてください。
1. 「本当に動かすもの」だけに絞る
- 画面全体や、これからスクロール・アニメーションさせる主要な要素（モーダルウィンドウ、固定ヘッダー、ハンバーガーメニューなど）だけに限定して使いましょう。
2. 使い終わったら綺麗にする
- JavaScriptなどで動的にレイヤーを作った場合、用事が済んだら `will-change: auto;` に戻してあげる配慮も時には大切です。
3. まずは普通のCSSで書いて、カクついたら疑う
- 最初から過剰に対策せず、「デベロッパーツールで動かしてみて、実際にカクつく場所があったらGPUの出番を考える」というスタンスが、結果的に一番クリーンで健全なコードにつながります。
—
おわりに
今回は、GPUアクセラレーションとコンポジットの仕組みについて、少し身近な例えを交えながらお話ししましたがいかがでしたでしょうか？
「ブラウザが裏側でフィルムを重ね合わせているんだな」「GPUにお願いするときは、メモリの使いすぎにちょっとだけ優しくしてあげなきゃいけないんだな」というイメージが、あなたの心の中にふんわりと残れば大成功です。
Webブラウザの仕組みを知ることは、私たちが描いたコードの「意思」を、ブラウザが一番心地よく実行するための道筋を作ってあげることです。つまずくことがあっても、仕組みが分かれば怖くありません。一歩ずつ、楽しくコードを書いていきましょう！
あなたのフロントエンドライフが、カクつきのない滑らかな体験に満ちたものになりますように。それではまた、別の現場でお会いしましょう！
コメント