diff --git a/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md b/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md index dc656f8ae7d9f..8ad9883e5416a 100644 --- a/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md +++ b/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md @@ -1,61 +1,38 @@ --- -title: Web Workers が使用できる関数とクラス +title: ウェブワーカーが使用できる関数やクラス slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers +l10n: + sourceCommit: 6fefcdd237a377af5c066dc2734c118feadbbef9 --- -標準的な [JavaScript](/ja/docs/Web/JavaScript) の関数（{{jsxref("String")}} や {{jsxref("Array")}}、{{jsxref("Object")}}、 {{jsxref("JSON")}} など）に加えて、DOM から worker に利用できる様々な関数があります。この記事ではそれらの機能のリストを提供します。 - -**Worker は、現在の window とは異なるグローバルコンテキスト、 {{domxref("DedicatedWorkerGlobalScope")}} で実行されます。**既定では {{domxref("Window")}} のメソッドとプロパティは使用できませんが、`Window` に似ている {{domxref("DedicatedWorkerGlobalScope")}} は {{domxref("WindowTimers")}} と {{domxref("WindowBase64")}} を実装しています。 - -## worker の種類別のプロパティとメソッドの比較 - -| 関数 | 専用 workers | 共有 workers | サービス workers | Chrome workers {{Non-standard_inline}} | workers の外側 | -| ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | ----------------------------------------- | -| {{domxref("WindowBase64.atob", "atob()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 | -| {{domxref("WindowBase64.btoa", "btoa()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 | -| {{domxref("WindowTimers.clearInterval", "clearInterval()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 | -| {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 | -| {{domxref("Window.dump()", "dump()")}} {{non-standard_inline}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 | -| {{domxref("WindowTimers.setInterval", "setInterval()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 | -| {{domxref("WindowTimers.setTimeout", "setTimeout()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 | -| {{domxref("WorkerGlobalScope.importScripts", "importScripts()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | 使用不可。 | -| {{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | 使用可能だが、何も実行しない。 | 不明。 | 使用不可。 | -| {{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}} | {{domxref("DedicatedWorkerGlobalScope")}} で使用可能。 | 使用不可。 | 使用不可。 | 不明。 | 使用不可。 | - -## worker で使用できる API - -| 関数 | 機能 | Gecko（Firefox）のサポート状況 | IE のサポート状況 | Blink（Chrome と Opera） のサポート状況 | WebKit（Safari） のサポート状況 | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------- | -| {{domxref("Broadcast_Channel_API","Broadcast Channel API")}} | 同じ {{glossary("origin", "オリジン")}}（通常は同じサイトのページ）で {{glossary("browsing context", "ブラウジングコンテキスト")}}（_window_ 、 _tab_、*frame、*あるいは*iframe*）間の単純な通信ができる。 | {{ CompatGeckoDesktop(38)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | -| {{domxref("Cache", "Cache")}} | Cache API は現在のオリジンと関連付けられたキャッシュストレージをプログラムで制御する機能を提供する。 | {{CompatVersionUnknown}} | {{CompatNo}} | {{ CompatChrome(43) }} | {{CompatUnknown}} | -| {{domxref("Channel_Messaging_API", "Channel Messaging API")}} | 同じ document に添付されている異なるブラウジングコンテキスト（たとえば、2 つの iFrame、あるいはメインの document と iFrame、{{domxref("SharedWorker")}} を介した 2 つの document 、あるいは 2 つの worker ）にて、2 つの別々のスクリプトが 2 つのポートを介して 直接通信できる。 | {{ CompatGeckoDesktop(41)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | -| {{domxref("Console", "Console API")}} | ブラウザーのデバッグコンソールへのアクセスを提供する（たとえば、Firefox の [Web コンソール](/ja/docs/Tools/Web_Console)）。どのように動作するかの詳細はブラウザーごとに異なるが、一般的に提供されている機能セットの*デファクト*である。 | {{ CompatGeckoDesktop(38)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | -| {{domxref("CustomEvent")}} | **`CustomEvent`** インターフェースは、あらゆる用途でアプリケーションによって初期化されるイベントを表す。 | {{ CompatGeckoDesktop(48)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | -| {{domxref("Data_Store_API", "Data Store")}} | 複数の Firefox OS アプリケーションで、素早く効率的かつセキュアな相互のデータの保存や共有を行うための強力で柔軟なストレージ機構。 | v1.0.1 から、Firefox OS 内部（認定の通った）アプリケーションのみ。 | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | -| {{domxref("DOMRequest")}} と {{domxref("DOMCursor")}} | それぞれ、これらのオブジェクトは進行中の操作と（たとえば、成功時や失敗時の操作に反応するリスナを使って）、結果リストを跨いだ進行中の操作を表す。 | {{ CompatGeckoDesktop(41)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | -| {{domxref("Fetch_API", "Fetch")}} | Fetch 仕様はリソースを取得について、最新定義と、取得用の API （たとえば、ネットワーク経由で）を提供する。 | 多くは{{ CompatGeckoDesktop(34)}} に（設定が必要）、いくつかの機能はそれ以降で。 | {{CompatNo}} | {{ CompatChrome(42) }} {{ CompatChrome(41) }} 設定が必要 | {{CompatNo}} | -| {{domxref("FileReader")}} | この API では、 {{domxref("Blob")}} と {{domxref("File")}} オブジェクトの非同期読み取りが可能。 | {{CompatGeckoDesktop(46)}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatNo}} | -| {{domxref("FileReaderSync")}} | この API では、{{domxref("Blob")}} と {{domxref("File")}} オブジェクトの同期読み取りが可能。worker 内でのみ実行可能な API。 | {{CompatGeckoDesktop(8)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | -| {{domxref("FormData")}} | `FormData` オブジェクトは、XMLHttpRequest [`send()`]( "XMLHttpRequest#send()") メソッドを使用して送信できる Form フィールドとその値を表す key/value ペアのセットを簡単に構築する方法を提供する。 | {{CompatUnknown}} （{{CompatGeckoDesktop(39)}} で実装されているはずである） | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | -| {{domxref("ImageData")}} | {{domxref("canvas")}} 要素の領域の下にあるピクセルデータ。このデータ操作は、Web Worker に委任したほうが適しているような、複雑な処理になりうる。 | {{CompatGeckoDesktop(25)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | -| {{domxref("IndexedDB_API", "IndexedDB")}} | シンプルな値と階層的なオブジェクトを保持するレコードを保存するデータベース。 | {{CompatGeckoDesktop(37)}}, {{domxref("IDBCursorWithValue")}} は {{CompatGeckoDesktop(42)}} から。 | 10.0 | {{CompatVersionUnknown}} | {{CompatNo}} | -| [Network Information API](/ja/docs/Web/API/Network_Information_API) | システムの接続についての情報を汎用的な接続タイプ(例えば 'wifi', 'cellular' など)の用語で提供する。 | {{CompatGeckoMobile(53)}} モバイルのみ | {{CompatVersionUnknown}} モバイルのみ | {{CompatNo}} | {{CompatNo}} | -| {{domxref("Notifications_API", "Notifications")}} | Web ページがエンドユーザーへのシステム通知の表示を制御できるようにする。 | {{CompatGeckoDesktop(41)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | -| {{domxref("Performance")}} | **`Performance`** インターフェースは、指定されたページのタイミング関連のパフォーマンス情報を表す。 | {{ CompatGeckoDesktop("34.0") }} | {{CompatUnknown}} | {{ CompatChrome("33.0") }} | {{CompatUnknown}} | -| {{domxref("PerformanceEntry")}}, {{domxref("PerformanceMeasure")}}, {{domxref("PerformanceMark")}}, {{domxref("PerformanceObserver")}}, {{domxref("PerformanceResourceTiming")}} | アプリケーションのネットワークの性能についていくつかの面から詳細なデータを獲得、分析することを可能にする。 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | -| {{jsxref("Promise")}} | 非同期関数を記述できる JavaScript オブジェクト。 | {{CompatGeckoDesktop(28)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | -| [Server-sent events](/ja/docs/Web/API/Server-sent_events) | サーバーから、接続が開いた後に、あらゆる箇所のウェブページにデータをプッシュさせる。 | {{CompatGeckoDesktop(53)}} (今のところ専用 worker と共有 worker でのみ有効; service worker では無効) | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} | -| {{domxref("ServiceWorkerRegistration")}} | 標準 worker の内部から service worker を登録して、関連する機能を使用できる。 | {{CompatGeckoDesktop(40)}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatNo}} | -| {{domxref("TextEncoder")}} と {{domxref("TextDecoder")}} | 特定のエンコーディングに エンコード、またはでコードできる新しい {{domxref("TextEncoder")}} や {{domxref("TextDecoder")}} を生成して返す。 | {{CompatGeckoDesktop(20)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | -| {{ domxref("URL") }} | Worker にアクセスできる {{domxref("Blob")}} とともに [URL.createObjectURL](/ja/docs/DOM/window.URL.createObjectURL) と [URL.revokeObjectURL](/ja/docs/DOM/window.URL.revokeObjectURL) 静的メソッドを使用できる。 Worker は {{domxref("URL.URL", "URL()")}} コンストラクタを使用して新しい URL を生成し、返されたオブジェクトの通常のメソッドを呼び出せる。 | {{CompatGeckoDesktop(21)}}。URL() コンストラクタは {{CompatGeckoDesktop(26)}} から。 | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | -| {{domxref("OffscreenCanvas")}} の [WebGL](/ja/docs/Web/API/WebGL_API) | WebGL（Web グラフィックライブラリ）は、プラグインを使用せずにブラウザー互換性を保ちながらインタラクティブな 3D と 2D レンダリングができる JavaScript API である。 | {{CompatGeckoDesktop(44)}}（設定で有効化する）。`about:config` で、`gfx.offscreencanvas.enabled` を true に設定する。 | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | -| {{domxref("WebSocket")}} | 新しい {{domxref("WebSocket")}} オブジェクトを生成して返す。これは標準の `WebSocket()` コンストラクタの動作を模倣する。 | {{CompatGeckoDesktop(37)}} | 11.0 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | -| {{domxref("Worker")}} | 新しい {{ domxref("Worker") }} を生成する。worker はより多くの worker を生成できる。 | {{CompatGeckoDesktop("1.9.1")}} | 10.0 | {{CompatNo}} [crbug.com/31666](https://code.google.com/p/chromium/issues/detail?id=31666) を見てください。 | {{CompatNo}} | -| {{domxref("WorkerGlobalScope")}} | グローバルスコープの worker。このオブジェクトは [Worker 特有の関数](#workerscope)を定義する。 | {{CompatVersionUnknown}} | 10.0 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | -| {{domxref("WorkerLocation")}} | worker で使用可能な {{domxref("Location")}} インターフェースのサブセット。 | {{CompatGeckoDesktop(1.9.2)}} | 10.0 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | -| {{domxref("WorkerNavigator")}} | worker で使用可能な {{domxref("Navigator")}} インターフェースのサブセット。 | 基本実装 {{CompatVersionUnknown}} {{domxref("NavigatorID.appCodeName", "appCodeName")}}、{{domxref("NavigatorID.product", "product")}}、{{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}：{{CompatGeckoDesktop(28)}} {{domxref("WorkerNavigator.onLine", "onLine")}}：{{CompatGeckoDesktop(29)}} {{domxref("NavigatorLanguage")}}: {{CompatVersionUnknown}} | {{domxref("NavigatorID.appName", "appName")}}、{{domxref("NavigatorID.appVersion", "appVersion")}}、{{domxref("WorkerNavigator.onLine", "onLine")}}、{{domxref("NavigatorID.platform", "platform")}}、{{domxref("NavigatorID.userAgent", "userAgent")}}： 10.0 Other： {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | -| {{domxref("XMLHttpRequest")}} | 新しい {{domxref("XMLHttpRequest")}} オブジェクトを生成して返す。これは標準の `XMLHttpRequest()` コンストラクタの動作を模倣する。`XMLHttpRequest` の `responseXML` と `channel` 属性は常に `null` を返すことに注意。 | 基本： {{CompatGeckoDesktop("1.9.1")}}{{domxref("XMLHttpRequest.response", "response")}} と {{domxref("XMLHttpRequest.responseType", "responseType")}} は、{{CompatGeckoDesktop("10")}} から使用可能。{{domxref("XMLHttpRequest.timeout", "timeout")}} と {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} は、{{CompatGeckoDesktop("13")}} から使用可能。 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | - -## 関連項目 - -- [web worker を使用する](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) + +{{DefaultAPISidebar("Web Workers API") }} + +標準的な [JavaScript](/ja/docs/Web/JavaScript) の関数群（{{jsxref("String")}}、{{jsxref("Array")}}、{{jsxref("Object")}}、{{jsxref("JSON")}} など）に加えて、DOM からワーカーに利用できる様々な関数があります。この記事ではそれらの機能のリストを提供します。 + +## ワーカーのコンテキストと関数 + +**ワーカーは、現在のウィンドウとは異なるグローバルコンテキストで実行されます。** {{domxref("Window")}} はワーカーでは直接使用することができませんが、共通のミックスイン (`WindowOrWorkerGlobalScope`) で定義されている同じメソッドの多くが利用でき、 {{domxref("WorkerGlobalScope")}} から派生した以下のようなコンテキストからワーカーが利用できます。 + +- {{domxref("DedicatedWorkerGlobalScope")}} （専用ワーカー向け） +- {{domxref("SharedWorkerGlobalScope")}} （共有ワーカー向け） +- {{domxref("ServiceWorkerGlobalScope")}} （[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)向け） + +すべてのワーカーとメインスレッドで共通の関数には（`WindowOrWorkerGlobalScope` にあるもの）には、 {{domxref("atob", "atob()")}}, {{domxref("btoa", "btoa()")}}, {{domxref("clearInterval", "clearInterval()")}}, {{domxref("clearTimeout()")}}, {{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}, {{domxref("setInterval()")}}, {{domxref("setTimeout()")}} などがあります。 + +以下の機能は、ワーカーで**のみ**使用することができます。 + +- {{domxref("WorkerGlobalScope.importScripts", "WorkerGlobalScope.importScripts()")}} （すべてのワーカー） +- {{domxref("DedicatedWorkerGlobalScope.postMessage")}} （専用ワーカーのみ） + +## ワーカーで使用できる API + +> **Note:** 掲載されている API に特定のバージョンのプラットフォームが対応している場合、一般にウェブワーカーで動作するとみなすことができます。 + +以下の Web API はワーカーで利用することができます。 {{domxref("Broadcast_Channel_API","Broadcast Channel API")}}, {{domxref("Cache", "Cache API")}}, {{domxref("Channel_Messaging_API", "Channel Messaging API")}}, {{domxref("Console API", "Console API")}}, {{domxref("Crypto")}}, {{domxref("CustomEvent")}}, `DOMRequest` と `DOMCursor`, {{domxref("Fetch_API", "Fetch")}}, {{domxref("FileReader")}}, {{domxref("FileReaderSync")}} (only works in workers!), {{domxref("FormData")}}, {{domxref("ImageData")}}, {{domxref("IndexedDB_API", "IndexedDB")}}, [ネットワーク情報 API](/ja/docs/Web/API/Network_Information_API), {{domxref("Notifications_API", "通知", "", 1)}}, {{domxref("Performance")}}, {{domxref("PerformanceEntry")}}, {{domxref("PerformanceMeasure")}}, {{domxref("PerformanceMark")}}, {{domxref("PerformanceObserver")}}, {{domxref("PerformanceResourceTiming")}}, {{jsxref("Promise")}}, [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events), {{domxref("ServiceWorkerRegistration")}}, {{domxref("TextEncoder")}} と {{domxref("TextDecoder")}}, {{ domxref("URL") }}, [WebGL](/ja/docs/Web/API/WebGL_API) と {{domxref("OffscreenCanvas")}}, {{domxref("WebSocket")}}, {{domxref("XMLHttpRequest")}} （ただし `responseXML` および `channel` 属性は常に null）。 + +ワーカーは他のワーカーを起動することもできるため、 {{domxref("Worker")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("WorkerLocation")}}, {{domxref("WorkerNavigator")}} の各 API も利用することができます。 + +## 関連情報 + +- [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) - {{domxref("Worker")}} diff --git a/files/ja/web/api/web_workers_api/index.md b/files/ja/web/api/web_workers_api/index.md index 23517e5d1f5f2..4aed4a153fa38 100644 --- a/files/ja/web/api/web_workers_api/index.md +++ b/files/ja/web/api/web_workers_api/index.md @@ -1,70 +1,91 @@ --- -title: Web Workers API +title: ウェブワーカー API slug: Web/API/Web_Workers_API +l10n: + sourceCommit: 6fefcdd237a377af5c066dc2734c118feadbbef9 --- + {{DefaultAPISidebar("Web Workers API")}} -**Web Worker** とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。 +**ウェブワーカー** (Web Worker) とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。 + +## ウェブワーカーの概念と使い方 + +ワーカーオブジェクトはコンストラクター（{{DOMxRef("Worker.Worker", "Worker()")}} など）を用いて生成され、名前を持つ JavaScript ファイルを実行します。このファイルにはワーカースレッドで実行されるコードが書かれています。 + +ワーカースレッドの中では、 [JavaScript](/ja/docs/Web/JavaScript) の標準の一連の関数（[`String`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String)、[`Array`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)、[`Object`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object)、[`JSON`](/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON)、など）に加え、任意のコードのほとんどを実行することができます。いくつかの例外があります。例えば、ワーカー内から直接 DOM を操作することはできません。また、 [`window`](/ja/docs/Web/API/Window) オブジェクトの既定のメソッドやプロパティには使用できないものがあります。実行できるコードについては、以下の[ワーカーグローバルコンテキストと関数](#ワーカーグローバルコンテキストと関数)や[利用可能な Web API](#利用可能な_web_api) を参照してください。 + +ワーカーとメインスレッドとの間では、メッセージのシステムを通してデータがやり取りされます。両者は `postMessage()` メソッドを使ってメッセージを送信したり、受け取ったメッセージには `onmessage` イベントハンドラーで返信したりします（メッセージは{{domxref("Worker/message_event", "メッセージ")}}イベントの `data` 属性に格納されます）。なお、データは共有されるのではなく複製されます。 + +ワーカーが親ページと同じ{{glossary("origin", "オリジン")}}内でホスティングされるのであれば、新しいワーカーをいくつも起動することができます。また、ワーカーはネットワーク I/O において [`XMLHttpRequest`](/ja/docs/Web/API/XMLHttpRequest) を使用しますが、 `XMLHttpRequest` における `responseXML` および `channel` 属性は必ず `null` を返す点が通常と異なります。 + +### ワーカーの種類 + +ワーカーにはいくつもの種類があります。 + +- 専用ワーカー (dedicated worker) は、単一のスクリプトで利用されるワーカーです。このコンテキストは {{DOMxRef("DedicatedWorkerGlobalScope")}} オブジェクトで表現されます。 +- {{DOMxRef("SharedWorker","共有ワーカー", "", 1)}} (shared worker) は、ワーカーと同じドメイン内にある限り、異なるウィンドウや iframe などで動作する複数のスクリプトで利用できるワーカーです。専用ワーカーよりも少し複雑で、スクリプトはアクティブなポートを介して通信する必要があります。 +- [サービスワーカー](/ja/docs/Web/API/Service_Worker_API)は、基本的に複数のウェブアプリケーション間やブラウザー、（利用可能なら）ネットワークの間でプロキシーサーバーとして動くものです。他にも、効果的なオフライン操作を実現したり、ネットワークリクエストを遮断してネットワークが利用できるかどうかで適切なアクションを取ったり、サーバーにある資産を更新したりすることなどを目的としています。また、プッシュ通知やバックグラウンド同期APIへのアクセスも可能になる予定です。 + +> **Note:** [Web workers 仕様書](https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2)によれば、ワーカーのエラーイベントはバブリングすべきではありません（{{bug(1188141)}} を参照。これは Firefox 42 で実装されました）。 + +### ワーカーグローバルコンテキストと関数 + +ワーカーは現在の {{DOMxRef("window")}} とは異なるグローバルなコンテキストで実行されます。 {{domxref("Window")}} はワーカーから直接利用できませんが、同じメソッドの多くは共有されるミックスイン (`WindowOrWorkerGlobalScope`) で定義され、各自の {{domxref("WorkerGlobalScope")}} から派生したコンテキストを通じてワーカーが利用できるようにします。 -## Web Worker の概念と使い方 +- {{domxref("DedicatedWorkerGlobalScope")}} （専用ワーカー向け） +- {{domxref("SharedWorkerGlobalScope")}} （共有ワーカー向け） +- {{domxref("ServiceWorkerGlobalScope")}} （[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)向け） -{{DOMxRef("Worker")}} オブジェクトは {{DOMxRef("Worker.Worker", "Worker()")}} などのコンストラクターで生成されるオブジェクトで、名前を持つ JavaScript ファイルを実行します。 Worker のスレッドで実行されるコードはこのファイルに書かれており、今いる {{DOMxRef("window")}} とは別のグローバルなコンテキストの中で Worker がコードを実行します。Dedicated Worker (専用ワーカー) の場合、そのコンテキストは {{DOMxRef("DedicatedWorkerGlobalScope")}} オブジェクトで表現されます (通常の Worker は単一のスクリプトで使用されますが、 Worker を共有する際は {{DOMxRef("SharedWorkerGlobalScope")}} を使用します)。 +すべてのワーカーとメインスレッドで共通の関数（`WindowOrWorkerGlobalScope` からのもの）には、{{domxref("atob", "atob()")}}、{{domxref("btoa", "btoa()")}}、{{domxref("clearInterval", "clearInterval()")}}、{{domxref("clearTimeout()")}}、{{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}、{{domxref("setInterval()")}}、{{domxref("setTimeout()")}} などがあります。 -Worker のスレッドではあらゆるコードを実行できますが、いくつか例外があります。例えば、 Worker から DOM を直接操作することは出来ません。また、 {{DOMxRef("window")}} にデフォルトで用意されているメソッドやプロパティには Worker から使用できないものもあります。しかし、 [WebSockets](/ja/docs/Web/API/WebSockets_API) や [IndexedDB](/ja/docs/Web/API/IndexedDB_API) のようなデータストレージに加え、 Firefox OS における [Data Store API](/ja/docs/Web/API/Data_Store_API) など、 `window` に含まれていても使用できるものは数多くあります。詳しくは [Worker から使用できる関数とクラス](/ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers) を参照してください。 +以下の関数はワーカーでのみ利用することができます。 -Worker とメインスレッドとの間では、メッセージのシステムを通してデータがやり取りされます。両者は `postMessage()` メソッドを使ってメッセージを送信し、受け取ったメッセージには `onmessage` イベントハンドラーで返信します (メッセージは {{Event("Message")}} イベントの `data` 属性に格納されます)。なお、送信したデータは受取先でコピーされます (共有ではありません)。 +- {{domxref("WorkerGlobalScope.importScripts", "WorkerGlobalScope.importScripts()")}} （すべてのワーカー） +- {{domxref("DedicatedWorkerGlobalScope.postMessage")}} （専用ワーカーのみ） -メインスレッドのページと同じオリジンであれば、 Web Workers は新しい Worker をいくつでも生成できます。また、 Worker はネットワーク I/O において [`XMLHttpRequest`](/ja/docs/Web/API/XMLHttpRequest) を使用しますが、 `XMLHttpRequest` における `responseXML` と `channel` 属性は必ず `null` を返す点で通常と異なります。 +### 利用可能な Web API -Dedicated Worker の他にも、 Worker の種類には以下のようなものがあります。 +> **Note:** 掲載されている API が特定のバージョンのプラットフォームで対応している場合、一般的にウェブワーカーでも利用可能とみなされます。また、 を使用して特定のオブジェクト/関数の 対応をテストすることもできます。 -- Shared Worker (共有ワーカー) は、 iframe などの異なる window で実行されている複数のスクリプトから利用できる Worker です。それらのスクリプトと Worker は同じドメイン内にある必要があります。スクリプトどうしがアクティブなポートで通信しなければならないので、 Dedicated Worker よりも少し複雑です。詳しくは {{DOMxRef("SharedWorker")}} を参照してください。 -- [ServiceWorker](/ja/docs/Web/API/ServiceWorker_API) は、複数のウェブアプリケーション間やブラウザ、 (利用可能なら) ネットワークとの間でプロキシサーバーとして動くものです。他の Worker とは異なり、 Service Worker はオフラインでのユーザーエクスペリエンスを実現するために設計されています。ネットワークへのリクエストに割り込み、オンライン・オフラインそれぞれの場合に適した結果をユーザに返します。また、サーバ上のリソースの更新も担います。 Service Worker を使うことで、プッシュ通知やバックグラウンド同期の API も利用可能になります。 -- Chrome Worker は Firefox 上でのみ使える Worker です。アドオンの開発時、拡張機能で Web Workers を使いたいとき、または Worker の中で [js-ctypes](/ja/js-ctypes) を使いたいときに用いることが出来ます。詳しくは {{DOMxRef("ChromeWorker")}} を参照してください。 -- [Audio Worker](/ja/docs/Web/API/Web_Audio_API#Audio_Workers) は、音声処理を Worker のコンテキスト内でスクリプトで直接実行する能力を提供します。 +ワーカーで利用可能な Web APIは、{{domxref("Barcode_Detection_API","バーコード検出 API", "", 1)}}、{{domxref("Broadcast_Channel_API","放送チャンネル API", "", 1)}}、{{domxref("Cache", "キャッシュ API", "", 1)}}、{{domxref("Channel_Messaging_API", "チャンネルメッセージ API", "", 1)}}、{{domxref("Console API", "コンソール API", "", 1)}}, [ウェブ暗号化 API](/ja/docs/Web/API/Web_Crypto_API) ({{domxref("Crypto")}})、{{domxref("CustomEvent")}}、{{domxref("Encoding_API", "エンコーディング API", "", 1)}} ({{domxref("TextEncoder")}}、{{domxref("TextDecoder")}}、など）、{{domxref("Fetch_API", "フェッチ API", "", 1)}}、{{domxref("FileReader")}}、{{domxref("FileReaderSync")}} （ワーカーでのみ動作）、{{domxref("FormData")}}、{{domxref("ImageData")}}、{{domxref("IndexedDB_API", "IndexedDB")}}, [ネットワーク情報 API](/ja/docs/Web/API/Network_Information_API), {{domxref("Notifications_API", "通知 API", "", 1)}}、{{domxref("Performance_API","パフォーマンス API", "", 1)}} （{{domxref("Performance")}}、{{domxref("PerformanceEntry")}}、{{domxref("PerformanceMeasure")}}、{{domxref("PerformanceMark")}}、{{domxref("PerformanceObserver")}}、{{domxref("PerformanceResourceTiming")}}、など)、{{jsxref("Promise")}}、[サーバー送信イベント](/ja/docs/Web/API/Server-sent_events)、{{domxref("ServiceWorkerRegistration")}}、{{ domxref("URL_API","URL API", "", 1) }} （{{ domxref("URL")}} など)、[WebGL](/ja/docs/Web/API/WebGL_API) （{{domxref("OffscreenCanvas")}} による）、{{domxref("WebSocket")}}、{{domxref("XMLHttpRequest")}} です。 -> **Note:** **メモ**: [Web Worker の仕様](https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2)にあるように、Worker のエラーイベントはバブルするべきではありません (see {{bug(1188141)}}。これは Firefox 42 で実装されました。 +ワーカーは他のワーカーを起動することができ、そのために {{domxref("Worker")}}、{{domxref("WorkerGlobalScope")}}、{{domxref("WorkerLocation")}}、{{domxref("WorkerNavigator")}} も利用可能です。 -## Web Worker インターフェイス +## ウェブワーカーのインターフェイス -- {{DOMxRef("AbstractWorker")}} - - : {{DOMxRef("Worker")}} や {{DOMxRef("SharedWorker")}} など、すべての Worker に共通な抽象オブジェクトです。 - {{DOMxRef("Worker")}} - - : 実行している Worker のスレッドを表します。実行している Worker のコードへメッセージを送る際に用います。 + - : 実行しているワーカーのスレッドを表します。実行しているワーカーのコードへメッセージを送る際に用います。 - {{DOMxRef("WorkerLocation")}} - - : {{DOMxRef("Worker")}} で実行されるスクリプトの絶対位置を定義します。 + - : {{domxref("Worker")}} で実行されるスクリプトの絶対位置を定義します。 - {{DOMxRef("SharedWorker")}} - - : 複数のウィンドウ、 iframe、ワーカーなどいくつかの{{glossary("browsing context", "閲覧コンテキスト")}}から「アクセス可能な」具体的な種類の Worker を表します。 + - : 複数の{{glossary("browsing context", "閲覧コンテキスト")}}（すなわちウィンドウ、タブ、iframe）や他のワーカーからアクセス可能な特定の種類のワーカーを表します。 - {{DOMxRef("WorkerGlobalScope")}} - - : {{DOMxRef("Window")}} のように通常のウェブコンテンツと同じ動作をする Worker の一般的なスコープを表します。これと異なる種類の Worker は、このインタフェースに独自の機能をいくつか加えたスコープを持ちます。 + - : あらゆるワーカーの一般的なスコープを表します（通常のウェブコンテンツに対して {{DOMxRef("Window")}} が行うのと同じ役割をします）。それぞれの種類のワーカーには、このインターフェイスを継承し、より具体的な機能を追加したスコープオブジェクトがあります。 - {{DOMxRef("DedicatedWorkerGlobalScope")}} - - : Dedicated Worker のスコープを表します。 {{DOMxRef("WorkerGlobalScope")}} を継承しており、独自の機能がいくつか加えられています。 + - : 専用ワーカーのスコープを表します。 {{DOMxRef("WorkerGlobalScope")}} を継承しており、独自の機能がいくつか加えられています。 - {{DOMxRef("SharedWorkerGlobalScope")}} - - : Shared Worker のスコープを表します。 {{DOMxRef("WorkerGlobalScope")}} を継承しており、独自の機能がいくつか加えられています。 + - : 共有ワーカーのスコープを表します。 {{DOMxRef("WorkerGlobalScope")}} を継承しており、独自の機能がいくつか加えられています。 - {{DOMxRef("WorkerNavigator")}} - - : ユーザエージェント (クライアント) に関する識別名と状態を表します。 + - : ユーザーエージェント（クライアント）に関する識別名と状態を表します。 ## 例 簡単なデモと基本的な使い方は以下を参照してください。 -- [Basic dedicated worker example](https://github.com/mdn/simple-web-worker) ([run dedicated worker](http://mdn.github.io/simple-web-worker/)). -- [Basic shared worker example](https://github.com/mdn/simple-shared-worker) ([run shared worker](http://mdn.github.io/simple-shared-worker/)). +- [基本的な専用ワーカーの例](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-web-worker)（[専用ワーカーを実行](https://mdn.github.io/dom-examples/web-workers/simple-web-worker/)） +- [基本的な共有ワーカーの例](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-shared-worker)（[共有ワーカーを実行](https://mdn.github.io/dom-examples/web-workers/simple-shared-worker/)） +- [OffscreenCanvas ワーカーの例](https://github.com/mdn/dom-examples/tree/main/web-workers/offscreen-canvas-worker)（[OffscreenCanvas ワーカーを実行](https://mdn.github.io/dom-examples/web-workers/offscreen-canvas-worker/)） -このデモの動く仕組みを詳しく知りたい場合は [Web Worker を使用する](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)を参照してください。 +これらのデモの動く仕組みを詳しく知りたい場合は。[ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)を参照してください。 -## 仕様 +## 仕様書 -| 仕様書 | 状態 | 備考 | -| ---------------------------------------------------------------------------------------- | -------------------------------- | -------- | -| {{SpecName("HTML WHATWG", "workers.html#workers", "Web Workers")}} | {{Spec2("HTML WHATWG")}} | 初回定義 | +{{Specifications}} -## あわせて参照 +## 関連情報 -- [Web Worker を使用する](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) -- [Worker インターフェイス](/ja/docs/Web/API/Worker) -- [SharedWorker インターフェイス](/ja/docs/Web/API/SharedWorker) -- [ServiceWorker API](/ja/docs/Web/API/ServiceWorker_API) -- [Web Workers が使用できる関数とクラス](/ja/docs/Web/API/Worker/Functions_and_classes_available_to_workers) -- [Web Worker を使用する](/ja/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples) -- [ChromeWorker](/ja/docs/Web/API/ChromeWorker): Worker の特権/クロームコードでの使用 +- [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) +- {{domxref("Worker")}} インターフェイス +- {{domxref("SharedWorker")}} インターフェイス +- [サービスワーカー API](/ja/docs/Web/API/Service_Worker_API) diff --git a/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.md b/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.md index 93bd6bee5dfa3..e4f0cc3fabf19 100644 --- a/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.md +++ b/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.md @@ -1,47 +1,128 @@ --- title: 構造化複製アルゴリズム slug: Web/API/Web_Workers_API/Structured_clone_algorithm +l10n: + sourceCommit: 0be2158a250dc07932891157dad8341d90a44930 --- -**構造化複製アルゴリズム** は複雑な JavaScript オブジェクトをコピーするためのアルゴリズムです。これは {{domxref("Worker.postMessage()", "postMessage()")}} を介して [Worker](/ja/docs/Web/API/Worker) と送受信するとき、[IndexedDB](/ja/docs/Glossary/IndexedDB) にオブジェクトを格納するとき、[他の API](/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm$edit#See_Also) のためにオブジェクトをコピーするときなど、データ転送時に内部で用いられています。無限ループを避けるため、以前にアクセスした参照のマップを保持しながら、入力オブジェクトを再帰処理することで複製していきます。 +{{DefaultAPISidebar("Web Workers API") }} + +**構造化複製アルゴリズム** は複雑な JavaScript オブジェクトをコピーするためのアルゴリズムです。これは {{domxref("Worker.postMessage()", "postMessage()")}} を介して[ワーカー](/ja/docs/Web/API/Worker)と送受信するとき、 [IndexedDB](/ja/docs/Glossary/IndexedDB) にオブジェクトを格納するとき、[他の API](#関連情報) のためにオブジェクトをコピーするときなど、データ転送時に内部で用いられています。 + +無限ループを避けるため、以前にアクセスした参照のマップを保持しながら、入力オブジェクトを再帰処理することで複製していきます。 ## 構造化複製で動作しないもの -- [`Function`](/ja/JavaScript/Reference/Global_Objects/Function) オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると `DATA_CLONE_ERR` 例外が送出されます。 -- DOM ノードを複製するときも同様に `DATA_CLONE_ERR` 例外が送出されます。 -- 以下に挙げるオブジェクトのパラメーターは保持されません。 +- {{jsxref("Function")}} オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると `DataCloneError` 例外が発生します。 +- DOM ノードを複製するときも同様に `DataCloneError` 例外発生します。 +- 一部のオブジェクトのプロパティは保持されません。 - - [`RegExp`](/ja/JavaScript/Reference/Global_Objects/RegExp) オブジェクトの `lastIndex` フィールドは保持されません。 - - プロパティ記述子、セッター、ゲッター (もしくは同様のメタデータ系機能) は複製されません。たとえば、オブジェクトに [プロパティ記述子](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) を使用して読み取り専用にしている場合でも、複製したものではデフォルトの条件である読み取り/書き込みに変わります。 + - {{jsxref("RegExp")}} オブジェクトの `lastIndex` フィールドは保持されません。 + - プロパティ記述子、セッター、ゲッター（もしくは同様のメタデータ系機能）は複製されません。 + たとえば、あるオブジェクトが[プロパティ記述子](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor)によって読み取り専用になっている場合でも、複製したものでは既定の条件である読み取り/書き込みに変わります。 - プロトタイプチェーンは探索、複製されません。 -> **Note:** **メモ**: ネイティブの [`Error`](/ja/JavaScript/Reference/Global_Objects/Error) 型は Chrome では複製できます。Firefox は [対応中](https://bugzilla.mozilla.org/show_bug.cgi?id=1556604) です。 - -## サポート済みの型 - -| オブジェクトの型 | 備考 | -| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | -| [すべてのプリミティブ型](/ja/docs/Web/JavaScript/Data_structures#Primitive_values) | symbol を除く | -| [Boolean](/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean) オブジェクト | | -| [String](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/String) オブジェクト | | -| [Date](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) | | -| [RegExp](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp) | `lastIndex` フィールドは保持されません。 | -| {{ domxref("Blob") }} | | -| {{ domxref("File") }} | | -| {{ domxref("FileList") }} | | -| [ArrayBuffer](/ja/docs/Web/API/ArrayBuffer) | | -| [ArrayBufferView](/ja/docs/Web/API/ArrayBufferView) | 他の [型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) を含む | -| {{ domxref("ImageBitmap") }} | | -| {{ domxref("ImageData") }} | | -| [Array](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array) | | -| [Object](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object) | これはプレーンオブジェクト (オブジェクトリテラルなど) **のみ** を含みます | -| [Map](/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) | | -| [Set](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) | | +## 対応済みの型 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
オブジェクト型備考
+ すべてのプリミティブ型 + ただし、シンボルを除く
{{jsxref("Boolean")}} オブジェクト
{{jsxref("String")}} オブジェクト
{{jsxref("Date")}}
{{jsxref("RegExp")}}lastIndex は保持されません。
{{domxref("Blob")}}
{{domxref("File")}}
{{domxref("FileList")}}
{{jsxref("ArrayBuffer")}}
{{jsxref("TypedArray")}}
{{jsxref("DataView")}}
{{domxref("ImageBitmap")}}
{{domxref("ImageData")}}
{{jsxref("Array")}}
{{jsxref("Object")}}プレーンなオブジェクト（オブジェクトリテラルなど）のみです。
{{jsxref("Map")}}
{{jsxref("Set")}}
{{domxref("DOMException")}}ブラウザーは、プロパティ {{domxref("DOMException.name", "name")}} と {{domxref("DOMException.message", "message")}} をシリアライズしなければなりません。 + 他の属性もシリアライズ/複製することができます。
ネイティブの Error 型 +

