やあ、こんにちは。Webの迷宮へようこそ。
フロントエンドの深淵を覗き込んでいると、ふと「なぜ自分の書いたコードはこんなにカクつくんだろう？」と悩む夜があるよね。大丈夫、それは君の才能が足りないわけじゃない。ただ、ブラウザという「職人気質な芸術家」の機嫌を損ねていただけなんだ。
今日は、そんなブラウザと仲良くなるための魔法の杖、`requestAnimationFrame`についてお話ししよう。
—
ブラウザは「パラパラ漫画」の職人さん
まず想像してほしい。ブラウザの画面表示は、実はすごく高性能な「パラパラ漫画」なんだ。1秒間に60回、猛スピードで絵をめくることで、僕たちは滑らかなアニメーションを見ている。これを専門用語で「60fps（フレーム・パー・セカンド）」と呼ぶね。
ところが、JavaScriptで「画面を動かせ！」と無茶な命令をバラバラと送りつけると、職人であるブラウザは混乱してしまう。
「おいおい、そんなに急かされても、まだ前の絵を描き終えてないよ！」
これが、画面がカクついたり、重くなったりする正体だ。
—
そこで登場！`requestAnimationFrame`という「予約券」
`requestAnimationFrame`（以下、rAF）を一言で言うなら、「ブラウザが次の絵を描く準備が整った瞬間に呼んでね」という予約券だ。
これを使わないと、君のコードは「ブラウザが忙しいかどうか」お構いなしに実行される。結果、ブラウザが「あ、今描画しなきゃいけないのに、JavaScriptが重い計算を投げてきた！」とパニックになり、結果として「リフロー（再計算）」や「リペイント（再描画）」が無駄に発生してしまうんだ。
rAFを使うと、ブラウザはこう言ってくれる。
「よし、今から描画するから、その直前に君の命令を実行してあげるよ。一緒に綺麗な絵を作ろうぜ」
これこそが、Web制作における「同期」の極意なんだ。
—
実際に書いてみよう
百聞は一見に如かず。簡単なアニメーションを例に見てみよう。
// 要素を取得
const box = document.querySelector(‘.box’);
let position = 0;
function animate() {
// 位置を少しだけずらす
position += 2;
box.style.transform = `translateX(${position}px)`;
// もし右端に行き過ぎたら止める（無限ループ回避）
if (position < 500) {
// ここが重要！「次の描画のタイミングで、またこの関数を呼んでね」と予約する
requestAnimationFrame(animate);
}
}
// 最初の予約を投げかける
requestAnimationFrame(animate);
このコードの何がすごいの？
1. ブラウザのペースに合わせている: ブラウザが混雑している時は、勝手に間隔を調整してくれる。バッテリーの節約にもなるし、スマートだよね。
2. 無駄な計算をしない: 画面が隠れている時（別タブを開いている時など）、ブラウザは賢いからこの予約を一時停止してくれるんだ。`setInterval`で無理やり動かしていると、裏でひっそりとCPUを食いつぶしてしまうけど、rAFならそんな心配は無用だよ。
—
初学者がつまずきがちなポイント：「大丈夫ですよ」
初めてこのコードを見た時、「`animate`の中に`animate`を書くなんて、無限ループにならないの？」と不安になるかもしれないね。
でも、安心して。これは「再帰呼び出し」というテクニックだけど、`requestAnimationFrame`は「あくまで次の1回分だけを予約する」というルールなんだ。だから、メモリが溢れたりすることはない。まさに、ブラウザという指揮者のタクトに合わせて、一歩ずつ進んでいるようなイメージだね。
—
まとめ：ブラウザを「相棒」にするために
Web開発は、ブラウザという最強のパートナーと一緒に仕事をするようなものだ。
`requestAnimationFrame`を使うことは、ブラウザに対して「君の仕事のリズムを尊重するよ」と伝えることと同義だ。
- カクつくアニメーションは、ブラウザが悲鳴を上げている証拠。
- rAFを使って、ブラウザの「描画のタイミング」に仕事を合わせよう。
- 無理をさせず、タイミングを合わせれば、驚くほど滑らかな体験が作れる。
最初は難しく感じるかもしれないけれど、この「ブラウザの呼吸に合わせる」感覚さえ掴んでしまえば、君はもう一段階上のエンジニアに進化しているはずだ。
もし今日、コードを書いていて行き詰まったら、深呼吸をして、ブラウザの気持ちになってみてほしい。
「今、描画する準備はできているかな？」ってね。
それでは、また次回の深淵でお会いしましょう。ハッピー・コーディング！
コメント