画面が固まるその前に！超多忙なブラウザを救う「Web Workers」入門
こんにちは！日々Webサイトやアプリの制作に励んでいるみなさん、本当にお疲れ様です。
一生懸命書いたコード。でも、動かしてみるとなぜか「画面が一瞬カクッと固まる」「ボタンを押しても反応が遅い」なんて経験はありませんか？
「コードは間違っていないはずなのに、どうして……？」と、頭を抱えてしまうこともありますよね。でも大丈夫、安心してください。それはあなたのプログラミングセンスのせいではなく、ブラウザの「中の人」が、あまりの忙しさに悲鳴を上げていただけなのです。
今回は、ブラウザが裏側でどのように働いているのかをのぞき見しながら、画面をいつでも「サクサク・ぬるぬる」に保つための救世主、「Web Workers（ウェブ・ワーカー）」という技術について、どこよりも優しく、丁寧にお話ししていきますね。
—
1. ブラウザの裏側は、超多忙な「ワンオペ店長」
まずは、ブラウザが普段、私たちのWebサイトをどのように画面に映し出しているか（レンダリングしているか）を、街の小さなお店に例えてみてみましょう。
ブラウザの中には、「メインスレッド」という名前の、それはそれは優秀な「ワンオペ店長」が一人だけ住んでいます。
この店長のお仕事は、とにかく多岐にわたります。
【ワンオペ店長（メインスレッド）の1日】
1. お客様（ユーザー）からの注文（クリックやスクロール）を受ける
2. お店のレイアウトを整える（リフロー：HTML/CSSの配置計算）
3. 看板や壁をきれいに塗る（リペイント：色や画像の描画）
4. 仕上げに、盛り付けを整えて料理を出す（コンポジット合成：画面の最終出力）
5. 複雑な裏メニューの計算をする（重いJavaScriptの計算処理）
そう、ブラウザの画面を描き換える一連の流れ（リフロー、リペイント、コンポジット）も、JavaScriptの実行も、すべてこの店長がたった一人で順番にこなしているのです。
なぜ画面が「カクつく」のか？
通常、店長はこれらのお仕事を1秒間に60回（1回あたり約16ミリ秒！）という超ハイスピードでこなしています。だから、私たちは画面がスムーズに動いているように感じます。
しかし、ここに「めちゃくちゃ時間がかかる裏メニューの計算（重い処理）」が入ってきたらどうなるでしょう？
「えーっと、1万個のデータを並び替えて、複雑な計算をして……」と店長が机にかじりついて電卓を叩き始めた瞬間、お店のすべての業務がピタッとストップしてしまいます。
お客様がボタンを押しても無反応。画面のスクロールもカクカク。これが、Webサイトでよく起こる「画面のフリーズ（Jank）」の正体です。
—
2. 救世主「Web Workers」：優秀なアシスタントを雇おう！
「店長が一人で全部やるから無理があるんだ。だったら、裏方専門のアシスタントを雇えばいいじゃないか！」
このアイデアをブラウザの世界で実現するのが、今回の主役「Web Workers」です。
Web Workersを使うと、メインの店長とは別に、画面には見えない「バックヤード（別スレッド）」で働くアシスタントを雇うことができます。
- メインの店長（メインスレッド）：
接客（ユーザーの操作対応）と、お店の飾り付け（描画：リフロー、リペイント、コンポジット）に専念する。
- アシスタント（Web Worker）：
バックヤードにこもって、時間のかかる面倒な計算を黙々と片付ける。
重い計算が始まっても、店長は「あ、その計算はアシスタント君に任せたから！」と、自分は笑顔でお客様の接客を続けられます。だから、画面は一切カクつくことなく、いつでもサクサク動くのです。これを専門用語で「メインスレッドのオフロード（負荷軽減）」と呼びます。
—
3. 【実践】Web Workersを使ってみよう！
「難しそう……」と思われるかもしれませんが、基本の使い方はとってもシンプルです。
店長（メイン）とアシスタント（Worker）の間で、「手紙のやり取り」をするだけ。
実際に動かせる簡単なサンプルを作ってみましょう！
フォルダの中に、以下の3つのファイルを作ってみてください。
① `index.html`（お店の入り口）
画面には、ボタンと結果を表示する場所だけを用意します。
Web Workersでサクサク計算
② `main.js`（店長の動き：手紙を送る・受け取る）
メインスレッド用のファイルです。アシスタントを雇い、指示を送り、結果を受け取って画面に表示します。
// 1. 裏方アシスタント（Worker）を雇います
// 引数には、アシスタントが働く専用のJavaScriptファイルを指定します
const myWorker = new Worker(‘worker.js’);
const button = document.getElementById(‘calc-btn’);
const resultDiv = document.getElementById(‘result’);
// ボタンがクリックされたときの処理
button.addEventListener(‘click’, () => {
resultDiv.textContent = ‘アシスタントが計算中…（この間も画面は固まりません！）’;
// 2. アシスタントに「この仕事をやって！」と手紙（メッセージ）を送ります
// postMessage() を使うことで、データを安全に裏方に渡せます
myWorker.postMessage({ command: ‘start’, countLimit: 1000000000 });
console.log(‘店長：「アシスタント君に計算を頼んだよ！」’);
});
// 3. アシスタントから「計算が終わりました！」という手紙を受け取ったときの処理
myWorker.onmessage = function(event) {
const finalResult = event.data;
console.log(‘店長：「お、報告書が届いたな」’);
// 受け取った結果を、店長が画面にきれいに飾り付け（描画）します
resultDiv.textContent = `計算完了！ 結果は: ${finalResult}`;
};
③ `worker.js`（アシスタントの動き：黙々と計算する）
アシスタント専用のファイルです。ここでは画面のことは一切気にせず、計算だけに集中します。
// アシスタントは「店長からの手紙（メッセージ）」が届くのをじっと待ちます
self.onmessage = function(event) {
console.log(‘アシスタント：「手紙が届きました！計算を始めます。」’);
// 店長から送られてきたデータを取り出します
const limit = event.data.countLimit;
let sum = 0;
// 時間のかかる重いループ計算（例：10億回足し算する）
for (let i = 0; i < limit; i++) {
sum += i;
}
console.log('アシスタント：「計算が終わりました。店長に報告します！」');
// 計算結果を、店長へ手紙（メッセージ）として送り返します
self.postMessage(sum);
};
💡 動作確認のコツ
Web Workersはセキュリティのルール上、PC上のファイルを直接ダブルクリックして開くだけでは動かないことがあります。
VS Codeの拡張機能「Live Server」を使ったり、ローカルサーバーを起動して `http://localhost:〜` のアドレスでブラウザから開いてみてくださいね。
ボタンを押した後も、画面が固まることなく「計算中…」という文字に切り替わり、裏で計算が終わるとスッと結果が表示されるはずです！
—
4. つまずきやすいポイントと「大丈夫ですよ」のフォロー
Web Workersを使い始めると、多くの人が一度は「あれ？動かないぞ？」と壁にぶつかります。でも、それはあなたが悪いのではありません。ブラウザの「安全第一」なルールがあるからなのです。
⚠️ 「DOM（画面の要素）が操作できない！」と怒られる
アシスタントのファイル（`worker.js`）の中で、`document.getElementById()` や `window.alert()` を使おうとすると、エラーになってしまいます。
「なぜ？」
お店のレイアウト（DOM）を、店長とアシスタントの二人が同時にいじってしまうと、「どっちの指示に従えばいいの！？」とお店が大混乱（競合状態）になってしまうからです。
そのため、「画面を直接いじれるのは、メインの店長（メインスレッド）だけ」という絶対的なルールがあります。
「大丈夫ですよ！」
アシスタントは、計算した「データ」だけを `postMessage()` で店長に送り返せばいいのです。画面を書き換えるのは、手紙を受け取った店長の仕事にしてあげましょう。役割分担が綺麗にできて、コードもスッキリしますよ。
—
5. まとめ：未来のフロントエンド・アーキテクトへ
Web Workersは、以下のような場面で絶大な効果を発揮します。
- 大量のデータ（CSVやJSON）を読み込んで、並び替えやフィルタリングをするとき
- 高画質な画像の加工や、音声・動画の解析をブラウザ上で行うとき
- 複雑なシミュレーションや、ゲームの物理演算をするとき
ブラウザのレンダリングパイプライン（画面の描き換え）を邪魔せず、いかにメインスレッドを自由にさせてあげるか。これが、プロの現場で求められる「極上のユーザー体験」を作る鍵になります。
「すべてを一人で抱え込まず、得意な人に任せる」。
これはプログラミングでも、日常のお仕事でも同じですね。Web Workersという優秀なアシスタントを味方につけて、ぜひサクサクで心地よいWebサイトを作ってみてください。
あなたの挑戦を、いつでも応援しています！
コメント