こんにちは！Webブラウザという「魔法の箱」の裏側を覗いてみたいなんて、好奇心旺盛で素敵ですね。
Webサイトを作っていると、たまに「アニメーションがカクつく」「なんか動きが滑らかじゃないな」と感じることはありませんか？それは、ブラウザが一生懸命頑張っている「描画のタイミング」と、私たちの書いたプログラムのタイミングが微妙にズレているからかもしれません。
今日は、そんなWebブラウザの「心臓の鼓動」に合わせるための魔法の呪文、`requestAnimationFrame`（リクエスト・アニメーション・フレーム）について、一緒に紐解いていきましょう。
—
ブラウザの「描画サイクル」は、映画のフィルムと同じ
まず、ブラウザが画面を表示する仕組みを想像してみてください。ブラウザは、パラパラ漫画を描くときのように、ものすごい速さで画面を更新しています。これを「リフレッシュレート」と呼び、一般的によくあるディスプレイでは1秒間に60回（60fps）、つまり約16.6ミリ秒ごとに新しい画面を描き直しています。
この「画面を描き直す直前」に、「準備はいい？何か描くものある？」とブラウザがメインスレッドに問いかけてくれるタイミングがあるんです。そこに割り込んで、描画直前に計算を行うのが `requestAnimationFrame` の役割です。
「お買い物のレジ」で例えてみましょう
想像してください。あなたはスーパーのレジに並んでいます。
- 普通の `setTimeout` や `setInterval` は、「時間がきたらとにかく割り込む！」という、周りが見えていないせっかちな人です。レジ打ち（描画）のタイミングなんてお構いなしです。
- `requestAnimationFrame` は、店員さんが「次の方どうぞ！」と言ったタイミングを正確に見計らって、「はい、今のうちに！」とスムーズに商品を置く、とても空気が読める人なんです。
だからこそ、ブラウザの描画と同期して、無駄のない最高に滑らかな動きが実現できるんですよ。
—
なぜ `requestAnimationFrame` を使うべきなの？
「別に `setInterval` で0.01秒ごとに動かしてもいいんじゃない？」と思うかもしれませんね。でも、それだとブラウザが「まだ前の絵を描き終えてないよ！」と悲鳴を上げているのに、無理やり次の命令を押し付けることになります。
`requestAnimationFrame` を使うと、こんなメリットがあります。
1. 描画と完全に同期する: ブラウザが更新の準備を整えてから実行されるので、無駄な計算が減ります。
2. ブラウザが休憩させてくれる: タブを切り替えてそのページが見えていないとき、ブラウザは自動的にこの命令を一時停止します。バッテリー消費も抑えられて、エコなんです。
3. カクつき（ジャダー）が消える: フレーム落ちを防げるので、動きが驚くほど滑らかになります。
—
実際に書いてみよう
さあ、恐れずに触ってみましょう。以下のコードをコピーして、HTMLファイルに貼り付けてみてください。丸い円が画面を横切るだけのシンプルなものですが、これが「ブラウザと呼吸を合わせる」ための基本の型です。
let position = 0;
const box = document.getElementById(‘my-box’); // HTMLにある要素を掴みます
function animate() {
// 位置を少しずつ進めます
position += 2;
box.style.transform = `translateX(${position}px)`;
// 次のフレーム（次の描画タイミング）でもう一度自分を呼び出す！
// これがループの魔法です
requestAnimationFrame(animate);
}
// 最初の起動
requestAnimationFrame(animate);
つまずきポイント：これ、どうやって止めるの？
`requestAnimationFrame` は、一度実行すると「次のフレームもよろしくね」と自分を呼び出し続けます。もし止めたいときは、実行したときに返ってくる「ID」を覚えておいて、`cancelAnimationFrame` に渡してあげればOKです。
const myId = requestAnimationFrame(animate);
// 止めたくなったらこれ！
cancelAnimationFrame(myId);
—
最後に：完璧じゃなくても大丈夫
最初は「同期？メインスレッド？なんだか難しそう…」と思うかもしれません。でも、大丈夫です。まずは「アニメーションを滑らかにしたいときは、`setTimeout` ではなく `requestAnimationFrame` を使う」と覚えるだけで、あなたの書くコードは一歩、いえ、十歩くらいプロの領域に近づきます。
ブラウザの仕組みは、いわば「Webという巨大な舞台装置の裏方さん」です。彼らのリズム（リフレッシュレート）を尊重してあげれば、きっと素晴らしいパフォーマンスで応えてくれますよ。
何か分からないことがあったら、またいつでも聞いてくださいね。一緒に少しずつ、ブラウザという「魔法の箱」の達人になっていきましょう！
コメント