blob: bdc17449fd08462d87643cf482055defdffa6b52 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
---
title: Worker
slug: Web/API/Worker
tags:
- API
- DOM
- Interface
- JavaScript
- Reference
- Web Workers
- Worker
- Workers
translation_of: Web/API/Worker
---
<p>{{APIRef("Web Workers API")}}</p>
<p><a href="/ja/docs/Web/API/Web_Workers_API">Web Workers API</a> の <strong><code>Worker</code></strong> インターフェイスはバックグラウンドで行われるタスクを実行することができ、そのタスクは簡単に生成され、かつ作成元にメッセージを送り返すことができます。<code>Worker()</code> コンストラクターを呼び出しワーカースレッドを走らせるスクリプトを特定してあげるだけでワーカーオブジェクトを作成することができます。</p>
<p>ワーカーは同じ親ページの同一 <a href="/ja/docs/Web/Security/Same-origin_policy">オリジン</a> 内でホストされている限り、他の新しいワーカーを発生させる可能性があります (注記: 入れ子の worker は <a href="https://bugs.webkit.org/show_bug.cgi?id=22723">WebKit で未実装です</a>)。それにくわえて、ワーカーはネットワーク I/O のための <a href="/ja/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code></a> を使用することもあります。なお、<code>XMLHttpRequest</code> の <code>responseXML</code> と <code>channel</code> 属性は常に <code>null</code> を返す決まりです。</p>
<p>必ずしも <a href="/ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers" title="Functions and classes available to Web Workers">すべてのインターフェイスと関数</a> が <code>Worker</code> のスクリプトに関連づいているわけではありません。</p>
<p>Firefox において、ワーカーをエクステンションを用いて <a href="/ja/docs/js-ctypes" title="js-ctypes">js-ctypes</a> にアクセスしたい場合、{{ domxref("ChromeWorker") }} オブジェクトを代わりに使用しなくてはいけません。</p>
<h2 id="Constructors" name="Constructors">コンストラクター</h2>
<dl>
<dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
<dd>特有の URL で動作する専用ワーカーのインスタンスを生成することができます。また、<a href="/ja/docs/Web/API/Blob">Blobs</a> を用いてワーカーを生成することもできます。</dd>
</dl>
<h2 id="Properties" name="Properties">プロパティ</h2>
<p><em>{{domxref("EventTarget")}} より継承しています。また、{{domxref("AbstractWorker")}} のメソッドを定義しています。</em></p>
<h3 id="Event_handlers" name="Event_handlers">イベントハンドラー</h3>
<dl>
<dt>{{domxref("AbstractWorker.onerror")}}</dt>
<dd><code>error</code> タイプの {{domxref("ErrorEvent")}} がワーカーを通して発生するとき、常に {{ domxref("EventListener") }} を呼びます。これは {{domxref("AbstractWorker")}} からの継承メソッドです。</dd>
<dt>{{domxref("Worker.onmessage")}}</dt>
<dd><code>message</code> タイプの {{domxref("MessageEvent")}} がワーカーを通して発生するときは常に {{ domxref("EventListener") }} を呼びます。例えば、{{domxref("DedicatedWorkerGlobalScope.postMessage")}} を経由して親要素のドキュメントにメッセージが送信されます。メッセージは {{domxref("MessageEvent.data", "data")}} プロパティに保存されます。</dd>
<dt>{{domxref("Worker.onmessageerror")}}</dt>
<dd>{{event("messageerror")}} イベントが発生したときに呼び出されるコードを表す {{event("Event_handlers")}} です。</dd>
</dl>
<h2 id="Methods" name="Methods">メソッド</h2>
<p><em>{{domxref("EventTarget")}} より継承しています。また、{{domxref("AbstractWorker")}} のメソッドを定義しています。</em></p>
<dl>
<dt>{{domxref("Worker.postMessage()")}}</dt>
<dd>ワーカーの内部スコープにメッセージを送ることができます。このメッセージは、<strong>いかなる</strong> JavaScript のオブジェクトでも送ることができます。</dd>
<dt>{{domxref("Worker.terminate()")}}</dt>
<dd>ワーカーを直ちに終了させます。実行中の処理は完了を待たずに終了させられます。ServiceWorker インスタンスはこのメソッドを備えていません。</dd>
</dl>
<h2 id="Example" name="Example">例</h2>
<p>次のコード例では、{{domxref("Worker.Worker", "Worker()")}} コンストラクターを用いて {{domxref("Worker")}} オブジェクトを生成しています。</p>
<pre class="brush: js">var myWorker = new Worker('worker.js');
var first = document.querySelector('#number1');
var second = document.querySelector('#number2');
first.onchange = function() {
myWorker.postMessage([first.value,second.value]);
console.log('Message posted to worker');
}</pre>
<p>完全なサンプルは次のリンクより御覧ください：<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>)。</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">策定状況</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
<p>worker の種類に応じてサポート状況が異なります。詳しくは、それぞれの worker のページをご覧ください。</p>
<p>{{Compat("api.Worker")}}</p>
<h3 id="Cross-origin_worker_error_behaviour" name="Cross-origin_worker_error_behaviour">クロスオリジン worker エラーの動作</h3>
<p>古いバージョンのブラウザーでクロスオリジンの worker のスクリプトを読み込もうとすると、<code>SecurityError</code> が発生していました。仕様が変わったため、新しいブラウザーでは {{event("error")}} イベントが発生します。この処理方法について詳しくは <a href="https://www.fxsitecompat.com/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">クロスオリジンの Worker 読み込みが例外の代わりに error イベントを発生させるようになり、サンドボックス化された iframe 内の Worker が禁止されます</a> をご覧ください。</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/Guide/Performance/Using_web_workers">Web Workers の使い方</a></li>
<li><a href="/ja/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Web Workers で使用可能な関数一覧</a></li>
<li>他の Workers： {{ domxref("SharedWorker") }} 、 <a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
<li>非標準の Gecko 専用 Workers： {{ domxref("ChromeWorker") }}（拡張機能で使用）</li>
</ul>
|
