Image

TECH I.S.

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

WebワーカーAPI

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

Webワーカーとは？

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

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

ブラウザのサポート

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


Chrome 4 IE10 Firefox 3.5 Safari 4 Opera 11.5
2010年1月 2012年9月 2009年6月 2009年6月 2011年6月

Webワーカーの例

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

例

数を数える： function startWorker(){if(typeof(Worker)!=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; };} else { document.getElementById("result").innerHTML="申し訳ありません。お使いのブラウザは Web ワーカーをサポートしていません..."; }}function stopWorker(){ w.terminate();w = 未定義;}

自分で試してみる»

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

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

<div>if (typeof(Worker) !== "undefined") {   // Yes! Web worker support!   // <i>Some code.....</i> } else {   // Sorry! No Web Worker support.. }</div>

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

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

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

<div>let i = 0; function timedCount(){  i ++;  postMessage(i);   setTimeout("timedCount()",500); } timedCount();</div>

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

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

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

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

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

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

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

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

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

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

Webワーカーを終了する

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

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

<div>w.terminate();</div>

Web Workerを再利用する

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

<div> w = undefined;</div>

完全な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> let w; function startWorker(){   if (typeof(w) == "undefined") {     w = new Worker("demo_workers.js");   }   w.onmessage = function(event) {     document.getElementById("result").innerHTML = event.data;   }; } function stopWorker(){   w.terminate();   w = undefined; } </script> </body> </html>

自分で試してみる»

WebワーカーとDOM

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

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


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

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

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

スクールの詳細

チュートリアル