ブラウザという魔法の箱の中で、なぜ時々「画面がカクつく」のか。今日はその正体を解き明かし、プロの現場でも愛用される「魔法の逃げ道」についてお話ししましょう。
—
画面がカクつく「主役」の悲劇
Webページを読み込むとき、ブラウザの中では「メインスレッド」という名の、たった一人の超優秀な指揮官がすべてを仕切っています。
- HTMLの解析（間取り図を描く）
- CSSの計算（壁紙や家具の色を決める）
- JavaScriptの実行（動く仕掛けを動かす）
この指揮官、実は「一度に一つのことしかできない」という大きな弱点があります。例えば、複雑なアニメーションを描画している最中に重い計算処理が割り込むと、指揮官はパニックを起こします。「あ、今計算中だからちょっと待って！」と描画が止まり、結果としてユーザーの目には「カクつき」として映るわけです。
いわば、「電話でおしゃべりしながら、同時に料理もして、さらに家計簿までつけている」状態。そりゃあ、手元も狂いますよね。
救世主「OffscreenCanvas」の登場
この状況を打破するのが、今回紹介する「OffscreenCanvas（オフスクリーン・キャンバス）」です。
これは一言で言うと、「描画専用の『別室（ワーカースレッド）』を用意する」という技術です。メインスレッドという忙しいリビングから離れ、別の部屋で黙々と絵を描いてもらうイメージですね。
これを使えば、メインスレッドがどんなに忙しくても、アニメーションは別の部屋でスイスイと動き続けます。ユーザーには「ヌルヌル動く快適なサイト」として届くわけです。
どうやって実現するの？
難しいことは考えず、まずは「メインから切り離す」という手続きを覚えましょう。
1. メインスレッド： 「Canvas、君はもうこっちの部屋じゃなくて、向こう（ワーカースレッド）で働いてくれ！」と伝える。
2. ワーカースレッド： 「了解！ じゃあ今からここで絵を描くよ」と受け取る。
これだけで、描画という重労働がメインから解放されます。
—
実践！コードで見てみよう
まずは、この「別室」を作るためのシンプルなコードを見てみましょう。
1. メインのファイル（main.js）
ここでは、Canvas要素を「転送」する手続きだけを行います。
// キャンバス要素を取得
const canvas = document.getElementById(‘myCanvas’);
// transferControlToOffscreen() でキャンバスの主導権を別室に渡す！
// これ以降、メインスレッドでこのcanvasに対して描画はできません（それが安全の証！）
const offscreen = canvas.transferControlToOffscreen();
// Web Worker（別室）を起動して、そのキャンバスを渡す
const worker = new Worker(‘worker.js’);
worker.postMessage({ canvas: offscreen }, [offscreen]);
2. 別室のファイル（worker.js）
ここでは、ひたすら描画だけに集中します。
// メインから送られてきたキャンバスを受け取る
self.onmessage = (e) => {
const { canvas } = e.data;
const ctx = canvas.getContext(‘2d’);
// アニメーションループ
function draw() {
// 画面をクリアして描画するだけの集中作業
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = ‘skyblue’;
ctx.fillRect(Math.random() 100, 50, 50, 50);
requestAnimationFrame(draw);
}
draw();
};
—
大丈夫、つまずいても怖くない
初めてこれを実装すると、「あれ？ 画面が真っ白だ！」と焦ることがあります。でも安心してください。それは「メインスレッドで描画しようとして、実は主導権がすでにワーカースレッドに移っている」という、よくあるミスです。
プロの現場でも、最初は「あれ、描画命令が届いてないぞ？」なんてことは日常茶飯事。そんな時は、コンソールを見て「今、誰がキャンバスを握っているか」を確認する癖をつけるだけで、解決への近道になります。
この技術がもたらす未来
OffscreenCanvasを使いこなせるようになると、これまで「重すぎて無理」と諦めていたリッチな表現（複雑なデータ可視化や、ゲームのような動き）が、スマホのブラウザでもサクサク動くようになります。
指揮官（メインスレッド）を楽にしてあげること。それが、最高のユーザー体験を作るための「優しさ」であり、フロントエンド・エンジニアの腕の見せ所です。
まずは小さな四角形を一つ、別室で動かすところから始めてみませんか？ きっと、ブラウザの向こう側に新しい世界が見えてくるはずですよ！
コメント