TypeScriptで並列処理をマスターする手順と10選サンプルコード集

はじめに

TypeScriptはJavaScriptに静的型付けの特性を追加したスクリプト言語として、多くの開発者から愛用されています。

特に大規模なアプリケーション開発において、TypeScriptの型システムはバグを早期に検出するのに役立ちます。

しかし、アプリケーションの処理が増えると、その実行速度やレスポンスの遅延は深刻な問題となることがあります。

そこで、並列処理の技術が注目されています。

この記事では、TypeScriptを使用した並列処理の基礎から応用までを、サンプルコードとともに徹底的に解説します。

初心者の方でも、並列処理の基本的な概念から具体的な実装方法まで、しっかりと理解することができる内容となっています。

並列処理をマスターすることで、アプリケーションのパフォーマンス向上や効率的なリソース利用が期待できます。

●TypeScriptでの並列処理とは？

並列処理は、コンピュータが多数のタスクを同時に処理する技術です。

例えば、複数のデータを同時に取得したり、大量の計算を短時間で終わらせたい場合などに使用されます。

TypeScript、JavaScriptのスーパーセットであるこの言語も、この並列処理の機能を持っています。

○並列処理の基本概念

コンピュータの処理は基本的には一つのタスクを一度に処理しますが、並列処理を利用することで複数のタスクを同時に進行させることが可能になります。

これにより、全体の処理時間を短縮したり、リソースを効率的に使用することができます。

例えば、APIからのデータ取得とデータベースからのデータ取得を同時に行うことで、待ち時間なく両方のデータを取得することができます。

○TypeScriptでの並列処理のメリットとデメリット

TypeScriptでの並列処理のメリットは、JavaScriptに比べて型安全性が高いため、バグを事前にキャッチしやすいことです。

また、モダンなES6以上の機能をフルに活用できるため、より洗練された並列処理のコードが書けます。

しかし、デメリットとしては、学習コストが若干高いことや、設定が複雑になりがちであることが挙げられます。

こちらは非常に簡単なTypeScriptでの並列処理のサンプルコードです。

// このコードではPromiseを使って並列に複数の関数を実行するコードを紹介しています。この例では関数Aと関数Bを並列して実行しています。
const functionA = (): Promise<string> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("関数Aの結果");
        }, 1000);
    });
};

const functionB = (): Promise<string> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("関数Bの結果");
        }, 500);
    });
};

Promise.all([functionA(), functionB()]).then((results) => {
    console.log(results);  // ["関数Aの結果", "関数Bの結果"]
});

上述のコードを実行すると、functionAとfunctionBが並列に実行され、その結果が配列として出力されます。

この例では、両方の関数が完了するのを待ってから、結果をログに表示します。

●並列処理の基本手法

TypeScriptにおける並列処理は、効率的なアプリケーションの開発に欠かせないスキルです。

ここでは、TypeScriptで利用可能な並列処理の主要な手法、Promiseとasync/awaitについて紹介します。

○Promiseの活用

Promiseは、非同期処理の結果を表すオブジェクトであり、成功（resolve）または失敗（reject）のどちらかの状態になります。

Promiseを使用することで、非同期処理の流れをより直感的に記述できます。

このコードでは、Promiseを使って非同期のタスクを実行するコードを表しています。

この例では、2秒後にメッセージをresolveする非同期のタスクを作成しています。

function delayMessage(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("2秒後に表示されます");
        }, 2000);
    });
}

delayMessage().then(result => {
    console.log(result);
});

上記のコードを実行すると、2秒後にコンソールに”2秒後に表示されます”と表示されます。

○async/awaitの利用

async/awaitは、非同期処理を同期的に書くための構文です。

async関数は常にPromiseを返すことが保証されており、その関数内ではawaitを使用してPromiseの結果を待つことができます。

このコードでは、async/awaitを使って非同期処理を実行する方法を表しています。

この例では、先ほどのdelayMessage関数をawaitを使って結果を待ち受けています。

async function showMessage(): Promise<void> {
    const result = await delayMessage();
    console.log(result);
}

showMessage();

