【入門編】 Web Workersとレンダリングの分離 – Webブラウザの仕組み実践ガイド

こんにちは！Webブラウザの深淵へようこそ。
普段私たちが何気なく使っている「ブラウザ」。実は、裏側ではものすごい職人たちが秒単位で必死に働いているのを知っていますか？

今日は、ブラウザという「魔法の舞台」で起きている、ちょっとしたトラブルと、その華麗な解決策についてお話しします。

—

ブラウザがWebページを表示する過程を、想像してみてください。HTMLを読み込み、CSSで色を塗り、JavaScriptで動きをつける……。この一連の流れを支えるのが「メインスレッド」という場所です。

例えるなら、「メインスレッド」は、小さなレストランのたった一人の店員さんです。
彼は、注文を聞き（HTMLパース）、料理を盛り付け（CSSOM構築）、配膳し（レンダリング）、さらにはお会計までこなしています。

普段は手際よく動いていますが、もし突然、「100万回計算して！」なんていう重い注文が来たらどうなるでしょう？
店員さんはその計算に釘付けになってしまい、お客様（あなた）が画面をスクロールしようとしても、ボタンを押そうとしても、店員さんは無視せざるを得ません。

これが、Webサイトが「カクつく」「固まる」という現象の正体です。

—

この店員さん（メインスレッド）を救うために登場するのが「Web Workers」という仕組みです。

これは、お店の裏に「計算専門のバックヤード」を作るようなもの。
重い計算が発生したら、メインスレッドが自分でやるのではなく、バックヤードのスタッフに「これ、やっといて！」と投げ渡すのです。

こうすれば、メインスレッドは手を止めずに、お客様の操作（スクロールやクリック）をスムーズに処理し続けられますよね。これがレンダリングの分離です。

—

では、実際にどう書くのかを見てみましょう。難しく考えないでください。ただ「手紙」を送るだけだと思ってください。

まずは、指示を出す側です。

// 1. 裏方のスタッフ（Worker）を雇う
const worker = new Worker(‘worker.js’);

// 2. 「これ計算しといて！」と手紙（メッセージ）を送る
worker.postMessage(1000000000);

// 3. 裏方から返事が返ってきたら画面を更新する
worker.onmessage = function(event) {
console.log(‘計算結果が届いたよ！:’, event.data);
alert(‘計算が終わったよ！画面は止まってなかったでしょ？’);
};

次に、バックヤードで作業する側です。

// メインスレッドからの手紙を待つ
onmessage = function(event) {
const limit = event.data;
let sum = 0;

// 重い計算（あえてループを回す）
for (let i = 0; i < limit; i++) { sum += i; } // 計算結果をメインスレッドに送り返す postMessage(sum); }; ---

「じゃあ、なんでもかんでもWeb Workerに投げれば最強じゃん！」と思うかもしれません。でも、ここにも一つだけ落とし穴があります。

それは「通信コスト」です。

メインスレッドとWorkerは、壁の向こうとこちら側にいるようなもの。手紙（データ）を渡すとき、ブラウザは「データのコピー」を作成してやり取りします。
膨大なデータを頻繁にやり取りすると、その「手紙を書く時間」や「受け取る時間」で、かえって動作が重くなってしまうことがあるんです。

—

Webブラウザは、非常に賢い道具です。しかし、その限界を知り、上手に役割分担をしてあげるだけで、あなたの作るWebサイトは「プロの仕事」へと一歩近づきます。

最初は難しく感じるかもしれませんが、「メインスレッドを忙しくさせすぎない（＝お客様を待たせない）」という意識を持つだけで、あなたはもう立派なフロントエンド・アーキテクトの視点を持っています。

大丈夫、少しずつ試してみてください。ブラウザという舞台が、あなたのコードで軽やかに舞い始める瞬間は、本当に感動的ですよ。

何か詰まったら、いつでも戻ってきてくださいね。応援しています！