JavaScriptでマルチスレッドを極める！初心者でも理解できる10のサンプルコード

はじめに
●JavaScriptとマルチスレッドプログラミングの基本
- ○マルチスレッドとは？
- ○JavaScriptにおけるマルチスレッドの重要性
●JavaScriptでマルチスレッドを使う方法
●マルチスレッドプログラミングにおける共通のエラーと対処法
●JavaScriptのマルチスレッド応用例
●JavaScriptでマルチスレッドを活用するコツ
●エンジニアなら知っておくべきマルチスレッドの豆知識
- ○豆知識1：マルチスレッドとマルチプロセッシングの違い
- ○豆知識2：ブラウザ間のWeb Workersの実装の違い
まとめ

はじめに

JavaScriptは、ウェブ開発において最も人気のあるプログラミング言語の一つです。

近年では、その用途がシンプルなクライアントサイドスクリプトから、サーバーサイドの開発、さらにはモバイルアプリケーションの開発にまで拡がっています。

このような多様な環境でJavaScriptを活用するためには、マルチスレッドプログラミングの理解が不可欠です。

本記事では、JavaScriptでのマルチスレッドプログラミングの基礎から、具体的な使用方法までを、初心者にも理解しやすい形で詳細に解説していきます。

この記事を読めば、JavaScriptでのマルチスレッドプログラミングを効果的に使いこなせるようになるでしょう。

●JavaScriptとマルチスレッドプログラミングの基本

JavaScriptは、もともとシングルスレッドで動作する言語として設計されています。

これは、一度に一つのタスクしか実行できないという意味です。

しかし、実際のアプリケーションでは、複数の処理を同時に実行したい場合が多くあります。

例えば、データの読み込み中にもユーザーインターフェースが応答する必要があります。

このようなニーズに応えるために、JavaScriptでは「非同期処理」が利用されます。

非同期処理を使うことで、メインの実行フローをブロックせずに、バックグラウンドでタスクを実行することができます。

しかし、非同期処理だけでは限界があります。

そこで登場するのが「マルチスレッドプログラミング」です。

これにより、複数のスレッドを利用して、より効率的な処理が可能になります。

○マルチスレッドとは？

マルチスレッドプログラミングとは、複数のスレッド（軽量な処理単位）を同時に実行することで、アプリケーションのパフォーマンスを向上させる手法です。

マルチスレッドを利用することで、例えば、一つのスレッドでユーザーインターフェースを操作しながら、別のスレッドでデータの処理を行うことが可能になります。

これにより、アプリケーションの応答性が向上し、ユーザー体験が改善されます。

○JavaScriptにおけるマルチスレッドの重要性

JavaScriptにおけるマルチスレッドの重要性は、近年ますます高まっています。

特に、複雑なウェブアプリケーションや、リアルタイムでのデータ処理が求められる場面では、マルチスレッドによる効率的な処理が不可欠です。

また、マルチスレッドを使いこなすことで、JavaScriptの限界を超えた高度なアプリケーションの開発が可能になります。

このため、JavaScriptのエンジニアとしてスキルを磨きたいのであれば、マルチスレッドプログラミングの知識と技術を身につけることが重要です。

●JavaScriptでマルチスレッドを使う方法

JavaScriptでは、マルチスレッドを実現するために「Web Workers」を使用します。

Web Workersは、バックグラウンドで実行されるJavaScriptのスレッドで、メインスレッド（通常、ウェブページのUIを制御するスレッド）とは独立して動作します。

これにより、重い計算処理やリソースを消費するタスクをバックグラウンドで実行でき、UIの反応性を維持しながら、パフォーマンスを向上させることが可能です。

○Web Workersの基本

Web Workersを使用する際、まず別のJavaScriptファイルをワーカースクリプトとして作成します。

このスクリプトは、メインスレッドから独立して実行されるため、DOMに直接アクセスすることはできません。

しかし、メインスレッドとの間でメッセージを送受信することで、データのやり取りが可能です。

これにより、メインスレッドの処理をブロックせずに、複雑な処理や計算を行うことができます。

○サンプルコード1：単純なバックグラウンド処理

ここでは、単純なバックグラウンド処理を行うWeb Workerの例を紹介します。

