Web ワーカーとは何か、そして NextJS でそれを使用する方法

前提条件

• ReactJS/NextJSの基礎知識

---

Webワーカーとは

JavaScript はシングルスレッド言語であり、JavaScript が使用するスレッドはメインスレッドと呼ばれます
ブラウザは実際には他のスレッドを使用しています
ブラウザ API からの Web ワーカーは、JavaScript を使用して追加のスレッドを作成および登録する方法です

---

メインスレッドだけで作業できるのに、なぜ他のスレッドを作成するのでしょうか?

グラフを描画するには大量のデータを計算する必要があるとします。
これらの計算には、ページが応答しなくなるほど長い時間がかかる可能性があります
そこでウェブワーカーの出番です。
これらのデータを計算する新しいスレッドを作成でき、それが完了すると、Web ワーカーは結果をメインスレッドに送り返すことができます

---

NextJSでWebワーカーを使用する方法

このサンプルでは、​​Web Worker を使用して犬の写真 API を取得し、その結果をメインスレッドに送り返してそれらの画像を表示します

• 通常どおり NextJS プロジェクトを初期化します
• このサンプルではここで反応フックを使用したいため、ファイルの先頭に「use client」を追加して page.tsx をクライアント コンポーネントにします
• 通常の値の状態と onChange ハンドラーを使用して入力を作成します
• onClick イベントを持つボタンを作成します。このボタンを使用して、Web ワーカーに API を取得するように指示します
• Web ワーカー インスタンスを保持する Ref を作成します
• Web ワーカーを初期化するエフェクトを作成し、Web ワーカーが送り返すデータを処理するイベントをアタッチし、ページのアンマウント後にスレッド/Web ワーカーを終了します
• Web ワーカーから受信した画像 URL を保持する状態を作成します。
• page.tsx は次のようになります

"use client";

import { ChangeEvent, MouseEvent, useCallback, useEffect, useRef, useState } from "react";

export default function Home() {
    const [userInput, setUserInput] = useState<string>("");
    const workerRef = useRef<Worker>();
    const [dogPics, setDogPics] = useState<string[]>();

    useEffect(() => {
        workerRef.current = new Worker(new URL("./worker.ts", import.meta.url));
        workerRef.current.onmessage = (event: MessageEvent<string[]>) => setDogPics(event.data);
        return () => {
            workerRef.current?.terminate();
        };
    }, []);

    const handleUserInputChange = useCallback(
        (e: ChangeEvent<HTMLInputElement>) => {
            setUserInput(e.target.value);
        },
        [setUserInput]
    );

    const handleFetch = useCallback(
        (e: MouseEvent<HTMLButtonElement>) => {
            userInput && workerRef.current?.postMessage(userInput);
        },
        [userInput]
    );

    return (
        <div>
            <input
                placeholder="number of dogs"
                value={userInput}
                onChange={handleUserInputChange}
                className="mr-4 text-black"
            ></input>
            <button className="bg-green-500 text-black rounded" onClick={handleFetch}>
                fetch
            </button>
            {dogPics && dogPics.map((pic) => <img key={pic} src={pic} alt="dog pic"></img>)}
        </div>
    );
}

• page.tsx と同じフォルダーに worker.ts というファイルを作成します

self.onmessage = async (e: MessageEvent<string>) => {
    const url = `https://dog.ceo/api/breeds/image/random/${e.data}`;
    const response = await fetch(url).then((res) => res.json());
    self.postMessage(response.message);
};

次にアプリを実行して結果を確認してください!

以上がWeb ワーカーとは何か、そして NextJS でそれを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。