エラー名は、 {{jsxref("Error")}}, {{JSxRef("EvalError")}}, {{JSxRef("RangeError")}}, {{JSxRef("ReferenceError")}}, {{JSxRef("SyntaxError")}}, {{JSxRef("TypeError")}}, {{JSxRef("URIError")}} （または "Error" に設定）の何れかでなければなりません。

+

ブラウザーは name および message プロパティをシリアライズしなければならず、 stack, cause などのエラーの他の「興味深い」プロパティをシリアライズすることが期待されています。

+

{{JSxRef("AggregateError")}} の対応が whatwg/html#5749 で仕様書に追加される予定です（そして、既に一部のブラウザーが対応しています）。

+
## 関連情報 -- [HTML Specification: Safe passing of structured data](http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data) -- {{ domxref("window.history") }} -- {{ domxref("window.postMessage()") }} -- [Web Workers](/ja/docs/Web/API/Web_Workers_API) +- [HTML Specification: Safe passing of structured data](https://html.spec.whatwg.org/multipage/infrastructure.html#safe-passing-of-structured-data) +- {{Glossary("Transferable objects")}} +- {{domxref("structuredClone()")}} +- {{domxref("window.history")}} +- {{domxref("window.postMessage()")}} +- [ウェブワーカー](/ja/docs/Web/API/Web_Workers_API) - [IndexedDB](/ja/docs/Web/API/IndexedDB_API) -- [Components.utils.cloneInto](/ja/docs/Components.utils.cloneInto) diff --git a/files/ja/web/api/web_workers_api/using_web_workers/index.md b/files/ja/web/api/web_workers_api/using_web_workers/index.md index 41d1b54b594f6..ca1bcdb5fb55d 100644 --- a/files/ja/web/api/web_workers_api/using_web_workers/index.md +++ b/files/ja/web/api/web_workers_api/using_web_workers/index.md @@ -1,62 +1,64 @@ --- -title: Web Worker の使用 +title: ウェブワーカーの使用 slug: Web/API/Web_Workers_API/Using_web_workers +l10n: + sourceCommit: 6fefcdd237a377af5c066dc2734c118feadbbef9 --- {{DefaultAPISidebar("Web Workers API")}} -Web Worker は、ウェブコンテンツがスクリプトをバックグラウンドのスレッドで実行するためのシンプルな手段です。ワーカースレッドは、ユーザーインターフェイスを妨げることなくタスクを実行できます。加えて、 [`XMLHttpRequest`](/ja/docs/Web/API/XMLHttpRequest) (`responseXML` 属性や `channel` 属性は常に null ですが) または [`fetch`](/ja/docs/Web/API/Fetch_API) (そのような制約なし) を使用して入出力を行うこともできます。生成されたワーカーは、オリジンが指定したイベントンドラーへメッセージを送ることにより、ウィンドウ ript コードワーカーその逆も可能です)。本記事では、 Web Worker の使い方を詳しく紹介します。 +ウェブワーカーは、ウェブコンテンツがスクリプトをバックグラウンドのスレッドで実行するためのシンプルな手段です。ワーカースレッドは、ユーザーインターフェイスを妨げることなくタスクを実行できます。加えて、 [`XMLHttpRequest`](/ja/docs/Web/API/XMLHttpRequest) （`responseXML` 属性や `channel` 属性は常に null ですが）または [`fetch`](/ja/docs/Web/API/Fetch_API) （そのような制約なし）を使用して入出力を行うこともできます。ワーカーが生成されると、それを作成した JavaScript コードが指定するイベントハンドラーにメッセージを投稿することで、そのコードにメッセージを送ることができます（逆も同様）。 -## Web Worker API +この記事では、ウェブワーカーを使用するための詳しい紹介をしています。 -ワーカーはコンストラクター (例えば {{domxref("Worker.Worker", "Worker()")}}) を使用して生成されるオブジェクトであり、名前付きの JavaScript ファイル (このファイルはワーカースレッドで実行するコードを持ちます) を実行します。またワーカーは、現在の {{domxref("window")}} とは異なるグローバルコンテキストで実行されます。従って、 {{domxref("window")}} を ({{domxref("window.self","self")}} の代わりに) 使用して現在のグローバルスコープを取得しようとすると、 {{domxref("Worker")}} の中ではエラーが返されます。 +## ウェブワーカー API -ワーカーのコンテキストは、専用ワーカー (単一のスクリプトで利用される標準的なワーカー) の場合は {{domxref("DedicatedWorkerGlobalScope")}} オブジェクトで表されます (共有ワーカーの場合は {{domxref("SharedWorkerGlobalScope")}} です)。専用ワーカーは、最初にワーカーを起動したスクリプトだけがアクセスできます。一方、共有ワーカーは複数のスクリプトからアクセスできます。 +ワーカーはコンストラクター（{{domxref("Worker.Worker", "Worker()")}} など）を使用して生成されるオブジェクトであり、名前付きの JavaScript ファイル（このファイルはワーカースレッドで実行するコードを持ちます）を実行します。またワーカーは、現在の {{domxref("window")}} とは異なるグローバルコンテキストで実行されます。従って、 {{domxref("window")}} を（{{domxref("window.self","self")}} の代わりに）使用して現在のグローバルスコープを取得しようとすると、 {{domxref("Worker")}} の中ではエラーが返されます。 -> **Note:** **メモ**: ワーカーのリファレンスドキュメントや追加のガイドについては [Web Workers API のトップページ](/ja/docs/Web/API/Web_Workers_API)をご覧ください。 +ワーカーのコンテキストは、専用ワーカー（単一のスクリプトで利用される標準的なワーカー）の場合は {{domxref("DedicatedWorkerGlobalScope")}} オブジェクトで表されます（共有ワーカーの場合は {{domxref("SharedWorkerGlobalScope")}} です）。専用ワーカーは、最初にワーカーを起動したスクリプトだけがアクセスできます。一方、共有ワーカーは複数のスクリプトからアクセスできます。 -ワーカースレッドでは、どのようなコードでも実行できますが、いくつかの制限があります。例えば、ワーカー内から直接 DOM を操作することはできません。また {{domxref("window")}} オブジェクトの既定のメソッドやプロパティで、使用できないものがあります。それでも、`window` 配下にある多数のアイテム、たとえば [WebSocket](/ja/docs/Web/API/WebSockets_API)、 [IndexedDB](/ja/docs/Web/API/IndexedDB_API) のようなデータストレージ機構などを使用できます。詳しくは[ワーカーで使用できる関数やクラス](/ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)をご覧ください。 +> **Note:** ワーカーのリファレンスドキュメントや追加のガイドについては、[ウェブワーカー API のトップページ](/ja/docs/Web/API/Web_Workers_API)をご覧ください。 -ワーカーとメインスレッドの間でデータをやり取りするには、メッセージの仕組みが使用されます。どちらも `postMessage()` メソッドを使用してメッセージを送信し、`onmessage` イベントハンドラーによってメッセージに応答します (メッセージは {{event("Message")}} イベントの data 属性に収められます)。データは共有されず、コピーされます。 +ワーカースレッドでは、どのようなコードでも実行できますが、いくつかの制限があります。例えば、ワーカー内から直接 DOM を操作することはできません。また {{domxref("window")}} オブジェクトの既定のメソッドやプロパティで、使用できないものがあります。それでも、`window` 配下にある多数の項目、たとえば [WebSocket](/ja/docs/Web/API/WebSockets_API) や、 [IndexedDB](/ja/docs/Web/API/IndexedDB_API) のようなデータストレージ機構などを使用できます。詳しくは[ワーカーで使用できる関数やクラス](/ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)をご覧ください。 + +ワーカーとメインスレッドの間でデータをやり取りするには、メッセージの仕組みが使用されます。どちらも `postMessage()` メソッドを使用してメッセージを送信し、`onmessage` イベントハンドラーによってメッセージに応答します（メッセージは {{domxref("Worker/message_event", "message")}} イベントの data 属性に収められます）。データは共有されず、複製されます。 ワーカーは、親ページと同じオリジン内でホスティングされている場合に限り、さらに新たなワーカーを起動することができます。また、ワーカーは [`XMLHttpRequest`](/ja/docs/Web/API/XMLHttpRequest) を使用してネットワーク I/O を行うことができますが、例外として `XMLHttpRequest` の `responseXML` および `channel` 属性は常に `null` を返します。 -## 専用ワーカー (Dedicated worker) +## 専用ワーカー -前述のとおり、専用ワーカーには呼び出し元のスクリプトだけがアクセスできます。この節では[基本的な専用ワーカーのサンプル](https://github.com/mdn/simple-web-worker)にある JavaScript を見ていきます ([専用ワーカーを実行する](https://mdn.github.io/simple-web-worker/))。これは、 2 つの数字を入力して掛け合わせることができるものです。数字は専用のワーカーに送られて掛け合わされ、その結果がページに戻されて表示されます。 +前述のとおり、専用ワーカー (dedicated worker) には呼び出し元のスクリプトだけがアクセスできます。この節では[基本的な専用ワーカーのサンプル](https://github.com/mdn/simple-web-worker)にある JavaScript を見ていきます（[専用ワーカーを実行する](https://mdn.github.io/simple-web-worker/)）。これは、 2 つの数字を入力して掛け合わせることができるものです。数字は専用のワーカーに送られて掛け合わされ、その結果がページに戻されて表示されます。 これはあまり面白みのないサンプルですが、基本的なワーカーの概念を紹介する間はシンプルに保とうと考えています。より高度な詳細情報は、この記事の後半で扱います。 ### ワーカー機能の検出 -エラー制御と後方互換性を向上させるため、ワーカーにアクセスするコードを以下のコードの中に包むといいでしょう ([main.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js))。 +エラー制御と後方互換性を向上させるため、ワーカーにアクセスするコードは以下のコードの中に入れるといいでしょう ([main.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-web-worker/main.js))。 ```js if (window.Worker) { - - ... - + // … } ``` ### 専用ワーカーの起動 -新しいワーカーは簡単に生成できます。必要なことは、ワーカースレッドで実行するスクリプトの URI を指定した {{domxref("Worker.Worker", "Worker()")}} コンストラクターを呼び出すことだけです ([main.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js))。 +新しいワーカーは簡単に生成できます。必要なことは、ワーカースレッドで実行するスクリプトの URI を指定した {{domxref("Worker.Worker", "Worker()")}} コンストラクターを呼び出すことだけです ([main.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-web-worker/main.js))。 ```js -var myWorker = new Worker('worker.js'); +const myWorker = new Worker('worker.js'); ``` -### 専用ワーカーとメッセージをやりとりする +### 専用ワーカーとのメッセージのやりとり -ワーカーのマジックは、{{domxref("Worker.postMessage", "postMessage()")}} メソッドと {{domxref("Worker.onmessage", "onmessage")}} イベントハンドラーによって実現します。ワーカーにメッセージを送りたいときは、以下のようにしてメッセージを投稿します ([main.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js))。 +ワーカーのマジックは、{{domxref("Worker.postMessage", "postMessage()")}} メソッドと {{domxref("Worker.message_event", "onmessage")}} イベントハンドラーによって実現します。ワーカーにメッセージを送りたいときは、以下のようにしてメッセージを送信します ([main.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-web-worker/main.js))。 ```js -first.onchange = function() { +first.onchange = () => { myWorker.postMessage([first.value, second.value]); console.log('Message posted to worker'); } -second.onchange = function() { +second.onchange = () => { myWorker.postMessage([first.value, second.value]); console.log('Message posted to worker'); } @@ -64,12 +66,12 @@ second.onchange = function() { 2 つの {{htmlelement("input")}} 要素があり、それぞれ変数 `first` と `second` で表されています。どちらかの値が変化すると、 `myWorker.postMessage([first.value,second.value])` を使用して、双方の値を配列としてワーカーに送信します。メッセージでは、おおむねどのようなものでも送信できます。 -ワーカー内では、以下のようにイベントハンドラーのブロックにコードを記述すると、メッセージを受け取ったときに応答できます ([worker.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js))。 +ワーカー内では、以下のようにイベントハンドラーのブロックにコードを記述すると、メッセージを受け取ったときに応答できます ([worker.js](https://github.com/mdn/dom-examples/blob/main/web-workers/simple-web-worker/worker.js))。 ```js -onmessage = function(e) { +onmessage = (e) => { console.log('Message received from main script'); - var workerResult = 'Result: ' + (e.data[0] * e.data[1]); + const workerResult = `Result: ${e.data[0] * e.data[1]}`; console.log('Posting message back to main script'); postMessage(workerResult); } @@ -80,7 +82,7 @@ onmessage = function(e) { メインスレッドに戻ると、再び `onmessage` を使用して、ワーカーから返されたメッセージに応答します。 ```js -myWorker.onmessage = function(e) { +myWorker.onmessage = (e) => { result.textContent = e.data; console.log('Message received from worker'); } @@ -88,9 +90,9 @@ myWorker.onmessage = function(e) { ここではメッセージイベントからデータを取り出して、結果の段落の `textContent` へ格納しています。よって、ユーザーは計算結果を見ることができます。 -> **Note:** **注**: メインのスクリプトスレッドで `onmessage` および `postMessage()` を使用するときは `Worker` オブジェクトにぶら下げなければなりませんが、ワーカー内ではそのようにする必要はありません。これは、ワーカー内ではそれ自身が実質的にグローバルスコープであるためです。 +> **Note:** メインのスクリプトスレッドで `onmessage` および `postMessage()` を使用するときは `Worker` オブジェクトにぶら下げなければなりませんが、ワーカー内ではそのようにする必要はありません。これは、ワーカー内ではそれ自身が実質的にグローバルスコープであるためです。 -> **Note:** **注**: メッセージをメインスレッドとワーカーの間でやりとりするとき、共有されるのではなく、コピーまたは「転送」 (移動) されます。詳しい解説は、[ワーカーとの間のデータ転送の詳細](#transferring_data_to_and_from_workers_further_details)をご覧ください。 +> **Note:** メッセージをメインスレッドとワーカーの間でやりとりするとき、共有されるのではなく、複製または「転送」（移動）されます。詳しい解説は、[ワーカーとのデータ転送の詳細](#ワーカーとのデータ転送の詳細)をご覧ください。 ### ワーカーの終了 @@ -132,26 +134,26 @@ importScripts('foo.js', 'bar.js'); /* 2 つのスクリプトをインポ importScripts('//example.com/hello.js'); /* 他のオリジンのスクリプトをインポートすることができる */ ``` -ブラウザーはそれぞれのスクリプトを読み込み、実行します。ワーカーは各スクリプトのグローバルオブジェクトを使用できます。スクリプトを読み込むことができない場合は `NETWORK_ERROR` を発生させて、それ以降のコードを実行しません。それでも、すでに実行されたコード ({{domxref("WindowOrWorkerGlobalScope.setTimeout")}} で繰り延べされているコードを含みます) は動作します。`importScripts()` メソッドより**後方**にある関数の宣言は、常にコードの残りの部分より先に評価されることから、同様に保持されます。 +ブラウザーはそれぞれのスクリプトを読み込み、実行します。ワーカーは各スクリプトのグローバルオブジェクトを使用できます。スクリプトを読み込むことができない場合は `NETWORK_ERROR` を発生させて、それ以降のコードを実行しません。それでも、すでに実行されたコード（{{domxref("setTimeout()")}} で繰り延べされているコードを含みます）は動作します。`importScripts()` メソッドより**後方**にある関数の宣言は、常にコードの残りの部分より先に評価されることから、同様に保持されます。 -> **Note:** **注**: スクリプトは順不同にダウンロードされることがありますが、実行は `importScripts()` に渡したファイル名の順に行います。これは同期的に行われます。すべてのスクリプトの読み込みと実行が行われるまで `importScripts()` から戻りません。 +> **Note:** スクリプトは順不同にダウンロードされることがありますが、実行は `importScripts()` に渡したファイル名の順に行います。これは同期的に行われます。すべてのスクリプトの読み込みと実行が行われるまで `importScripts()` から戻りません。 ## 共有ワーカー -共有ワーカーは、オリジンが同一であれば (異なるウィンドウ、iframe、ワーカーからであっても) 複数のスクリプトからアクセスできます。本章では[基本的な共有ワーカーの例](https://github.com/mdn/simple-shared-worker) の JavaScript を見ていきます ([共有ワーカーを実行する](https://mdn.github.io/simple-shared-worker/))。こちらは専用ワーカーのサンプルと似ていますが、*2 つの数値で乗算を行う*スクリプトと*数値を 2 乗する*スクリプトという、別々のスクリプトファイルが扱う 2 つの関数を使用できる点が異なります。どちらのスクリプトも同じワーカーを使用して、実際に必要な計算を行います。 +共有ワーカーは、オリジンが同一であれば（異なるウィンドウ、iframe、ワーカーからであっても）複数のスクリプトからアクセスできます。本章では[基本的な共有ワーカーの例](https://github.com/mdn/simple-shared-worker) の JavaScript を見ていきます ([共有ワーカーを実行する](https://mdn.github.io/simple-shared-worker/))。こちらは専用ワーカーのサンプルと似ていますが、*2 つの数値で乗算を行う*スクリプトと*数値を 2 乗する*スクリプトという、別々のスクリプトファイルが扱う 2 つの関数を使用できる点が異なります。どちらのスクリプトも同じワーカーを使用して、実際に必要な計算を行います。 ここでは、 専用ワーカーと共有ワーカーの違いについて注目します。この例では 2 つの HTML ページがあり、それぞれの JavaScript は同じ単一のワーカーファイルを使用するようになっています。 -> **Note:** **注**: 共有ワーカーが複数の閲覧コンテキストからアクセスできる場合、すべての閲覧コンテキストはまったく同じオリジン (プロトコル、ホスト、ポート番号が同じ) になります。 +> **Note:** 共有ワーカーが複数の閲覧コンテキストからアクセスできる場合、すべての閲覧コンテキストはまったく同じオリジン (プロトコル、ホスト、ポート番号が同じ) になります。 -> **Note:** **メモ**: Firefox では、共有ワーカーはプライベートウィンドウとそれ以外に読み込まれた文書間で共有することができません ({{bug(1177621)}})。 +> **Note:** Firefox では、共有ワーカーはプライベートウィンドウとそれ以外に読み込まれた文書間で共有することができません ({{bug(1177621)}})。 ### 共有ワーカーの生成 -新しい共有ワーカーの生成方法は 専用ワーカー の場合とほとんど同じですが、コンストラクター名が異なります ([index.html](https://github.com/mdn/simple-shared-worker/blob/gh-pages/index.html) および [index2.html](https://github.com/mdn/simple-shared-worker/blob/gh-pages/index2.html) をご覧ください)。それぞれのページで、以下のようなコードを使用してワーカーを立ち上げます。 +新しい共有ワーカーの生成方法は 専用ワーカー の場合とほとんど同じですが、コンストラクター名が異なります（[index.html](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-shared-worker/index.html) および [index2.html](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-shared-worker/index2.html) をご覧ください）。それぞれのページで、以下のようなコードを使用してワーカーを立ち上げます。 ```js -var myWorker = new SharedWorker('worker.js'); +const myWorker = new SharedWorker('worker.js'); ``` 共有ワーカーの大きな違いのひとつが、 `port` オブジェクトを通して通信しなければならないことです。スクリプトがワーカーと通信するために使用できる、明示的なポートが開きます (これは、 専用ワーカーでも暗黙的に開いています)。 @@ -162,38 +164,38 @@ var myWorker = new SharedWorker('worker.js'); ### 共有ワーカーとのメッセージのやりとり -前述のとおりワーカーにメッセージを送信できるようになりましたが、`postMessage()` メソッドは port オブジェクトを通して呼び出さなければなりません (繰り返しますが、同様の構造が [multiply.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js) および [square.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js) に存在します)。 +前述のとおりワーカーにメッセージを送信できるようになりましたが、`postMessage()` メソッドは port オブジェクトを通して呼び出さなければなりません（繰り返しますが、同様の構造が [multiply.js](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-shared-worker/multiply.js) および [square.js](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-shared-worker/square.js) に存在します）。 ```js -squareNumber.onchange = function() { - myWorker.port.postMessage([squareNumber.value,squareNumber.value]); +squareNumber.onchange = () => { + myWorker.port.postMessage([squareNumber.value, squareNumber.value]); console.log('Message posted to worker'); } ``` -Worker に移ります。こちらは若干複雑さが増しています ([worker.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js)): +ワーカーに移ります。こちらは若干複雑さが増しています ([worker.js](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-shared-worker/worker.js)): ```js -onconnect = function(e) { - var port = e.ports[0]; +onconnect = (e) => { + const port = e.ports[0]; - port.onmessage = function(e) { - var workerResult = 'Result: ' + (e.data[0] * e.data[1]); + port.onmessage = (e) => { + const workerResult = `Result: ${e.data[0] * e.data[1]}`; port.postMessage(workerResult); } } ``` -始めに、ポートへの接続が発生したとき (すなわち、親スレッドで `onmessage` イベントをセットアップしたときや親スレッドで `start()` メソッドを明示的に呼び出したとき) にコードを実行するため `onconnect` ハンドラーを使用します。 +始めに、ポートへの接続が発生したとき（すなわち、親スレッドで `onmessage` イベントをセットアップしたときや親スレッドで `start()` メソッドを明示的に呼び出したとき）にコードを実行するため `onconnect` ハンドラーを使用します。 イベントオブジェクトの `ports` 属性を使用してポートを取り出し、変数に格納します。 次に、計算を実行して結果をメインスレッドに返すため、ポートの `message` のハンドラーを使用します。ワーカースレッドで `message` のハンドラーをセットアップすると、親スレッドに戻すポート接続を暗黙的に開きます。従って、実際は前述のとおり `port.start()` を呼び出す必要はありません。 -最後に、メインスレッドに戻ってメッセージを扱います (繰り返しますが、同様の構造が [multiply.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js) および [square.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js) に存在します)。 +最後に、メインスレッドに戻ってメッセージを扱います（繰り返しますが、同様の構造が [multiply.js](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-shared-worker/multiply.js) および [square.js](https://github.com/mdn/dom-examples/tree/main/web-workers/simple-shared-worker/square.js)) に存在します）。 ```js -myWorker.port.onmessage = function(e) { +myWorker.port.onmessage = (e) => { result2.textContent = e.data; console.log('Message received from worker'); } @@ -205,13 +207,13 @@ myWorker.port.onmessage = function(e) { {{domxref("Worker")}} インターフェイスでは、OS レベルの実際のスレッドが生成されるため、注意深いプログラマーは、注意しないと同時実行によってコードに「面白い」効果が生じるのではないかと懸念するかもしれません。 -しかし、 Web Worker は他のスレッドとの通信ポイントが慎重に制御されているため、同時実行の問題を引き起こすことは実際には非常に困難です。スレッドセーフでないコンポーネントや DOM にはアクセスできません。また、シリアル化されたオブジェクトを通して特定のデータをスレッドに出し入れしなければなりません。ですから、コードで問題を起こすためには、かなり難しいのです。 +しかし、ウェブワーカーは他のスレッドとの通信ポイントが慎重に制御されているため、同時実行の問題を引き起こすことは実際には非常に困難です。スレッドセーフでないコンポーネントや DOM にはアクセスできません。また、シリアル化されたオブジェクトを通して特定のデータをスレッドに出し入れしなければなりません。ですから、コードで問題を起こすためには、かなり難しいのです。 ## コンテンツセキュリティポリシー -ワーカーは、自分を生成した文書から区別された独自の実行コンテキストを持っているとみなされます。このため、一般に、自分を生成した文書 (または親ワーカー) の[コンテンツセキュリティポリシー](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy)では管理されません。そのため例えば、文書が次のヘッダー付きで読み込まれたと仮定します。 +ワーカーは、自分を生成した文書から区別された独自の実行コンテキストを持っているとみなされます。このため、一般に、自分を生成した文書（または親ワーカー）の[コンテンツセキュリティポリシー](/ja/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy)では管理されません。そのため例えば、文書が次のヘッダー付きで読み込まれたと仮定します。 -```plain +```http Content-Security-Policy: script-src 'self' ``` @@ -219,7 +221,7 @@ Content-Security-Policy: script-src 'self' ワーカーのコンテンツセキュリティポリシーを指定するには、ワーカースクリプト自身が配信されたリクエストの [Content-Security-Policy](/ja/docs/Web/HTTP/Headers/Content-Security-Policy) レスポンスヘッダーで設定してください。 -ワーカースクリプトのオリジンがグローバルに一意な識別子である場合 (例えば、 URL のスキームが data や blob であった場合) は例外です。この場合、ワーカーは文書の CSP またはそれを作成したワーカーを継承します。 +ワーカースクリプトのオリジンがグローバルに一意な識別子である場合（例えば、 URL のスキームが data や blob であった場合）は例外です。この場合、ワーカーは文書の CSP またはそれを作成したワーカーを継承します。 ## ワーカーとのデータ転送の詳細 @@ -229,65 +231,65 @@ Content-Security-Policy: script-src 'self' ```js function emulateMessage(vVal) { - return eval('(' + JSON.stringify(vVal) + ')'); + return eval(`(${JSON.stringify(vVal)})`); } // テスト // テスト #1 -var example1 = new Number(3); +const example1 = new Number(3); console.log(typeof example1); // object console.log(typeof emulateMessage(example1)); // number // テスト #2 -var example2 = true; +const example2 = true; console.log(typeof example2); // boolean console.log(typeof emulateMessage(example2)); // boolean // テスト #3 -var example3 = new String('Hello World'); +const example3 = new String('Hello World'); console.log(typeof example3); // object console.log(typeof emulateMessage(example3)); // string // テスト #4 -var example4 = { - 'name': 'John Smith', - "age": 43 +const example4 = { + name: 'John Smith', + age: 43, }; console.log(typeof example4); // object console.log(typeof emulateMessage(example4)); // object // テスト #5 -function Animal(sType, nAge) { - this.type = sType; - this.age = nAge; +function Animal(type, age) { + this.type = type; + this.age = age; } -var example5 = new Animal('Cat', 3); +const example5 = new Animal('Cat', 3); alert(example5.constructor); // Animal alert(emulateMessage(example5).constructor); // Object ``` 複製され、共有されない値を*メッセージ*と呼びます。もうお分かりだと思いますが、*メッセージ*は `postMessage()` を使ってメインスレッドとの間で送受信することができ、 `message` イベントの {{domxref("MessageEvent.data", "data")}} 属性には、ワーカーから返されたデータが含まれています。 -**example.html** (メインページ) +**example.html** （メインページ） ```js -var myWorker = new Worker('my_task.js'); +const myWorker = new Worker('my_task.js'); -myWorker.onmessage = function(oEvent) { - console.log('Worker said : ' + oEvent.data); +myWorker.onmessage = (event) => { + console.log(`Worker said : ${event.data}`); }; myWorker.postMessage('ali'); ``` -**my_task.js** (ワーカー) +**my_task.js** （ワーカー） ```js -postMessage("I\'m working before postMessage(\'ali\')."); +postMessage("I'm working before postMessage('ali')."); -onmessage = function(oEvent) { - postMessage('Hi ' + oEvent.data); +onmessage = (event) => { + postMessage(`Hi, ${event.data}`); }; ``` @@ -303,47 +305,44 @@ onmessage = function(oEvent) { ```js function QueryableWorker(url, defaultListener, onError) { - var instance = this, - worker = new Worker(url), - listeners = {}; + const instance = this; + const worker = new Worker(url); + const listeners = {}; - this.defaultListener = defaultListener || function() {}; + this.defaultListener = defaultListener ?? (() => {}); - if (onError) {worker.onerror = onError;} + if (onError) { worker.onerror = onError; } - this.postMessage = function(message) { - worker.postMessage(message); - } + this.postMessage = (message) => { + worker.postMessage(message); + } - this.terminate = function() { - worker.terminate(); - } + this.terminate = () => { + worker.terminate(); + } } ``` -そして、リスナーを追加/削除する方法を追加します。 +そして、リスナーを追加/削除するメソッドを追加します。 ```js -this.addListeners = function(name, listener) { - listeners[name] = listener; +this.addListeners = (name, listener) => { + listeners[name] = listener; } -this.removeListeners = function(name) { - delete listeners[name]; +this.removeListeners = (name) => { + delete listeners[name]; } ``` ここでは、説明のためにワーカーに 2 つの簡単な操作をさせてみましょう。 2 つの数値の差を取得することと、 3 秒後にアラートを出すことです。これを実現するために、まず最初に `sendQuery` メソッドを実装します。これは、ワーカーが実際に対応するメソッドを持っているかどうかを問い合わせるものです。 ```js -/* - This functions takes at least one argument, the method name we want to query. - Then we can pass in the arguments that the method needs. - */ -this.sendQuery = function() { - if (arguments.length < 1) { - throw new TypeError('QueryableWorker.sendQuery takes at least one argument'); - return; +// This functions takes at least one argument, the method name we want to query. +// Then we can pass in the arguments that the method needs. +this.sendQuery = (queryMethod, ...queryMethodArguments) => { + if (!queryMethod) { + throw new TypeError('QueryableWorker.sendQuery takes at least one argument'); } worker.postMessage({ 'queryMethod': arguments[0], @@ -355,169 +354,173 @@ this.sendQuery = function() { `QueryableWorker` を `onmessage` メソッドで終了させます。問い合わせたメソッドに対応するワーカーがあれば、対応するリスナーの名前と必要な引数を返してくれるはずなので、あとは `listeners` の中を探すだけです。 ```js -worker.onmessage = function(event) { - if (event.data instanceof Object && - event.data.hasOwnProperty('queryMethodListener') && - event.data.hasOwnProperty('queryMethodArguments')) { - listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments); - } else { - this.defaultListener.call(instance, event.data); - } +worker.onmessage = (event) => { + if ( + event.data instanceof Object && + Object.hasOwn(event.data, 'queryMethodListener') && + Object.hasOwn(event.data, 'queryMethodArguments') + ) { + listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments); + } else { + this.defaultListener.call(instance, event.data); + } } ``` 次にワーカーです。まず、 2 つの簡単な操作を行うためのメソッドが必要です。 ```js -var queryableFunctions = { - getDifference: function(a, b) { - reply('printStuff', a - b); - }, - waitSomeTime: function() { - setTimeout(function() { - reply('doAlert', 3, 'seconds'); - }, 3000); - } +const queryableFunctions = { + getDifference(a, b) { + reply('printStuff', a - b); + }, + waitSomeTime() { + setTimeout(() => { + reply('doAlert', 3, 'seconds'); + }, 3000); + } } -function reply() { - if (arguments.length < 1) { - throw new TypeError('reply - takes at least one argument'); - return; - } - postMessage({ - queryMethodListener: arguments[0], - queryMethodArguments: Array.prototype.slice.call(arguments, 1) - }); +function reply(queryMethodListener, ...queryMethodArguments) { + if (!queryMethodListener) { + throw new TypeError('reply - takes at least one argument'); + } + postMessage({ + queryMethodListener, + queryMethodArguments, + }); } /* This method is called when main page calls QueryWorker's postMessage method directly*/ function defaultReply(message) { - // do something + // do something } ``` そして、`onmessage`メソッドは簡単になりました。 ```js -onmessage = function(event) { - if (event.data instanceof Object && - event.data.hasOwnProperty('queryMethod') && - event.data.hasOwnProperty('queryMethodArguments')) { - queryableFunctions[event.data.queryMethod] - .apply(self, event.data.queryMethodArguments); - } else { - defaultReply(event.data); - } +onmessage = (event) => { + if ( + event.data instanceof Object && + Object.hasOwn(event.data, 'queryMethod') && + Object.hasOwn(event.data, 'queryMethodArguments') + ) { + queryableFunctions[event.data.queryMethod] + .apply(self, event.data.queryMethodArguments); + } else { + defaultReply(event.data); + } } ``` ここでは、完全な実装を紹介します。 -**example.html** (メインページ) +**example.html** （メインページ） ```html - - - - MDN Example - Queryable worker + + + + + MDN Example - Queryable worker - - - - + myTask.addListener('doAlert', (time, unit) => { + alert(`Worker waited for ${time} ${unit} :-)`); + }); + + + + + ``` -**my_task.js** (ワーカー) +**my_task.js** （ワーカー） ```js -var queryableFunctions = { +const queryableFunctions = { // 例 #1: 2 つの値の差を得る - getDifference: function(nMinuend, nSubtrahend) { - reply('printStuff', nMinuend - nSubtrahend); + getDifference(minuend, subtrahend) { + reply('printStuff', minuend - subtrahend); }, + // 例 #2: 3 秒待つ - waitSomeTime: function() { - setTimeout(function() { reply('doAlert', 3, 'seconds'); }, 3000); + waitSomeTime() { + setTimeout(() => { reply('doAlert', 3, 'seconds'); }, 3000); } }; @@ -528,90 +531,100 @@ function defaultReply(message) { // 何らかの処理 } -function reply() { - if (arguments.length < 1) { throw new TypeError('reply - not enough arguments'); return; } - postMessage({ 'queryMethodListener': arguments[0], 'queryMethodArguments': Array.prototype.slice.call(arguments, 1) }); +function reply(queryMethodListener, ...queryMethodArguments) { + if (!queryMethodListener) { + throw new TypeError('reply - not enough arguments'); + } + postMessage({ + queryMethodListener, + queryMethodArguments, + }); } -onmessage = function(oEvent) { - if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty('queryMethod') && oEvent.data.hasOwnProperty('queryMethodArguments')) { - queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments); +onmessage = (event) => { + if ( + event.data instanceof Object && + Object.hasOwn(event.data, 'queryMethod') && + Object.hasOwn(event.data, 'queryMethodArguments') + ) { + queryableFunctions[event.data.queryMethod].apply(self, event.data.queryMethodArguments); } else { - defaultReply(oEvent.data); + defaultReply(event.data); } }; ``` 各メインページ → ワーカー、ワーカー → メインページとメッセージの内容を切り替えることができます。そして、 "queryMethod", "queryMethodListeners", "queryMethodArguments" の各プロパティ名は、 `QueryableWorker` とワーカーで一致していれば何でも構いません。 -### 所有権の譲渡によるデータの引き渡し (transferable オブジェクト) +### 所有権の譲渡によるデータの引き渡し（移転可能オブジェクト） -Google Chrome 17 以降および Firefox 18 以降には、特定の種類のオブジェクト (transferable オブジェクト、つまり {{domxref("Transferable")}} インターフェイスを実装したオブジェクト) をワーカーとの間で高いパフォーマンスで受け渡すための別な方法があります。 Transferable オブジェクトは、あるコンテキストから別のコンテキストへコピー操作なしで転送されるため、大規模なデータセットを送信する際のパフォーマンスが大幅に向上します。 C/C++ の世界から来た人は、参照渡しと考えてください。ただし、参照渡しとは異なり、呼び出し元のコンテキストの「バージョン」は転送されると利用できなくなります。その所有権は新しいコンテキストに移されます。例えば、 {{jsxref("ArrayBuffer")}} をメインアプリからワーカースクリプトに転送した場合、元の {{jsxref("ArrayBuffer")}} はクリアされ、使用できなくなります。その内容は (文字通り) ワーカーコンテキストに転送 (transfer) されます。 +現代のブラウザーには、ある種のオブジェクトをワーカーに、またはワーカーから高いパフォーマンスで渡すための別の方法があります。{{Glossary("Transferable Objects", "転送可能オブジェクト")}}は、あるコンテキストから別のコンテキストへゼロコピー演算を運営して転送されるので、大きなデータセットを送信するときにパフォーマンスが大幅に改善されます。 -```js -// 32MB の "file" を作成して埋めます。 -var uInt8Array = new Uint8Array(1024 * 1024 * 32); // 32MB -for (var i = 0; i < uInt8Array.length; ++i) { - uInt8Array[i] = i; -} +例えば、メインアプリからワーカースクリプトに {{jsxref("ArrayBuffer")}} を転送する場合、元の {{jsxref("ArrayBuffer")}} はクリアされてもう使えなくなります。その内容は、（文字どおり）ワーカーのコンテキストに転送されます。 +```js +// 32MB の「ファイル」を作成し、 0 から 255 までの連続した値で埋めます。 – 32MB = 1024 * 1024 * 32 +const uInt8Array = new Uint8Array(1024 * 1024 * 32).map((v, i) => i); worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); ``` -> **Note:** **注**: Transferable オブジェクト、パフォーマンス、メソッドの機能検出について詳しくは、HTML5 Rocks の [Transferable Objects: Lightning Fast!](https://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast) をご覧ください。 - ## 埋め込みワーカー -ワーカーのコードをウェブページに埋め込むための、通常のスクリプトを {{HTMLElement("script")}} 要素で埋め込むような「公式な｝方法はありません。しかし、 {{HTMLElement("script")}} 要素が `src` 属性を持たず、また `type` 属性が実行可能な MIME タイプを示していない場合は、 JavaScript が使用できるデータブロック要素であると判断されます。「データブロック」はほとんどのテキストデータを持つことができる、 HTML5 の一般的な機能です。よって、以下の方法でワーカーを埋め込むことができます。 +ワーカーのコードをウェブページに埋め込むための、通常のスクリプトを {{HTMLElement("script")}} 要素で埋め込むような「公式な」方法はありません。しかし、 {{HTMLElement("script")}} 要素が `src` 属性を持たず、また `type` 属性が実行可能な MIME タイプを示していない場合は、 JavaScript が使用できるデータブロック要素であると判断されます。「データブロック」はほとんどのテキストデータを持つことができる、 HTML の一般的な機能です。よって、以下の方法でワーカーを埋め込むことができます。 ```html - - - -MDN Example - Embedded worker - - - - - -
+ + + + + MDN Example - Embedded worker + + + + + + +
+ ``` @@ -621,14 +634,14 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); ```js function fn2workerURL(fn) { - var blob = new Blob(['('+fn.toString()+')()'], {type: 'text/javascript'}) + const blob = new Blob([`(${fn.toString()})()`], { type: 'text/javascript' }) return URL.createObjectURL(blob) } ``` ## 追加の例 -ここでは Web Worker の使用方法について、さらに例を示します。 +ここではウェブワーカーの使用方法について、さらに例を示します。 ### バックグラウンドで演算を行う @@ -639,34 +652,21 @@ function fn2workerURL(fn) { 以下の JavaScript コードをファイル "fibonacci.js" に保存し、次節の HTML から参照します。 ```js -var results = []; - -function resultReceiver(event) { - results.push(parseInt(event.data)); - if (results.length == 2) { - postMessage(results[0] + results[1]); - } +self.onmessage = (e) => { + const userNum = Number(e.data); + fibonacci(userNum); } -function errorReceiver(event) { - throw event.data; -} - -onmessage = function(event) { - var n = parseInt(event.data); - - if (n == 0 || n == 1) { - postMessage(n); - return; +function fibonacci(num){ + let a = 1; + let b = 0; + while (num >= 0){ + [a, b] = [a + b, a]; + num--; } - for (var i = 1; i <= 2; i++) { - var worker = new Worker('fibonacci.js'); - worker.onmessage = resultReceiver; - worker.onerror = errorReceiver; - worker.postMessage(n - i); - } - }; + self.postMessage(b); +} ``` ワーカーは `onmessage` プロパティを、ワーカーのオブジェクトの `postMessage()` が呼び出されたときにメッセージを受け取る関数に設定します (これはその名前の*変数*や*関数*を定義することとは違いますので注意してください。 `var onmessage` と `function onmessage` は、これらの名前のグローバルグローバルプロパティを定義しますが、ワーカーを作成したウェブページから送信されたメッセージを受信するように関数を登録するわけではありません)。これは最適に開始して、それぞれの計算の反復処理を扱うために自分自身のコピーを起動します。 @@ -675,46 +675,65 @@ onmessage = function(event) { ```html - + - Test threads fibonacci + Fibonacci number generator + - -
- - +
+
+ + +
+
+ +
+
+ +

+ + ``` -ウェブページは `result` という ID を持つ `div` 要素を作成して、結果を表示するために使用します。そして、ワーカーを起動します。ワーカーを起動した後は、`onmessage` ハンドラーを `div` 要素の内容を指定することで結果を表示するように構成し、また `onerror` ハンドラーはエラーメッセージを[ダンプ]()するように設定します。 +ウェブページは `result` という ID を持つ `div` 要素を作成して、結果を表示するために使用します。そして、ワーカーを起動します。ワーカーを起動した後は、`onmessage` ハンドラーを `div` 要素の内容を指定することで結果を表示するように構成し、また `onerror` ハンドラーはエラーメッセージを開発者ツールのコンソールへ記録するために設定します。 最後に、ワーカーを開始するためにメッセージを送信します。 [この例のデモを試してください](https://mdn.github.io/fibonacci-worker/)。 -### バックグラウンドでのウェブ入出力の実行 - -この例は、 [Using workers in extensions](/ja/docs/Using_workers_in_extensions) の記事に掲載しています。 - ### 複数のワーカーにタスクを分割する マルチコアのコンピューターが一般的になってきたことで複数のワーカーに複雑な計算処理を分割することが有用になり、それらのタスクを複数の CPU コアで実行することが可能になります。 @@ -723,49 +742,40 @@ onmessage = function(event) { 専用ワーカーや共有ワーカーに加えて、利用できる他の種類のワーカーがあります。 -- [ServiceWorker](/ja/docs/Web/API/Service_Worker_API) は、基本的に、ウェブアプリケーションと、ブラウザーおよびネットワーク (利用可能な場合) との間に位置するプロキシーサーバーとして機能します。これは、効果的なオフライン操作の構築ができるようにすること目的としています。ネットワークリクエストを傍受し、ネットワークが利用可能かどうかや、サーバー上の更新された資産に基づいて、適切なアクションをとります。また、プッシュ通知やバックグラウンド同期の API にもアクセスできるようになります。 -- Chrome Worker は Firefox 独自の種類のワーカーであり、アドオンを開発していて、拡張機能でワーカーを使用したい場合、ワーカーから [js-ctypes](/ja/js-ctypes) にアクセスしたい場合に使用することができます。詳しくは {{domxref("ChromeWorker")}} をご覧ください。 -- [Audio Worklet](/ja/docs/Web/API/Web_Audio_API#audio_processing_in_javascript) は、ワークレット (ワーカーの軽量版) のコンテキスト内でスクリプトによるオーディオ処理を直接実行する機能を提供します。 +- [サービスワーカー](/ja/docs/Web/API/Service_Worker_API) は、基本的に、ウェブアプリケーションと、ブラウザーおよびネットワーク (利用可能な場合) との間に位置するプロキシーサーバーとして機能します。これは、効果的なオフライン操作の構築ができるようにすること目的としています。ネットワークリクエストを傍受し、ネットワークが利用可能かどうかや、サーバー上の更新された資産に基づいて、適切なアクションをとります。また、プッシュ通知やバックグラウンド同期の API にもアクセスできるようになります。 +- [オーディオワークレット](/ja/docs/Web/API/Web_Audio_API#audio_processing_in_javascript) は、ワークレット（ワーカーの軽量版）のコンテキスト内でスクリプトによる音声処理を直接実行する機能を提供します。 ## ワーカースレッドのデバッグ ほとんどのブラウザーは、 JavaScript デバッガーでワーカースレッドのデバッグを、メインスレッドのデバッグとまったく同じ方法で対応しています。たとえば、 Firefox と Chrome の両方で、メインスレッドとアクティブなワーカースレッドの両方の JavaScript ソースファイルを一覧表示し、これらのファイルをすべて開いてブレークポイントやログポイントを設定することができます。 -下の画面ショットは、 Firefox での例です。*ソースリスト*には、別のワーカースレッドで実行されている `worker.js` が表示されています。このファイルを選択すると、メイン スレッドで実行されているコードと同様に、[ソースペイン](/ja/docs/Tools/Debugger/UI_Tour#source_pane)で開かれます。 - -![](worker-source.png) - -> **Note:** **注**: ワーカーのスクリプトは必要になったときに読み込まれるため、ページが読み込まれたての時にはソースリストに現れていないかもしれません。 - -ソースパネルの中では通常の方法でワーカースレッドに[ブレークポイント](< /ja/docs/Tools/Debugger/How_to/Set_a_breakpoint>)または[ログポイント](< /ja/docs/Tools/Debugger/Set_a_logpoint>)) を設定することができます。実行が一時停止されると、デバッガーのコンテキストが更新され、正しい[ブレークポイント](< /ja/docs/Tools/Debugger/How_to/Set_a_breakpoint>)、[インラインの変数のプレビュー](< /ja/docs/Tools/Debugger/How_to/Set_a_breakpoint#inline_variable_preview>)、[コールスタック](< /ja/docs/Tools/Debugger/UI_Tour#call_stack>)などが期待通りに表示されます。 - -![](worker-breakpoints-callstack.png) +ウェブワーカーをデバッグする方法については、各ブラウザーの JavaScript デバッガーのドキュメントを参照してください。 -> **Note:** **注**: 詳しくは [Firefox JavaScript Debugger](< /ja/docs/Tools/Debugger>) を参照してください。 +- [Chrome のソースパネル](https://developer.chrome.com/docs/devtools/javascript/sources/) +- [Firefox の JavaScript デバッガー](https://firefox-source-docs.mozilla.org/devtools-user/debugger/) ## ワーカーで使用できる関数とインターフェイス -標準的な JavaScript 機能のほとんどが Web Worker 内で使用できます。以下のものを含みます。 +標準的な JavaScript 機能のほとんどがウェブワーカー内で使用できます。以下のものを含みます。 - {{domxref("Navigator")}} - {{domxref("XMLHttpRequest")}} - {{jsxref("Global_Objects/Array", "Array")}}、{{jsxref("Global_Objects/Date", "Date")}}、{{jsxref("Global_Objects/Math", "Math")}}、{{jsxref("Global_Objects/String", "String")}} -- {{domxref("WindowOrWorkerGlobalScope.setTimeout")}} および {{domxref("WindowOrWorkerGlobalScope.setInterval")}} +- {{domxref("setTimeout()")}} および {{domxref("setInterval()")}} ワーカーで*実行できない*ことは主に、親ページに直接影響を与えるものです。これは、 DOM の操作やページのオブジェクトを使用することを含みます。{{domxref("DedicatedWorkerGlobalScope.postMessage")}} を使用してメインスクリプトにメッセージを戻してから変更操作を行う形で、間接的に実行しなければなりません。 > **Note:** あるメソッドがワーカーで利用できるかどうかは、サイト を使ってテストできます。例えば、Firefox 84 でサイトに [EventSource](/ja/docs/Web/API/EventSource) と入力すると、サービスワーカーではサポートされていないが、専用ワーカーや共有ワーカーではサポートされていることがわかります。 -> **Note:** **メモ**: ワーカーで使用できる関数の完全なリストは、[ワーカーで使用できる関数とインターフェイス](< /ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers>)でご覧ください。 +> **Note:** ワーカーで使用できる関数の完全なリストは、[ワーカーで使用できる関数とインターフェイス](< /ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers>)でご覧ください。 ## 仕様書 -| 仕様書 | 状態 | 備考 | -| ------------------------------------------------------------------------ | -------------------------------- | ---- | -| {{SpecName('HTML WHATWG', '#workers', 'Web workers')}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} ## 関連情報 - [`Worker`](/ja/docs/Web/API/Worker) インターフェイス - [`SharedWorker`](/ja/docs/Web/API/SharedWorker) インターフェイス - [ワーカーで使用できる関数](/ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers) +- [`OffscreenCanvas`](/ja/docs/Web/API/OffscreenCanvas) インターフェイス