Web Worker
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2022/09/23 06:09 UTC 版)
Web Worker（ウェブ・ワーカー）は、HTMLページから実行され、同じHTMLページから実行される可能性があるスクリプトからは独立にバックグラウンドで動作する[1]、JavaScriptのスクリプトである。World Wide Web Consortium（W3C）とWeb Hypertext Application Technology Working Group（WHATWG）で仕様が定義されている。web workerはマルチコアのCPUをより効率よく利用できることが多い[2]。
Web Workerは、全てのタスクがシングルスレッドで処理されるJavaScriptの持つ問題を解消するための仕様である。JavaScriptで長時間かかる処理を実行すると、入力や画面の描画処理がブロックされて、アプリケーションが操作不能となってしまうため、処理を分割して何度もsetTimeout等で呼び出すなどの工夫が必要であった。しかし、workerを使用することによって、一部の操作について並行処理（バックグラウンド処理）が可能となる[3]。
W3CとWHATWGは、Web Workerをクリックやユーザー操作などに応答するスクリプトによって中断されない長時間実行するスクリプトとして想定している。workerがユーザーアクティビティで中断されないようにすることで、バックグラウンドで長いタスクを実行すると同時に、Webページの応答性を確保できるようになる。
Web Workerの仕様はHTML Living Standardの一部である[4]。
特徴
ワーカー内ではDOM操作などUI操作はできないが、タイマーや非同期通信等の機能は使用できる。また、この機能の仕様は、HTMLの中に含まれている。
例
workerの最も簡単な使用法は、ユーザーインターフェイスを中断せずに計算コストの高いタスクを実行することである。
この例では、メインのドキュメントが素数を計算するweb workerを生成し、直近に発見された素数が徐々に表示される。
メインページは次のようになる;。
<!DOCTYPE html>
<html>
<head>
<title>Worker の例: 1コアの計算</title>
</head>
<body>
<p>これまでに見つかった最も大きな素数: <output id="result"></output></p>
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent = event.data;
};
</script>
</body>
</html>
Worker()コンストラクタの呼び出しがweb worker を生成し、web workerを表すworkerオブジェクトを返し、このオブジェクトを使用してweb workerと通信する。オブジェクトのonmessageイベントハンドラーはコードがweb workerからメッセージを受信できるようにする。
Web Worker本体は次のようになる。
var n = 1;
var end_value = 10**7;
search: while (n <= end_value) {
n++;
for (var i = 2; i <= Math.sqrt(n); i++)
if (n % i == 0)
continue search;
// 素数を発見した！
postMessage(n);
}
素数が見つかったときには、postMessage()メソッドを利用してメッセージがページに送り返される[5]。
出典
- ^ Web Workers, WHATWG 2010年6月3日閲覧。
- ^ “HTML Living Standard”. Html.spec.whatwg.org (2017年1月30日). 2017年1月31日閲覧。
- ^ Flanagan D. JavaScript 6th edition pp.747 - 754, 2012、古籏一浩 JavaScriptポケットリファレンス 5版 pp.390 - 396, 2011、JSさぽーたーず JavaScriptバイブル pp.366 - 368, 2012
- ^ Web Workers, WHATWG 2010年6月3日閲覧。
- ^ Web Workers, WHATWG 2010年6月3日閲覧。
外部リンク
- HTML Standard 10 Web workers: 仕様
- HTML Standard — Web Workers （日本語訳）: 仕様の非公式な日本語訳
- Web Workers API - Web API | MDN
- Workers overview - web.dev
「Web Worker」の例文・使い方・用例・文例
- このWebサイトのコンテンツは、著作権法で認められた私的使用のための複製として、PCにダウンロードすることができます。
- このWebサイトの基本機能は、無料でご利用頂くことができます。
- Webサイトの更新が遅れており、ご迷惑をお掛けしております。
- Webサイトの制作についての見積りをお願いしたくご連絡さしあげました。
- Webサイトへの一部転載の許可をいただけましたら幸いです。
- 関連すると思われるWebページを以下に記しておきましたので、参考にして頂ければと存じます。
- お気づきかもしれませんが、当社のWebショップがリニューアルされました。
- 該当のWebページのリンクを送ってください。
- 御問い合わせ先については、当社のWebサイトをご覧下さい。
- 障害の発生・復旧状況は随時Webサイト等で発表いたします。
- Web_Workerのページへのリンク
