こんにちは。ブラウザの深淵を覗き込み、日夜ピクセルと戯れているフロントエンド・アーキテクトです。
Web制作を始めたばかりの頃、「あれ？JavaScriptでアニメーションを動かしているのに、なんかカクカクするな…」と悩んだことはありませんか？実はそれ、ブラウザという「職人」の仕事のタイミングを少しだけ邪魔してしまっているのが原因かもしれません。
今日は、ブラウザのレンダリングの仕組みと、魔法のAPI『requestAnimationFrame（rAF）』について、肩の力を抜いてお話しします。
—
ブラウザは「パラパラ漫画」の職人さん
まず、Webブラウザがどうやって画面を表示しているか想像してみてください。ブラウザは、非常に優秀ですが、実は少しだけ「頑固な職人」です。
彼らは「1秒間に60回」というペースを死守して、画面を塗り替えています。これを「リフレッシュレート」と呼びます。16.7ミリ秒に1回、猛烈なスピードで「最新のDOM（構造）とCSS（見た目）を確認して、画面を描き直す」という作業を繰り返しているんです。
よくある「つまずきポイント」：職人の邪魔をしてはいけない
もし、職人さんが「よし、今から描くぞ！」と気合を入れている瞬間に、JavaScriptが「あ、ここも変えて！」「あ、こっちの計算もして！」と割り込んだらどうなるでしょう？
職人さんは、中途半端な状態で描画をやり直したり、あるいはタイミングを逃して「コマ落ち（カクつき）」を起こしてしまいます。これが、アニメーションが滑らかに見えない正体です。
—
requestAnimationFrame（rAF）という魔法の約束
ここで登場するのが、`requestAnimationFrame` です。これは、職人さんに対してこうお願いするツールです。
> 「次の描画のタイミングが来たら、僕のこの処理を一緒に実行してくれませんか？」
これを使うと、JavaScriptの処理がブラウザの描画サイクルと完全に同期します。「職人さんの描くタイミング」と「僕たちの書き換えるタイミング」を一致させる。これだけで、アニメーションは驚くほど滑らかになります。
実際に書いてみよう
百聞は一見にしかず。まずは、一番シンプルなアニメーションのコードを見てみましょう。
// 動かしたい要素を取得します
const box = document.querySelector(‘.box’);
let position = 0;
function animate() {
// 位置を少しずつずらします
position += 2;
box.style.transform = `translateX(${position}px)`;
// 次の描画のタイミングで、もう一度この関数を呼び出すようにお願いする
// これが「requestAnimationFrame」の魔法です！
requestAnimationFrame(animate);
}
// アニメーションを開始！
requestAnimationFrame(animate);
このコードの何が賢いか分かりますか？ `requestAnimationFrame` は、ブラウザが「今、描画しても大丈夫だよ！」というタイミングを完璧に把握しているので、無駄な計算を一切させないんです。しかも、ブラウザのタブが非アクティブになれば自動的に処理を止めてくれるので、バッテリーの節約にもなる。まさに、職人と呼吸を合わせる最高のパートナーなんです。
—
大丈夫、最初は分からなくて当然です
「DOMを触るタイミングを合わせるだけで、そんなに変わるの？」と思うかもしれません。でも、Webのパフォーマンスの世界では、この「同期」がすべてと言っても過言ではありません。
もしコードが複雑になってきて、何が起きているか分からなくなったら、こう考えてみてください。
1. ブラウザはパラパラ漫画を描いている
2. JavaScriptは、その漫画に絵を描き加える人
3. `requestAnimationFrame` は、「今、紙をめくったから描いていいよ！」と教えてくれる合図
このイメージさえあれば、もう怖いものはありません。
まとめ：今日からできること
- `setInterval` や `setTimeout` でアニメーションを作るのは卒業しましょう。これらは、ブラウザの描画タイミングとは無関係に動いてしまうので、カクつきの原因になりがちです。
- 画面を書き換える処理は、すべて `requestAnimationFrame` の中に入れるクセをつける。これだけで、あなたの書くコードの「品格」が一段上がります。
Webブラウザは、私たちが思っている以上に一生懸命、ユーザーのために美しい画面を描こうと頑張っています。そのリズムを尊重してあげるだけで、Webサイトは驚くほど快適で、心地よい体験に変わります。
ぜひ、次のプロジェクトで試してみてくださいね。応援しています！
コメント