まず、ワーカースクリプト（worker.js）を作成し、その中で時間のかかる処理を行います。

// worker.js
self.addEventListener('message', function(e) {
    var result = e.data * 2; // 何らかの計算処理
    self.postMessage(result);
});

このワーカースクリプトは、メインスレッドからメッセージを受け取り、受け取ったデータに対して計算を行い、結果をメインスレッドに送信します。

メインスレッド側では、下記のようにWeb Workerを生成し、メッセージを送信します。

// メインスレッド
var worker = new Worker('worker.js');
worker.postMessage(10); // ワーカーにデータを送信

worker.addEventListener('message', function(e) {
    console.log('Result: ' + e.data); // 結果の受信と表示
});

このコードでは、メインスレッドがWeb Workerに数値10を送信し、ワーカーはこの数値を2倍にしてメインスレッドに返します。

○サンプルコード2：メインスレッドとのデータのやり取り

次に、メインスレッドとWeb Worker間でのデータのやり取りを行うサンプルコードを見てみましょう。

ここでは、ユーザーからの入力をWeb Workerに送信し、処理結果を受け取る例を示します。

メインスレッド側のコードは下記のようになります。

// メインスレッド
var worker = new Worker('worker.js');

// ユーザー入力の受け取り
document.getElementById('input').addEventListener('change', function(e) {
    worker.postMessage(e.target.value); // ワーカーにデータを送信
});

worker.addEventListener('message', function(e) {
    document.getElementById('result').textContent = 'Result: ' + e.data; // 結果の表示
});

ワーカースクリプト（worker.js）では、メインスレッドから送られたデータを受け取り、処理後に結果を返送します。

// worker.js
self.addEventListener('message', function(e) {
    var result = e.data.toUpperCase(); // 受け取ったデータを大文字に変換
    self.postMessage(result);
});

この例では、ユーザーがテキストボックスに入力した文字列をWeb Workerが受け取り、大文字に変換してメインスレッドに返します。

○サンプルコード3：複数のWeb Workersを使った処理

複数のWeb Workersを使用することで、さらに複雑な並行処理を行うことができます。

例えば、異なるデータに対して同時に処理を行う場合などに有効です。

ここでは、二つのWeb Workerを使って異なるデータを処理するサンプルコードを紹介します。

メインスレッド側のコードは下記のようになります。

// メインスレッド
var worker1 = new Worker('worker1.js');
var worker2 = new Worker('worker2.js');

worker1.postMessage('Hello'); // 最初のワーカーにデータを送信
worker2.postMessage('World'); // 二つ目のワーカーにデータを送信

worker1.addEventListener('message', function(e) {
    console.log('Worker 1: ' + e.data);
});

worker2.addEventListener('message', function(e) {
    console.log('Worker 2: ' + e.data);
});

この例では、二つのWeb Workerに異なるメッセージを送信し、それぞれの処理結果を受け取っています。

これにより、メインスレッドの負担を分散し、より高速に処理を行うことが可能です。

●マルチスレッドプログラミングにおける共通のエラーと対処法

マルチスレッドプログラミングは、その高度な並行処理能力にもかかわらず、いくつかの一般的なエラーや問題に直面する可能性があります。

これらのエラーを理解し、適切に対処することは、効率的で安定したマルチスレッドアプリケーションを開発するために重要です。

○エラー1：データ共有時の競合

マルチスレッド環境では、異なるスレッドが同じデータに同時にアクセスすることで競合が発生することがあります。

この問題を「レースコンディション」と呼び、不整合なデータや予期せぬエラーの原因になります。

対処法としては、クリティカルセクション（排他的にアクセスするべきコード領域）を適切に管理し、同時アクセスを防止することが重要です。

例えば、JavaScriptではMutexやSemaphoreといった同期プリミティブを使用して、リソースへのアクセスを制御することが可能です。

○エラー2：メモリリーク

メモリリークは、不要になったメモリが適切に解放されず、アプリケーションが使用するメモリ量が増え続ける現象です。

マルチスレッドプログラミングでは、特に注意が必要で、リソースの解放を怠るとメモリリークが発生しやすくなります。

メモリリークの対策には、使用されなくなったオブジェクトやリソースを確実に解放することが必要です。

