VueでのWeb Worker
型付きWeb Worker APIのためのComlink、重い計算のオフロード、リアクティブな進捗追跡
「VueでのWeb Worker」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
Web Worker を使う理由
JavaScript はレンダリングと共有される単一のメインスレッドで実行されます。負荷の高い計算を行うと UI がフリーズします。Web Worker はコードを別のスレッドで実行するため、Vue アプリの応答性を維持できます。
Worker の作成
モジュールファイルから Worker のインスタンスを作成します。Vite は { type: "module" } オプションをサポートしており、Worker を正しくバンドルします。
const worker = new Worker(
new URL("./worker.js", import.meta.url),
{ type: "module" }
);Worker ファイル
Worker には固有のグローバルスコープがあり、DOM にはアクセスできません。メッセージを待ち受け、結果を送り返します。
// worker.js
self.onmessage = (e) => {
const result = heavyCompute(e.data);
self.postMessage(result);
};postMessage によるデータの送信
メインスレッドから、データのペイロードを指定して postMessage を呼び出します。データはスレッド境界を越える際に構造化複製されます。
worker.postMessage({ numbers: [1, 2, 3] });結果の受信
Worker からの応答は onmessage で処理します。イベントの data に送信された値が格納されています。
worker.onmessage = (e) => {
console.log("result", e.data);
};リアクティブな Ref の更新
ハンドラー内で結果をリアクティブな ref に書き込むと、テンプレートが自動的に更新されます。
import { ref } from "vue";
const result = ref(null);
worker.onmessage = (e) => {
result.value = e.data;
};Composable への組み込み
Worker を Composable でラップすると、再利用と後片付けができます。アンマウント時に Worker を終了して、スレッドを解放します。
import { ref, onUnmounted } from "vue";
export function useWorker() {
const worker = new Worker(
new URL("./worker.js", import.meta.url),
{ type: "module" }
);
const result = ref(null);
worker.onmessage = (e) => { result.value = e.data; };
onUnmounted(() => worker.terminate());
return { result, run: (d) => worker.postMessage(d) };
}メッセージプロトコルの問題
生の postMessage を使う場合、メッセージの種類を表すプロトコルを自分で設計し、リクエストとレスポンスを手動で対応付ける必要があります。複数の操作を扱うと、コードが冗長になります。
Comlink による解決
Comlink はメッセージチャネルをラップするため、Worker の関数をローカルの非同期メソッドと同じ感覚で呼び出せます。Worker と一緒にインストールします。
npm install comlinkWorker からの API の公開
Worker 内で、Comlink.expose を使って関数のオブジェクトを公開します。
// worker.js
import * as Comlink from "comlink";
const api = {
add: (a, b) => a + b,
process: (data) => heavyCompute(data)
};
Comlink.expose(api);型付きプロキシのための Comlink.wrap
メインスレッドでは、Comlink.wrap によって、メソッドが promise を返すプロキシが作成されます。これにより、Worker に対するすっきりした型付き API を利用できます。
import * as Comlink from "comlink";
const worker = new Worker(
new URL("./worker.js", import.meta.url),
{ type: "module" }
);
const api = Comlink.wrap(worker);
const sum = await api.add(2, 3); // 5クイックチェック
Comlink.wrap は、生の postMessage と比べて何を提供しますか？
まとめ
new Worker(url, { type: "module" }) で作成した Web Worker に負荷の高い処理を移します。postMessage でデータを送り、onmessage で応答を処理し、結果をリアクティブな ref に書き込みます。Worker をアンマウント時に終了する Composable でラップし、すっきりした型付きの promise ベースのプロキシ API には Comlink.wrap を使います。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 42
- レッスン
- 156
よくある質問
「VueでのWeb Worker」レッスンは無料ですか？
はい。「VueでのWeb Worker」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「VueでのWeb Worker」で何を学びますか？
型付きWeb Worker APIのためのComlink、重い計算のオフロード、リアクティブな進捗追跡 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「VueでのWeb Worker」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。