Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

HTML WebワーカーAPI

Webワーカーは、ページのパフォーマンスに影響を与えずにバックグラウンドで実行されるJavaScriptです。

ウェブワーカーとは？

HTMLページでスクリプトを実行すると、スクリプトが完了するまでページが応答しなくなります。

Webワーカーは、ページのパフォーマンスに影響を与えることなく、他のスクリプトから独立してバックグラウンドで実行されるJavaScriptです。Webワーカーがバックグラウンドで実行されている間、クリック、選択など好きなことを続けることができます。

ブラウザのサポート

表の数字は、Webワーカーを完全にサポートする最初のブラウザーバージョンを示しています。


API
Webワーカー 4.0 10.0 3.5 4.0 11.5

HTML Webワーカーの例

以下の例では、バックグラウンドで数字をカウントする単純なWebワーカーを作成します。

例


数を数える：




Webワーカーのサポートを確認する

Webワーカーを作成する前に、ユーザーのブラウザーがWebワーカーをサポートしているかどうかを確認してください。

if (typeof(Worker) !== "undefined") {   // はい！ Webワーカーをサポートしています！   // <i>Some code.....</i> } else {   // すみません！ Web Workerはサポートされていません。 }

Webワーカーファイルを作成する

では、外部JavaScriptでWebワーカーを作成しましょう。

ここでは、重要なスクリプトを作成します。スクリプトは「demo_workers.js」ファイルに保存されています。

var i = 0; function timedCount(){  i = i + 1;  postMessage(i);   setTimeout("timedCount()",500); } timedCount();

上記のコードの重要な部分は、HTMLページにメッセージをポストバックするために使用されるpostMessage()メソッドです。

注：通常、Webワーカーはこのような単純なスクリプトには使用されませんが、CPUを集中的に使用するタスクには使用されます。

Webワーカーオブジェクトを作成する

Webワーカーファイルができたので、HTMLページからそれを呼び出す必要があります。

次の行は、ワーカーが既に存在するかどうかを確認し、存在しない場合は、新しいWebワーカーオブジェクトを作成し、「demo_workers.js」でコードを実行します。

if (typeof(w) == "undefined") {   w = new Worker("demo_workers.js"); }

次に、Webワーカーからメッセージを送受信できます。

「onmessage」イベントリスナーをWebワーカーに追加します。

w.onmessage = function(event){  document.getElementById("result").innerHTML = event.data; };

Webワーカーがメッセージを送信すると、イベントリスナー内のコードが実行されます。Webワーカーからのデータはevent.dataに保存されます。

Webワーカーを終了する

Webワーカーオブジェクトが作成されると、終了するまで(外部スクリプトが終了した後でも)メッセージをリッスンし続けます。

Web ワーカーを終了し、ブラウザ/コンピュータのリソースを解放するには、terminate()メソッドを使用します。

w.terminate();

Webワーカーを再利用する

ワーカー変数を未定義に設定すると、終了後にコードを再利用できます。

w = undefined;

完全なWebワーカーのサンプルコード

.jsファイルのWorkerコードは既に確認しました。以下は、HTMLページのコードです。

例

<!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <script> var w; function startWorker(){  if (typeof(Worker) !== "undefined"){     if (typeof(w) == "undefined") {       w = new Worker("demo_workers.js");     }     w.onmessage = function(event) {       document.getElementById("result").innerHTML = event.data;     };   }else{    document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";   } } function stopWorker(){   w.terminate();   w = undefined; } </script> </body> </html>

WebワーカーとDOM

Webワーカーは外部ファイルにあるため、次のJavaScriptオブジェクトにはアクセスできません。

  • ウィンドウオブジェクト
  • ドキュメントオブジェクト
  • 親オブジェクト


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル