コンテンツへスキップ

Web Workerをインラインで使う

by : 2018/03/20

HTML5 APIで追加されつつも、あまり使われている雰囲気がないのがWeb Workerではないでしょうか。使い方はそれほど難しい訳ではないですが、別途JavaScriptファイルを用意したりするのが面倒に感じられるのかも知れません。JavaScriptではできない、並列処理を行うためには必須のAPIです。

そこで手軽に使えるようにインラインのちょっとしたコードをWeb Worker化してみたいと思います。

サンプルのコード

例えば次のようなコードをWeb Worker化します。 e はメインスレッドから渡されるイベントで、 e.data でメッセージを受け取れます。メインスレッドからは onmessage が呼ばれますので、処理を行った上で postMessage で返せばOKです。

onmessage = (e) => {
setTimeout(() => {
postMessage('Workerからの返信です。' + e.data);
}, 2000);
}

view raw
index.js
hosted with ❤ by GitHub

このコードを文字列にします。

const code = `
onmessage = (e) => {
setTimeout(() => {
postMessage('Workerからの返信です。' + e.data);
}, 2000);
}
`;

view raw
index.js
hosted with ❤ by GitHub

Blob化する

次にこの文字列をBlobにします。

const blob = new Blob([code]);
const blobURL = URL.createObjectURL(blob);

view raw
index.js
hosted with ❤ by GitHub

ワーカーにする

後はこのblobURLをワーカーとして指定するだけです。

const worker = new Worker(blobURL);

view raw
index.js
hosted with ❤ by GitHub

これで準備完了です。

実行する

後はメインスレッドからpostMessageを使ってWeb Workerを呼び出します。

worker.postMessage("Execute");

view raw
index.js
hosted with ❤ by GitHub

逆にワーカー側からメッセージが来た時にはonmessageが呼ばれます。

worker.onmessage = (e) => {
alert(e.data);
};

view raw
index.js
hosted with ❤ by GitHub


このようにメインのJavaScriptファイルの中からWeb Workerを動的に作れるなら使い道があるかも知れません。なおWeb WorkerはDOM操作やwindow/documentオブジェクトへのアクセスができないので注意してください。ネットワークへのアクセスはできるので、バックグラウンドで通信を行うと言った時には良さそうです。

デモをJSFiddleにアップしてありますので参考にしてください。

ウェブ ワーカーの基本 – HTML5 Rocks

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。