ブラウザの中の「職人さん」たちの連携プレー：アニメーションの裏側を覗いてみよう
Webサイトを見ているとき、ふと目に入る「ふわっと現れるボタン」や「なめらかに動く画像」。これらを見ていると、「ブラウザは魔法で動いているのかな？」なんて思うかもしれません。
でも、その裏側では、ブラウザの中にいる何人もの「職人さん」たちが、ものすごい速さで連携プレーを繰り広げているんです。今日は、その中でも特に「アニメーション」に焦点を当てて、なぜ一部のアニメーションはサクサク動いて、一部はカクついてしまうのか、その秘密を紐解いていきましょう。
—
ブラウザの「工場」で起きていること
まず、ブラウザという工場には、大きく分けて二人の主要な職人さんがいます。
1. メインスレッドくん（何でも屋の司令塔）：JavaScriptの計算をしたり、HTMLを読み込んでどこに何を置くか決めたりする、とにかく忙しいリーダーです。
2. コンポジターくん（職人気質の運び屋）：メインスレッドくんが決めた「配置図」を元に、実際に画面を切り貼りして表示する、超高速なスペシャリストです。
1. メインスレッドくんが頑張りすぎる「JSアニメーション」
JavaScriptでアニメーションを書くとき、ブラウザは「1フレームごとに、どこに動かすか？」をメインスレッドくんに計算させます。
例えるなら、「1枚ずつ手書きでパラパラ漫画を描いている」状態です。
メインスレッドくんは他の仕事（クリックの反応やデータの読み込み）で手一杯なことも多いため、アニメーションの計算が追いつかなくなると、パラパラ漫画の枚数が減ってしまい、結果として画面が「カクッ」と止まって見えるのです。
2. コンポジターくんにお任せする「Compositor-onlyアニメーション」
一方で、CSSの `transform`（変形）や `opacity`（透明度）を使ったアニメーションは、メインスレッドくんが最初に「これ、動かしといて！」と指示を出しさえすれば、あとはコンポジターくんが魔法のように処理してくれます。
これは「写真（画像）を透明なシートに印刷して、それをスライドさせて動かしている」ようなもの。
メインスレッドくんは最初だけ関与して、あとはコンポジターくんが高速でシートを動かすだけなので、どんなに忙しくてもアニメーションが止まることはありません。これが「なめらかさ」の正体です。
—
実際に動かして違いを感じてみよう
言葉だけだと難しいので、ちょっと実験してみましょう。頭の片隅に「メインスレッドに負担をかけないのが正義！」と置いておいてくださいね。
// 【JSアニメーションの注意点】
// topやleftをJSで動かすと、メインスレッドくんが
// 「位置計算→配置のやり直し→描画」を毎回繰り返すので
// 重くなりがちです。
const box = document.querySelector(‘.box-js’);
let pos = 0;
function move() {
pos += 1;
// topやleftの変更はメインスレッドくんの仕事量が増える原因！
box.style.left = pos + ‘px’;
requestAnimationFrame(move);
}
—
「カクつき」と戦うあなたへ：今日からできるアドバイス
「じゃあ、JavaScriptでアニメーションを作っちゃダメなの？」と心配になるかもしれませんが、そんなことはありません。JSにはJSの良さがあります。
もしJSで動かすなら、「位置を動かすときは `top/left` ではなく `transform` を使う」と覚えておいてください。これだけで、ブラウザの職人さんたちは「お、これはコンポジターくんに任せられるやつだな！」と察して、裏側でうまくやってくれます。
まとめ：ブラウザを思いやるコードを書こう
- CSSアニメーション（`transform`/`opacity`）：コンポジターくんの得意分野。サクサク動いて低負荷！
- JSアニメーション：メインスレッドくんが頑張りすぎるとカクつく。でも、`transform`を操作すればJSでもコンポジターくんが助けてくれる！
最初は、ブラウザが裏で何をしているかなんて分からなくて当然です。でも、「あ、今コンポジターくんが頑張ってくれてるんだな」とイメージできるようになれば、あなたはもう立派なフロントエンドの卵です。
もし画面がカクついたら、「メインスレッドくん、ちょっと無理させすぎちゃったかな？」と、優しく見直してあげてください。その積み重ねが、最高のユーザー体験を生む近道ですよ。大丈夫、ゆっくり慣れていきましょうね！
コメント