JavaScript - Worker API: 并行処理のパワーを解放する

こんにちは、未来のJavaScript魔术師たち！今日は、Web Workersの世界に興味深い旅をすることになります。忙しい厨房のシェフを思い浮かべてください。時々、複雑な料理を準備するために手伝いが必要になるでしょう。それがまさにWeb WorkersがJavaScriptのコードで行うことです。重いタスクを処理する手助けをして、メインの調理…つまり、コーディングプロセスを遅くしないようにします！

JavaScript - Worker API

Web Worker API: JavaScriptのサブシェフ

Web Worker APIは、JavaScriptの厨房におけるアシスタントシェフのようです。バックグラウンドでスクリプトを実行し、他のスクリプトとは独立して動作します。これにより、メインページのパフォーマンスを阻害することなく、時間のかかるタスクを実行できます。すごいですね？

それでは、これらのアシスタントをどのように働かせるかを見てみましょう！

Web Workerサポートの確認

Web Workersを始める前に、ブラウザがそれらをサポートしているか確認する必要があります。厨房が適切な機材を备えているか確認するのと同じです。以下のように確認します：

if (typeof(Worker) !== "undefined") {
// すごい！Web Workersがサポートされています
console.log("Let's get to work!");
} else {
// あいにく！Web Workersがサポートされていません
console.log("Sorry, your browser doesn't support Web Workers");
}

このコードスニペットでは、Workerオブジェクトが定義されているか確認しています。あれば、問題ありません。なければ、他の方法でタスクを処理する必要があります。

Web Workerファイルの作成

ブラウザがWeb Workersをサポートしていることを確認したので、作成しましょう！Web Workerは、アシスタントシェフが従うレシピのようです。別のJavaScriptファイルを作成して、Web Workerとして使用します。

worker.jsというファイルを作成します：

// worker.js
self.addEventListener('message', function(e) {
const result = e.data * 2;
self.postMessage(result);
}, false);

このWorkerはメッセージをリスンし、受け取った数を2倍にして結果を送信します。シンプルですね？

Web Workerオブジェクトの作成

Workerファイルができたので、メインスクリプトでWeb Workerオブジェクトを作成します：

let myWorker;

if (typeof(Worker) !== "undefined") {
myWorker = new Worker("worker.js");
} else {
console.log("Web Workers are not supported in your browser!");
}

このコードは新しいWeb Workerオブジェクトを作成し、worker.jsファイルを指します。アシスタントシェフを雇い、レシピを渡すのと同じです。

Web Workerとの通信

次に、Workerにタスクを送信し、結果を受け取る方法を見てみましょう：

// データをWorkerに送信
myWorker.postMessage(10);

// Workerからのデータを受け取る
myWorker.onmessage = function(e) {
console.log("The worker sent back: " + e.data);
};

この例では、10という数をWorkerに送信します。Workerはそれを2倍にして20を送信します。アシスタントにレシピの材料を倍にするよう依頼するのと同じです！

Web Workerの実行終了

Workerを終了する際は、リソースを解放するために終了させる必要があります。アシスタントシェフに「料理ができたので帰っていい」と言うのと同じです：

myWorker.terminate();
myWorker = undefined;

このコードはWorkerを終了し、myWorker変数をundefinedに設定して、参照を削除します。

Web Workerの完全なプログラム例

以下に、すべてを合わせた完全な例を示します：

<!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(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("worker.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>

そして、worker.js：

let i = 0;

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

timedCount();

この例では、Workerが数をカウントし、每秒半分に更新します。メインページはこのWorkerを開始および停止し、メイン「厨房」からアシスタントシェフをどのようにコントロールするかを示しています。

Web Workerの使用例

Web Workersは、時間がかかるタスクを実行するのに非常に便利です。以下是一些一般的な使用例：

複雑な計算
大規模データの処理
画像やビデオの処理
ネットワーク操作
大規模データセット（例：CSVファイル）の解析

これらは、アシスタントシェフがあなたのメインの調理プロセスを邪魔しないで処理できる複雑なレシピです！

Web WorkersとDOM

重要なこととして覚えておいてください：Web WorkersはDOM（Document Object Model）に直接アクセスできません。アシスタントシェフが直接客に料理を提供できないのと同じです。Workerが必要にDOMとやり取りする場合は、メインスクリプトにメッセージを送信し、それがDOMを更新する必要があります。

結論

Web Workersは、JavaScriptツールキットにおける強力なツールです。複雑なタスクをメインスクリプトを遅くしないで実行することができ、アシスタントシェフが効率的に複雑な料理を準備するのと同じです。

Web Workersを効果的に使用するための鍵は、メインスクリプトから独立して実行できるタスクを見つけることです。練習を重ねることで、効率的なWeb Workersを多数使用して、複雑なタスクをスムーズに処理するWebアプリケーションを作成することができます。

ハッピーコーディングを！そして、あなたのJavaScriptの厨房が常に効率的なWeb Workersで賑やかであることを願っています！

メソッド	説明
`Worker()`	新しいWeb Workerオブジェクトを作成
`postMessage()`	Workerにメッセージを送信
`onmessage`	Workerからのメッセージを受信するイベントハンドラ
`terminate()`	Workerを終了
`addEventListener()`	Workerにイベントリスナーを追加
`removeEventListener()`	Workerからイベントリスナーを削除

Credits: Image by storyset

前のチュートリアル:

JavaScript - フォームAPI

次のチュートリアル:

JavaScript - Fetch API