このコードを実行すると、やはり2秒後にコンソールに”2秒後に表示されます”と表示されます。

しかし、async/awaitを利用することで、非同期処理を同期的に書くことができ、コードの可読性が向上します。

●並列処理のサンプルコード10選

プログラムを高速化するための方法として、並列処理は不可欠なテクニックとなっています。

TypeScriptでもこのテクニックを適用することで、効率的にデータを処理したり、ユーザーエクスペリエンスを向上させることができます。

今回は、TypeScriptでの並列処理を効果的に行うためのサンプルコードを10選紹介します。

○サンプルコード1：基本的なPromiseの使用

TypeScriptにおける非同期処理の基盤として、Promiseが提供されています。

このコードでは、基本的なPromiseを使用して非同期処理を行う方法を表しています。

この例では、2つの関数を非同期に実行し、結果を待ってから次の処理に移るという流れを表しています。

// 関数1: 2秒後に"関数1完了"と表示する
function function1(): Promise<string> {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("関数1完了");
            resolve("関数1の結果");
        }, 2000);
    });
}

// 関数2: 1秒後に"関数2完了"と表示する
function function2(): Promise<string> {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("関数2完了");
            resolve("関数2の結果");
        }, 1000);
    });
}

// 非同期処理を実行
async function executeFunctions() {
    const result1 = await function1();
    const result2 = await function2();
    console.log("全ての関数が完了しました");
}

executeFunctions();

上記のサンプルコードでは、function1とfunction2が非同期で実行されます。

それぞれの関数は一定の時間が経過した後にメッセージを表示し、その結果を返します。

executeFunctions関数内では、awaitキーワードを使用してこれらの関数の結果を順番に待ちます。

そのため、コードの出力としては「関数1完了」→「関数2完了」→「全ての関数が完了しました」という順番で表示されることが期待されます。

このサンプルコードを実際に実行すると、約3秒後に「全ての関数が完了しました」というメッセージが表示されます。

まず、function1が2秒間待って「関数1完了」を表示し、その後function2が1秒間待って「関数2完了」と表示されます。

このようにPromiseとasync/awaitを組み合わせることで、非同期処理の流れを直感的にコードに表現することができます。

○サンプルコード2：async/awaitを用いた基本処理

TypeScriptにおける非同期処理の主な方法の一つにasync/awaitがあります。

このasync/awaitは、非同期処理を同期処理のように直感的に記述できるメリットがあります。

Promiseと連携して使用されることが多く、コードの可読性やメンテナンス性を向上させるために非常に効果的です。

下記のサンプルコードでは、async/awaitを使って非同期の処理を行う簡単な例を表しています。

この例では、2つの非同期関数fetchData1とfetchData2を呼び出し、その結果をコンソールに出力しています。

// 非同期関数のサンプル1
async function fetchData1(): Promise<string> {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve("データ1");
        }, 1000);
    });
}

// 非同期関数のサンプル2
async function fetchData2(): Promise<string> {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve("データ2");
        }, 1500);
    });
}

// 上記の2つの非同期関数をasync/awaitを使って呼び出す関数
async function displayData() {
    const data1 = await fetchData1();
    const data2 = await fetchData2();
    console.log(data1, data2);
}

displayData();

このコードでは、fetchData1とfetchData2という2つの非同期関数を定義しています。

それぞれの関数は、指定された時間が経過した後に文字列データを返すPromiseを返します。

displayData関数の中で、awaitを用いてこれらの非同期関数の完了を待ち、結果を取得しています。

そして、取得したデータをコンソールに出力します。

このサンプルコードを実行すると、”データ1″と”データ2″が順番にコンソールに出力されることを確認できます。

具体的には、約1秒後に”データ1″が、さらに0.5秒後に”データ2″が出力される流れとなります。

このように、async/awaitを用いることで、非同期処理の完了を待つ部分を簡潔に表現することができ、複雑なコールバックのネストやPromiseのチェーンを避けることが可能です。

ただし、上記の例ではfetchData1とfetchData2の非同期処理が順番に行われています。

もし、これらの非同期処理を並列で実行したい場合は、Promise.allと組み合わせて利用することで、効率的な並列処理を実現できます。

