Skip to content

Web Workerをインラインで使う

by : 2018/03/20

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

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

サンプルのコード

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

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

Blob化する

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

ワーカーにする

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

これで準備完了です。

実行する

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

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


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

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

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

From → HTML5

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

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