🪔
Next.jsでお手軽にWeb-Workerを呼び出す
Next.jsでWeb-Workerを簡単に使うには
前回の記事で書きましたが、Next.jsには最初からWeb-Workerを読み込むためのWebPack設定が入っているので、そのまま利用することが可能です
しかしWeb-Workerとして書いたスクリプトを読み込む設定が入っているだけで、それ以外のサポートはありません
機能を利用するには、コード上でそれなりに面倒な手順を記述する必要があります
前回の記事
サンプル置き場
https://github.com/SoraKumo001/next-worker2
https://next-worker2.vercel.app/
Web-Workerを使う上での面倒なポイント
- Worker機能のファイルを別に作成する必要がある
インライン機能はあるものの、それはそれで面倒です - メインスレッドとWorkerのやりとりは、postMessageとaddEventListenerを経由しなければならない
ちょっとしたデータのやりとりをしようにも、この手続きでコードの見通しが悪くなります - データのやりとりを行うときにTypeScriptに型を付けようとすると、Worker側とメインスレッド側でそれぞれ書かなければならない
二重に同じようなコードを書く手間がかかるのは避けたいところです
解決方法の模索
postMessageとaddEventListenerを消し去って、Worker側で作成した関数をメインスレッド側でそのまま呼び出せるようにすれば良いのです
なんという名案！
問題はあっさり解決しました
作ったもの
web-workerを簡単に使うためのライブラリをnpmに登録しました
https://www.npmjs.com/package/worker-lib
サンプルコード
Worker side processing
5つの関数を作成し、initWorkerでWorkerとして使える状態にします
そして型情報のみexportしておきます
- src/libs/worker-test.ts
import { initWorker } from "worker-lib";
const add = (a: number, b: number) => {
for (let i = 0; i < 1000000000; i++); //Overload unnecessarily
return a + b
}
const add2 = (a: string, b: string) => {
for (let i = 0; i < 1000000000; i++); //Overload unnecessarily
return a + b
}
const sub = (a: number, b: number) => {
for (let i = 0; i < 1000000000; i++); //Overload unnecessarily
return a - b
}
const mul = (a: number, b: number) => {
for (let i = 0; i < 1000000000; i++); //Overload unnecessarily
return a * b
}
const error = (a: number, b: number) => {
for (let i = 0; i < 1000000000; i++); //Overload unnecessarily
throw new Error("throw")
return a + b;
}
// Initialization process to make it usable in Worker.
const map = initWorker({ add, add2, sub, mul, error })
// Export only the type
export type WorkerTest = typeof map
Processing for the user(Next.js)
createWorkerでworker-testを読み込みます
その際、WorkerTestという名前でexportしていた型情報を渡します
また、最大スレッド数をここで設定しておくと、上限を超えた呼び出しはプールされ、実行可能になるまで待機状態になります
戻り値としてWorker実行用の関数が返ってくるので、あとはそれを使ってWorkerを呼び出せます
- src/pages/index.tsx
import { useState } from "react";
import { createWorker } from "worker-lib";
import type { WorkerTest } from "../libs/worker-test";
// Create an instance to execute the Worker
// execute("function name",... parameter) to start the Worker
const execute = createWorker<WorkerTest>(
() => new Worker(new URL("../libs/worker-test", import.meta.url)),
5 // Maximum parallel number
);
const Page = () => {
const [values, setValues] = useState<(number | string)[]>([]);
const [a, setA] = useState(300);
const [b, setB] = useState(100);
return (
<div>
<form>
<input name="a" value={a} onChange={(e) => setA(Number(e.currentTarget.value))} />
<input name="b" value={b} onChange={(e) => setB(Number(e.currentTarget.value))} />
<button
type="button"
onClick={async () => {
const index = values.length;
setValues([...values, "running"]);
//Calling a Worker
const result = await execute("add", a, b);
setValues((values) => values.map((v, i) => (i === index ? result : v)));
}}
>
Add
</button>
<button
type="button"
onClick={async () => {
const index = values.length;
setValues([...values, "running"]);
//Calling a Worker
const result = await execute("add2", String(a), String(b));
setValues((values) => values.map((v, i) => (i === index ? result : v)));
}}
>
Add(String)
</button>
<button
type="button"
onClick={async () => {
const index = values.length;
setValues([...values, "running"]);
//Calling a Worker
const result = await execute("sub", a, b);
setValues((values) => values.map((v, i) => (i === index ? result : v)));
}}
>
Sub
</button>
<button
type="button"
onClick={async () => {
const index = values.length;
setValues([...values, "running"]);
//Calling a Worker
const result = await execute("mul", a, b);
setValues((values) => values.map((v, i) => (i === index ? result : v)));
}}
>
Mul
</button>
<button
type="button"
onClick={async () => {
const index = values.length;
setValues([...values, "running"]);
//Calling a Worker
const result = await execute("error", a, b).catch((e) => e);
setValues((values) => values.map((v, i) => (i === index ? result : v)));
}}
>
Error
</button>
</form>
{values.map((v, index) => (
<div key={index}>{v}</div>
))}
</div>
);
};
export default Page;
const result = await execute("add", a, b);
以上のような形で使います
名前に対応した型情報が自動的に割り当てられるので、パラメータの型が違うとその時点でエラーとなります
戻り値に対しても型情報が自動的に設定されます
まとめ
Worker用の関数の作成と利用が直感的になったので、かなり敷居が下がったのではないでしょうか
ただ、Webシステムは非同期で大概の処理が何とかなってしまうのが実情なので、マルチスレッドの使い道を探す方が大変かもしれません
Discussion