async function displayDataParallel() {
    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
    console.log(data1, data2);
}

displayDataParallel();

上記のdisplayDataParallel関数では、Promise.allを使ってfetchData1とfetchData2を並列で実行しています。

その結果、両方の非同期処理が同時に開始され、どちらかが先に完了しても、もう一方の完了を待ってから結果が返されるようになります。

このコードを実行すると、約1.5秒後に同時に”データ1″と”データ2″がコンソールに出力されます。

この方法を利用することで、非同期処理の総実行時間を短縮することができる場合があります。

また、async/awaitを使用する際の注意点として、awaitを使うことで処理がブロックされ、後続の処理が遅延する可能性がある点が挙げられます。

そのため、不必要にawaitを使用せず、可能な限り並列処理を活用することで、全体の処理速度の向上を目指すことが重要です。

○サンプルコード3：Promise.allを使用した同時実行

このコードでは、Promise.allを使って複数のPromiseを同時に実行するコードを表しています。

この例では、3つの非同期処理を同時に開始し、すべての処理が完了した時点で結果を取得しています。

const promise1 = new Promise<number>((resolve) => {
    setTimeout(() => {
        resolve(1);
    }, 1000);
});

const promise2 = new Promise<number>((resolve) => {
    setTimeout(() => {
        resolve(2);
    }, 2000);
});

const promise3 = new Promise<number>((resolve) => {
    setTimeout(() => {
        resolve(3);
    }, 3000);
});

Promise.all([promise1, promise2, promise3]).then((results) => {
    console.log(results); // [1, 2, 3]
});

この例の非同期処理は、それぞれ1秒、2秒、3秒後に結果を返すシンプルなPromiseです。

Promise.allは、指定されたすべてのPromiseが解決されたときに解決される新しいPromiseを返します。

上のコードでは、3つのPromiseがすべて解決されると、結果の配列[1, 2, 3]が得られます。

このコードを実行すると、約3秒後に[1, 2, 3]という配列がコンソールに出力されます。

これは、最も時間がかかるpromise3が3秒で完了するためです。

すべてのPromiseが解決されるのを待つので、Promise.allの結果もその後に得られるわけです。

○サンプルコード4：Promise.raceを使った競合処理

JavaScript、特にTypeScriptで非同期処理を扱う際に、Promiseは非常に重要な役割を果たします。

Promise.raceはその一部として、複数のPromiseのうち最初に完了したものの結果だけを取得するメソッドです。

これは、競争状態をシミュレートしたり、特定のタイムアウトを設定する場合などに便利です。

このコードでは、Promise.raceを使って、複数のPromise処理のうち最初に完了したものの結果を取得するコードを表しています。

この例では、2つのPromise関数をPromise.raceに渡し、それらのうち最初に終了したものの結果をコンソールに表示しています。

// 1秒後にresolveするPromise関数
const promise1 = new Promise<string>((resolve) => {
    setTimeout(() => {
        resolve('promise1完了');
    }, 1000);
});

// 2秒後にresolveするPromise関数
const promise2 = new Promise<string>((resolve) => {
    setTimeout(() => {
        resolve('promise2完了');
    }, 2000);
});

// Promise.raceを使用して、最初に完了したPromiseの結果を取得
Promise.race([promise1, promise2]).then((result) => {
    console.log(result); // 出力結果: promise1完了
});

このコードの結果として、promise1がpromise2よりも早く完了するため、コンソールには”promise1完了”と表示されます。

また、応用例として、Promise.raceはタイムアウト処理を実装するのにも役立ちます。

例えば、特定のPromise処理が指定時間内に完了しなかった場合にエラーをスローしたいときなどに使用します。

次に、このタイムアウト処理のサンプルコードを見てみましょう。

const fetchData = new Promise<string>((resolve) => {
    setTimeout(() => {
        resolve('データ取得完了');
    }, 3000);
});

const timeout = new Promise<string>((_, reject) => {
    setTimeout(() => {
        reject('タイムアウトエラー');
    }, 2000);
});

