JavaScript　Web Workerを使ってバックグラウンドで処理する方法

Web Workerを使うことで、JavaScriptのコードをバックグラウンドで実行することができます。本記事では、その方法を解説します。

Web Workerって何ですか？

Web Workerとは、ブラウザのJavaScriptエンジンとは別に実行されるJavaScriptのスレッドです。これを使うことで、メインスレッドとは別にコードを実行することができ、パフォーマンス向上やUIのレスポンス向上などにつながります。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー 公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

Web Workerとは

　Web Workerとは、ブラウザのJavaScriptエンジンとは別に実行されるJavaScriptのスレッドのことです。Web Workerを使うことで、メインスレッドとは別にコードを実行することができ、パフォーマンス向上やUIのレスポンス向上などにつながります。

　通常、JavaScriptは、シングルスレッドで実行されます。つまり、JavaScriptコードを実行するときには、他のコードの実行が完了するまで待つ必要があります。しかし、Web Workerを使うことで、別のスレッドでコードを実行することができるため、JavaScriptコードの実行中でも、別のコードを実行することができます。これにより、パフォーマンス向上やUIのレスポンス向上につながります。

　ただし、Web Workerはメインスレッドとは別のスレッドで実行されるため、メインスレッドからのアクセスができないため、一部のAPIに制限があります。例えば、Web WorkerはDOMにアクセスできないため、UIの操作はできません。また、Web Workerは、同じオリジンから生成されたスクリプトしか実行できないため、セキュリティ上の問題が生じることはありません。

Web Workerの使い方

Web Workerを使うには、以下の手順が必要です。

1. Workerオブジェクトを生成する

Web Workerを使うには、Workerオブジェクトを生成する必要があります。Workerオブジェクトを生成するには、以下のようにコードを記述します。

const worker = new Worker('worker.js');

上記の例では、worker.jsというファイルをWeb Workerとして生成しています。第一引数には、Web Workerとして生成するJavaScriptファイルのパスを指定します。

2. Workerオブジェクトに対して、メッセージの送受信や終了の通知を行う

Workerオブジェクトには、メッセージの送受信や終了の通知を行うことができます。

メッセージの送信

メッセージを送信するには、postMessageメソッドを使います。以下の例では、Workerオブジェクトに対して、文字列"Hello"を送信しています。

worker.postMessage('Hello');

メッセージの受信

メッセージを受信するには、Workerオブジェクトのonmessageイベントを使います。以下の例では、Workerオブジェクトから受信したメッセージをコンソールに出力しています。

worker.onmessage = function(event) {
  console.log(event.data);
}

終了の通知

Workerオブジェクトの処理が完了した場合には、terminateメソッドを呼び出して終了することができます。

worker.terminate();

以上が、Web Workerを使うための基本的な手順です。Web Workerを使うことで、複数のスレッドで処理を行うことができるため、ブラウザのパフォーマンスを向上させることができます。

ただし、Web Workerはメインスレッドとは別のスレッドで実行されるため、メインスレッドからのアクセスが制限される場合があるため、適切な使い分けが必要です。

サンプルプログラムを使った解説

以下は、Web Workerを使ってフィボナッチ数列を計算するサンプルプログラムです。

function fib(n) {
  if (n === 0 || n === 1) {
    return n;
  }
  return fib(n - 1) + fib(n - 2);
}

onmessage = function(event) {
  const n = event.data;
  const result = fib(n);
  postMessage(result);
}

このプログラムでは、fib関数を定義して、フィボナッチ数列を計算しています。引数nが0または1の場合は、そのままnを返し、それ以外の場合は再帰的にfib関数を呼び出して、n-1とn-2のフィボナッチ数列を計算して足し合わせた結果を返します。

onmessageイベントでは、メインスレッドから送信された数値を受け取り、fib関数でフィボナッチ数列を計算して、その結果をpostMessageメソッドでメインスレッドに返しています。

以下は、メインスレッドからWeb Workerを使ってフィボナッチ数列を計算するコード例です。

const worker = new Worker('worker.js');
worker.postMessage(40);

worker.onmessage = function(event) {
  console.log(event.data);
}

このプログラムでは、worker.jsというファイルをWeb Workerとして生成し、40という数値をpostMessageメソッドで送信しています。そして、onmessageイベントでWeb Workerから返された結果を受け取り、コンソールに出力しています。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

Web Workerを使うことで、JavaScriptのコードをバックグラウンドで実行する方法を解説しました。

Web Workerを使うことで、ブラウザのパフォーマンスを向上させることができるため、JavaScriptコードの処理速度を向上させたい場合に有用ですね！

Web Workerを使うことで、JavaScriptコードの処理速度を向上させることができますが、メインスレッドとは別のスレッドで実行されるため、適切な使い分けが必要です。

また、Web Workerは、モダンブラウザでサポートされているため、古いブラウザで動作しない場合があるため、注意が必要です。Web Workerを使う場合には、制限されたAPIについて理解し、適切に使い分けることが重要です。