例えば、Web Workersを使用した後にはworker.terminate()を呼び出してワーカーを終了させ、不要なリソースを解放することが推奨されます。

○エラー3：処理のデッドロック

デッドロックは、複数のスレッドが相互にリソースを待っている状態で進行できなくなる状況を指します。

例えば、スレッドAがリソース1を持ち、リソース2を要求している一方で、スレッドBがリソース2を持ち、リソース1を要求している場合、互いにリソースを解放せず、無限に待機することになります。

デッドロックを避けるためには、リソースの要求順序を一定に保つ、タイムアウトを設定して長時間のロックを避ける、リソースを要求する前に既に保持しているリソースを解放するなどの方法があります。

デッドロックは複雑な問題であり、設計段階で十分な検討を行うことが不可欠です。

●JavaScriptのマルチスレッド応用例

JavaScriptでのマルチスレッドプログラミングは、様々なアプリケーションに応用できます。

ここでは、いくつかの具体的な応用例とそれに伴うサンプルコードを紹介します。

これらの例は、マルチスレッドの概念を実際のシナリオにどのように適用できるかを表しています。

○サンプルコード4：リアルタイムデータ処理

リアルタイムでのデータ処理では、データの収集と処理を同時に行う必要があります。

下記のサンプルコードは、Web Workerを使用してバックグラウンドでデータを処理し、メインスレッドに結果を送信する方法を表しています。

// メインスレッド
var worker = new Worker('dataProcessor.js');
worker.postMessage({command: 'start', data: initialData});

worker.addEventListener('message', function(e) {
    console.log('Processed Data:', e.data);
});

// dataProcessor.js (ワーカースクリプト)
self.addEventListener('message', function(e) {
    if (e.data.command === 'start') {
        var processedData = processData(e.data.data); // データ処理の関数
        self.postMessage(processedData);
    }
});

このコードでは、リアルタイムでのデータ処理を効率的に行い、処理結果をメインスレッドに送信しています。

○サンプルコード5：重たい計算処理の最適化

複雑な計算処理は、アプリケーションのパフォーマンスに大きな影響を与えることがあります。

Web Workerを使用することで、これらの処理をメインスレッドから分離し、アプリケーションの応答性を維持することができます。

// メインスレッド
var worker = new Worker('heavyCalculation.js');
worker.postMessage({data: inputData});

worker.addEventListener('message', function(e) {
    console.log('Calculation Result:', e.data);
});

// heavyCalculation.js (ワーカースクリプト)
self.addEventListener('message', function(e) {
    var result = heavyCalculation(e.data.data); // 重たい計算処理の関数
    self.postMessage(result);
});

この例では、重たい計算処理をバックグラウンドで実行し、結果をメインスレッドに送信しています。

○サンプルコード6：非同期APIコール

非同期APIコールは、Webアプリケーションで頻繁に行われます。

マルチスレッドを使用することで、APIからのレスポンス待ち時間に他の処理を行うことができ、効率的な処理が可能になります。

// メインスレッド
var worker = new Worker('apiCall.js');
worker.postMessage({url: 'https://example.com/api/data'});

worker.addEventListener('message', function(e) {
    console.log('API Response:', e.data);
});

// apiCall.js (ワーカースクリプト)
self.addEventListener('message', function(e) {
    fetch(e.data.url)
        .then(response => response.json())
        .then(data => self.postMessage(data))
        .catch(error => console.error('Error:', error));
});

このコードでは、APIコールをWeb Workerで行い、レスポンスをメインスレッドに送信しています。

○サンプルコード7：ユーザーインターフェースの応答性向上

ユーザーインターフェースの応答性は、ユーザーエクスペリエンスに直接影響します。

下記のサンプルコードは、バックグラウンドでのデータ処理を行いながら、UIの反応性を保つ方法を表しています。

// メインスレッド
var worker = new Worker('uiTask.js');
worker.postMessage({data: uiData});

worker.addEventListener('message', function(e) {
    updateUI(e.data); // UIを更新する関数
});

// uiTask.js (ワーカースクリプト)
self.addEventListener('message', function(e) {
    var updatedData = processUIData(e.data.data); // UIデータ処理の関数
    self.postMessage(updatedData);
});

この例では、バックグラウンドでUIに関連するデータを処理し、メインスレッドでUIを更新しています。