Promise.race([fetchData, timeout])
    .then((result) => {
        console.log(result);
    })
    .catch((error) => {
        console.error(error); // 出力結果: タイムアウトエラー
    });

この例では、fetchData関数は3秒後に完了しますが、timeout関数は2秒後にエラーを返すため、Promise.raceは”タイムアウトエラー”をコンソールに表示します。

これにより、指定時間内に非同期処理が完了しなかった場合の処理を追加することができます。

○サンプルコード5：エラーハンドリングの実例

並列処理を行う際、エラーハンドリングは避けては通れないテーマとなります。

並列処理中にエラーが発生した場合、適切にハンドリングしないと予期しない動作やバグの原因となり得ます。

ここでは、TypeScriptを使用したエラーハンドリングの基本的な方法を紹介します。

このコードでは、Promiseを使って非同期処理を行い、その中で意図的にエラーを発生させる例を表しています。

この例では、throwを使用してエラーを発生させ、catchでそのエラーをキャッチしてエラーメッセージを出力しています。

async function sampleErrorHandling() {
    try {
        await new Promise((resolve, reject) => {
            setTimeout(() => {
                // エラーを意図的に発生させる
                reject(new Error('エラーが発生しました！'));
            }, 1000);
        });
    } catch (error) {
        console.error('エラーハンドリングの結果:', error.message);
    }
}

sampleErrorHandling();

このコードを実行すると、1秒後にエラーが発生し、catchブロック内のconsole.errorが実行されます。

そのため、コンソールには「エラーハンドリングの結果: エラーが発生しました！」というメッセージが出力されることになります。

このように、async/awaitを使用する場合は、try/catchを使用してエラーハンドリングを行うことが推奨されます。

また、Promiseを直接利用する場合は、thenメソッドの第二引数やcatchメソッドを使用してエラーをキャッチできます。

さらに、実際のアプリケーション開発では、発生したエラーの種類や内容に応じて、ユーザーへのフィードバックやログの出力、リトライの実装など、さまざまなエラーハンドリングの方法が考えられます。

エラーが発生した場合のユーザビリティやシステムの安定性を考慮して、適切なエラーハンドリングを実装することが重要です。

また、TypeScriptでは、エラーオブジェクトの型をカスタマイズすることで、より詳細なエラーハンドリングが可能になります。

例えば、次のようなカスタムエラー型を定義して使用することも考えられます。

class NetworkError extends Error {
    constructor(message: string) {
        super(message);
        this.name = 'NetworkError';
    }
}

async function fetchApi() {
    // ... 省略 ...
    throw new NetworkError('APIの呼び出しに失敗しました');
}

このようにカスタマイズすることで、エラーの原因や発生場所をより詳細に把握し、効果的なデバッグやエラーレポートが可能となります。

○サンプルコード6：Worker Threadsの導入

Node.jsでは、CPUのマルチコアを活用して並列処理を行うためのモジュールとして、Worker Threadsが提供されています。

TypeScriptでもこのモジュールを利用することで、コンピューティングリソースを最大限に活用し、処理を高速化することが可能です。

このコードでは、Worker Threadsを使って、TypeScriptでの並列処理を実現する基本的な方法を紹介しています。

この例では、新しいワーカースレッドを生成して、計算処理を行い、その結果をメインスレッドに返すという一連の流れを表しています。

// worker.ts
import { parentPort } from 'worker_threads';

// 簡単な計算処理
parentPort?.on('message', (data) => {
  let result = 0;
  for (let i = 0; i < data; i++) {
    result += i;
  }
  parentPort?.postMessage(result);
});

// main.ts
import { Worker } from 'worker_threads';

const worker = new Worker('./worker.ts');
worker.on('message', (result) => {
  console.log(`計算結果：${result}`);
});

worker.postMessage(1000000);

上記のコードでは、worker.tsがワーカースレッドで実行されるコードを表しており、簡単な累加計算を行います。

メインスレッド側からワーカースレッドにデータを送信する際は、postMessageメソッドを使用します。

そして、ワーカースレッド側から計算結果をメインスレッドに送り返す際も、postMessageメソッドを利用します。

一方、main.tsはメインスレッドのコードを表しており、新しいワーカーを生成し、そのワーカースレッドにメッセージを送信しています。

また、ワーカースレッドからの返信を受け取るために、messageイベントをリスンしています。

このコードを実行すると、累加の計算がワーカースレッドで実行され、計算結果がメインスレッドに返される流れを体験できます。

実際に実行してみると、計算結果：499999500000という結果がコンソールに出力されるでしょう。

Worker Threadsを利用する際の応用例として、複数のワーカースレッドを生成して、複数の計算タスクを同時に実行することも考えられます。

また、ワーカースレッド側で外部ライブラリを読み込んで利用することも可能で、その際の通信やデータの受け渡しには同じくpostMessageやmessageイベントを利用します。

○サンプルコード7：Workerとメインスレッドの通信

このコードでは、TypeScriptでのWorkerの使用方法と、Workerとメインスレッドとの間でのメッセージの送受信方法を解説しています。

具体的には、Workerを作成し、そのWorker内での処理結果をメインスレッドに返す例を表しています。

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

// Workerからのメッセージを受信
worker.onmessage = (event) => {
    console.log('メインスレッドが受信:', event.data);
};

// Workerにメッセージを送信
worker.postMessage('こんにちは、Worker!');

// Workerを終了
worker.terminate();

// worker.ts (Workerスレッド)
self.onmessage = (event) => {
    console.log('Workerが受信:', event.data);
    self.postMessage('こんにちは、メインスレッド!');
};

この例では、メインスレッドからWorkerに’こんにちは、Worker!’というメッセージを送信し、Workerスレッドがそのメッセージを受け取って、’Workerが受信: こんにちは、Worker!’と表示します。

そして、Workerからメインスレッドに’こんにちは、メインスレッド!’というメッセージを返しています。

このコードを実行すると、コンソールには次のような表示がされるでしょう。

メインスレッドが’こんにちは、Worker!’というメッセージをWorkerに送信した後、Workerはそのメッセージを受け取り、’Workerが受信: こんにちは、Worker!’と表示されます。

続いて、Workerからメインスレッドへ’こんにちは、メインスレッド!’というメッセージが返され、’メインスレッドが受信: こんにちは、メインスレッド!’と表示されます。

○サンプルコード8：リソースの最適な分割

JavaScriptやTypeScriptでは、長時間実行される処理や高負荷な処理を行う場合、その処理を最適なリソースに分割して、全体のパフォーマンスの低下を防ぐことが求められます。

今回は、大量のデータを持つ配列を分割し、それぞれの分割した部分に対して処理を行う例を表しています。

この例では、配列を分割して、それぞれのデータに対する処理を並列で行っています。

// TypeScriptによる大量のデータの並列処理
const processData = (data: number[]): number[] => {
    return data.map(item => item * 2);
};

const splitArray = (array: number[], size: number): number[][] => {
    const result = [];
    for (let i = 0; i < array.length; i += size) {
        result.push(array.slice(i, i + size));
    }
    return result;
};

// メイン処理
const main = async () => {
    const data = Array.from({ length: 100000 }, (_, i) => i);
    const chunkSize = 10000;
    const chunks = splitArray(data, chunkSize);

    const results = await Promise.all(chunks.map(chunk => {
        return new Promise<number[]>((resolve) => {
            setTimeout(() => {
                resolve(processData(chunk));
            }, 0);
        });
    }));

    console.log(results.flat());
};

main();

このコードでは、まずprocessData関数を使って、配列の各要素の数値を2倍にする処理を行っています。

そして、splitArray関数を使って、大量のデータを持つ配列を一定のサイズの小さな配列に分割しています。

メインの処理では、まず10万のデータを持つ配列を生成し、それを1万のデータを持つ配列10個に分割しています。

次に、それぞれの分割した配列に対してprocessData関数を適用し、その結果を結合して一つの配列として得ることができます。

このように、大量のデータを効率的に処理するために、データを適切なサイズに分割し、それぞれの分割したデータに対して並列で処理を行うことで、全体の処理時間を短縮することができます。

このコードの実行をすると、最終的には元のデータの各要素の数値が2倍になった配列が得られます。

例えば、元のデータが[0, 1, 2, 3, …]の場合、処理後のデータは[0, 2, 4, 6, …]となります。

また、この方法は、他の処理にも応用することができます。

例えば、大量のデータを持つ配列の各要素に対して、APIを呼び出す処理や、データベースへのクエリを実行する処理など、時間がかかる処理を行う場合にも、この方法を使って処理を分割し、それぞれの分割したデータに対して並列で処理を行うことで、全体の処理時間を短縮することができます。

また、データのサイズや処理の内容によっては、分割するサイズを調整することで、さらに処理速度を向上させることが可能です。

○サンプルコード9：外部ライブラリを用いた並列処理

このコードでは、TypeScriptにおいて外部ライブラリを使用して並列処理を行う方法を表しています。

この例では、有名な並列処理ライブラリ「paralleljs」を使って、複数のタスクを同時に実行しています。

// まずは外部ライブラリ「paralleljs」をインストールします。
// npm install paralleljs

// paralleljsをインポート
import * as Parallel from 'paralleljs';

// 並列で実行したいタスクの関数
const heavyTask = (data: number) => {
    let sum = 0;
    for (let i = 0; i < data; i++) {
        sum += i;
    }
    return sum;
}

// paralleljsを利用して並列実行
const parallel = new Parallel([1000000, 2000000, 3000000], { maxWorkers: 3 });
parallel.map(heavyTask).then(console.log);

このサンプルコードでは、heavyTaskという関数を用意しています。

この関数は、与えられた数までの合計を計算するタスクを模倣するものです。

そして、Parallelオブジェクトを作成し、この関数を並列で実行します。

ここでは、3つのタスクを最大3つのワーカースレッドで並列実行しています。

このコードを実行すると、次のような結果が得られるでしょう。

タスクの計算結果は、それぞれの数までの合計を配列としてコンソールに出力します。

この例では、それぞれ1000000、2000000、3000000までの合計が計算され、結果が配列として表示されます。

paralleljsは、ブラウザやNode.jsの環境で動作し、タスクを並列で実行するためのライブラリです。

特に、重い処理を行う場合や、大量のデータを扱う場合に役立ちます。また、内部でWeb Workerを利用することで、メインスレッドをブロックすることなく、バックグラウンドで並列処理を行います。

また、paralleljsを使用することで、異なるタスクを並列に実行することも可能です。

import * as Parallel from 'paralleljs';

const taskA = (data: number) => data * 2;
const taskB = (data: number) => data / 2;

const tasks = new Parallel([5, 10, 15], { maxWorkers: 3 });

tasks.map(taskA).then(console.log); // [10, 20, 30]を出力
tasks.map(taskB).then(console.log); // [2.5, 5, 7.5]を出力

この例では、taskAとtaskBという2つの異なるタスクを用意しています。それぞれのタスクで異なる処理を行い、その結果を配列として出力しています。

さらに、paralleljsでは、maxWorkersオプションを使って、同時に実行するワーカースレッドの数を指定することができます。

これにより、環境やタスクの内容に応じて、最適なワーカースレッドの数を設定することが可能です。

例えば、次のようにワーカースレッドの数を2に指定することで、2つのタスクを同時に実行することができます。

const tasks = new Parallel([1, 2, 3, 4, 5], { maxWorkers: 2 });

このように、外部ライブラリを活用することで、TypeScriptでの並列処理を簡単かつ効率的に実行することができます。

適切なライブラリを選び、それをうまく活用することで、並列処理のパワーを十分に引き出すことが可能です。

○サンプルコード10：カスタムWorkerの作成と利用

このコードでは、TypeScriptを用いてカスタムのWorkerを作成し、そのWorkerを利用して並列処理を行う方法を表しています。

この例では、特定の計算タスクをWorkerに割り当て、メインスレッドとは別のスレッドで実行します。

// worker.ts
onmessage = function(e) {
    const result = heavyCalculation(e.data);
    postMessage(result);
}

function heavyCalculation(data: number): number {
    let sum = 0;
    for(let i = 0; i < data; i++) {
        sum += i;
    }
    return sum;
}

// main.ts
const worker = new Worker('worker.ts');

worker.onmessage = function(e) {
    console.log('Result from worker: ', e.data);
}

worker.postMessage(1000);

このサンプルコードは、2つの部分から構成されています。

❶worker.ts

カスタムWorkerの中身です。

onmessageという関数を定義しており、メインスレッドからデータを受け取ったときに実行されるようになっています。

データはe.dataとして受け取ることができます。このデータをheavyCalculation関数に渡し、結果をpostMessageを使用してメインスレッドに返します。

❷main.ts

メインスレッドのコードです。こちらでは、新しいWorkerを作成し、そのWorkerにデータを送信しています。

また、Workerからのデータを受け取るためのonmessage関数も定義しています。

Workerを使用する際のメリットは、メインスレッドが他のタスクに専念できることです。

この例では、heavyCalculation関数で時間のかかる計算を行っていますが、この計算がメインスレッドで行われていた場合、ユーザーインターフェースが停止してしまうリスクがあります。

しかし、Workerを使用することで、そのリスクを回避できます。

また、Workerを使うことで、マルチコアのCPUを持つマシンの能力を最大限に引き出すことも可能です。

特に、大量のデータ処理や計算を行う必要がある場合、Workerの活用は非常に有効です。

実際にこのコードを実行すると、カスタムWorkerが指定したデータ（この例では1000）を使用して計算を行い、その結果をメインスレッドに返します。

そのため、main.tsのconsole.log部分で、Workerからの計算結果が表示されることになります。

応用例として、複数のWorkerを作成し、それぞれに異なるタスクを割り当てることも考えられます。これにより、さらに高度な並列処理を実現することが可能です。

また、メインスレッドとWorkerの間でのデータの受け渡しを効率化するための方法や、エラーハンドリングの実装など、さまざまなカスタマイズが考えられます。

このサンプルコードを基本に、TypeScriptでの並列処理をマスターし、あなたのアプリケーションのパフォーマンスを向上させることを目指しましょう。

●注意点と対処法

TypeScriptでの並列処理を行う際には、非常に効果的な結果を得ることができますが、いくつかの注意点が存在します。

これらの注意点を無視すると、プログラムのバグや予期せぬ動作、さらにはパフォーマンスの低下を招く可能性があります。

それでは、特に注意すべきポイントとその対処法について詳しく解説します。

○メモリリークの可能性とその回避方法

並列処理を実装する際に、一番の懸念事項はメモリリークです。

これは、不要になったオブジェクトがメモリ上から解放されずに残ってしまい、次第にシステム全体のパフォーマンスが低下する現象を指します。

このコードでは、TypeScriptでの簡単なメモリリークの例を表しています。

この例では、イベントリスナーが解除されずに残ってしまい、メモリリークを引き起こします。

class EventEmitter {
  private listeners: Function[] = [];

  on(event: string, listener: Function) {
    this.listeners.push(listener);
  }

  // ... その他のメソッド
}

const emitter = new EventEmitter();
const listener = () => console.log('イベント発火!');
emitter.on('event', listener);

// この時点でemitterのインスタンスは不要になったとする
// しかし、listener関数がメモリ上に残ってしまう

上記のコードでは、listener関数がメモリ上に残り、それによってメモリリークが発生する可能性があります。

これを解消するためには、イベントリスナーを解除するoffメソッドを追加すると良いでしょう。

class EventEmitter {
  // ... 既存のメソッド

  off(event: string, listener: Function) {
    const index = this.listeners.indexOf(listener);
    if (index > -1) {
      this.listeners.splice(index, 1);
    }
  }
}

// 使用後にイベントリスナーを解除する
emitter.off('event', listener);

こうすることで、不要になったリスナーを安全に解放し、メモリリークのリスクを低減することができます。

○並列処理時のエラーハンドリングのポイント

並列処理を行うとき、複数のタスクが同時に実行されるため、一つのタスクで発生したエラーが他のタスクに影響を及ぼす可能性があります。

したがって、適切なエラーハンドリングが不可欠です。

例えば、Promiseを使用している場合、.catchやtry...catch構文を使用してエラーを適切に処理することが重要です。

このコードでは、TypeScriptでの並列処理中に発生するエラーを適切にハンドリングする方法を表しています。

この例では、Promise.allを使用して複数の非同期タスクを並列に実行しています。

const task1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('タスク1でのエラー'));
  }, 1000);
});

const task2 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('タスク2完了');
  }, 2000);
});

Promise.all([task1, task2])
  .then(results => {
    console.log('全てのタスク完了

:', results);
  })
  .catch(error => {
    console.error('エラーが発生:', error.message);
  });

この例の場合、task1は1秒後にエラーを発生させます。

Promise.allは一つでもエラーが発生すると、直ちに.catchメソッドに移行します。

そのため、エラーメッセージがコンソールに表示されることになります。

●カスタマイズ方法

TypeScriptでの並列処理を行う上で、様々なカスタマイズが可能です。

こちらでは、より柔軟で効率的な並列処理を行うためのカスタマイズ方法を2つ、具体的なサンプルコードとともに紹介します。

○外部ライブラリの組み込み方

TypeScriptでの並列処理を強化するために、外部のライブラリを利用することができます。

こちらでは、非常に人気のある外部ライブラリ「Bluebird」の導入と使用方法を説明します。

このコードでは、Bluebirdを使って、並列処理のタスクをさらに効率的に実行する方法を表しています。

// Bluebirdのインポート
import * as Promise from 'bluebird';

// Bluebirdを使用した非同期処理の例
const asyncTask = (time: number) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`タスク完了: ${time}ms`);
    }, time);
  });
};

// 並列で3つのタスクを実行
Promise.all([
  asyncTask(1000),
  asyncTask(2000),
  asyncTask(3000)
]).then(results => {
  results.forEach(result => console.log(result));
});

この例では、Bluebirdを用いて3つの非同期タスクを並列に実行しています。

Bluebirdは、標準のPromiseよりも多機能で、さまざまな便利なメソッドが用意されています。

このコードを実行すると、タスクの完了メッセージがそれぞれの設定時間後にコンソールに表示されます。

○パフォーマンスの最適化手法

並列処理のパフォーマンスを最適化するための手法として、タスクの分割やリソースの最適な利用が考えられます。

こちらでは、タスクの分割を行う方法を紹介します。

このコードでは、大量のデータを小さなチャンクに分割して、それぞれのチャンクを並列に処理する方法を表しています。

const processDataInChunks = async (data: any[], chunkSize: number) => {
  const chunks = [];
  for (let i = 0; i < data.length; i += chunkSize) {
    chunks.push(data.slice(i, i + chunkSize));
  }

  const results = await Promise.all(chunks.map(chunk => processChunk(chunk)));
  return results.flat();
};

const processChunk = async (chunk: any[]) => {
  // ここで各チャンクを処理
  return chunk.map(item => item * 2);  // 例: データを2倍にする
};

// 使用例
const data = Array.from({ length: 10000 }, (_, i) => i);
processDataInChunks(data, 1000).then(results => {
  console.log(`処理完了, データ数: ${results.length}`);
});

この例では、10000のデータを1000のチャンクごとに分割して、それぞれのチャンクを並列に処理しています。

このようにタスクを適切に分割することで、メモリの消費を抑えつつ、高速な処理が可能となります。

このコードを実行すると、データが2倍に処理された後の結果が得られ、全てのデータが正常に処理されたことを表すメッセージがコンソールに表示されます。

まとめ

TypeScriptを使用した並列処理の手法は多岐にわたります。本ガイドでは、その基本から応用までを一通り網羅しました。

簡潔なサンプルコードを交えながら、初心者にも分かりやすいように解説を進めてきました。

TypeScriptの特性を活かすことで、効率的な並列処理の実装が可能となります。

TypeScriptでの並列処理をマスターすることは、効率的なコードを書くための鍵となります。

本ガイドを参考に、TypeScriptの並列処理の技術を磨き、より高品質なアプリケーションを開発してください。