Web Workersでタスクオフロード完全ガイド｜postMessage・Comlink・INP改善を解説

>【メインスレッドがブロックされる典型的なケース】

❌ 大量データの処理（CSVパース・JSONの解析）
❌ 複雑な数値計算（物理シミュレーション・機械学習の推論）
❌ 画像処理（フィルター適用・リサイズ・カラー変換）
❌ 暗号化・ハッシュ計算
❌ 大きなデータの並び替え・検索
❌ Zip/Gzipの圧縮・解凍処理
❌ テキストの全文検索インデックス構築

→ これらをメインスレッドで実行すると：
  - スクロールが止まる
  - ボタンが反応しない
  - アニメーションがカクつく
  - Core Web Vitals（INP・LCP）が悪化する

>// main.js - メインスレッド側
const worker = new Worker('./worker.js')

// Workerにメッセージを送る
worker.postMessage({ type: 'CALCULATE', data: [1, 2, 3, 4, 5] })

// Workerからの結果を受け取る
worker.addEventListener('message', (event) => {
  console.log('計算結果:', event.data)  // → { result: 15 }
})

// エラー処理
worker.addEventListener('error', (error) => {
  console.error('Worker エラー:', error.message)
})

// Workerを終了する（不要になったら必ず破棄する）
// worker.terminate()

>// worker.js - Workerスレッド側
// ⚠️ WorkerではDOMにアクセスできない（document/windowは使えない）
// ✅ fetch・IndexedDB・WebSocket・setTimeout等は使える

addEventListener('message', (event) => {
  const { type, data } = event.data

  switch (type) {
    case 'CALCULATE': {
      // 重い計算処理（メインスレッドをブロックしない）
      const result = data.reduce((sum, n) => sum + n, 0)
      // 結果をメインスレッドに返す
      postMessage({ type: 'RESULT', result })
      break
    }
    case 'SORT': {
      const sorted = [...data].sort((a, b) => a - b)
      postMessage({ type: 'SORTED', result: sorted })
      break
    }
  }
})

>// csv-worker.js
addEventListener('message', (event) => {
  const { csvText } = event.data

  // 大量データのパース（メインスレッドをブロックしない）
  const lines = csvText.split('\n')
  const headers = lines[0].split(',')
  const records = lines.slice(1)
    .filter(line => line.trim())  // 空行を除外
    .map(line => {
      const values = line.split(',')
      return headers.reduce((obj, header, i) => {
        obj[header.trim()] = values[i]?.trim() ?? ''
        return obj
      }, {})
    })

  // 処理完了を通知
  postMessage({ records, count: records.length })
})

>// main.js - CSVファイルをWorkerで処理する
const csvWorker = new Worker('./csv-worker.js')

async function handleFileUpload(file) {
  const text = await file.text()

  // UIは継続して応答する（スピナーを表示しながら待てる）
  showLoadingSpinner()

  csvWorker.postMessage({ csvText: text })

  csvWorker.addEventListener('message', (event) => {
    hideLoadingSpinner()
    const { records, count } = event.data
    console.log(`${count}件のレコードをパースしました`)
    renderTable(records)
  }, { once: true })  // 一度だけ受け取ったらリスナーを削除
}

>// transferable_example.js - TransferableObjectsの使い方

// ❌ 遅い：100MBのArrayBufferをコピーして転送（合計200MB使用）
const bigBuffer = new ArrayBuffer(100 * 1024 * 1024)  // 100MB
worker.postMessage({ buffer: bigBuffer })  // コピーされる

// ✅ 速い：ArrayBufferの所有権を移転（コピーなし、メモリ効率◎）
const bigBuffer2 = new ArrayBuffer(100 * 1024 * 1024)  // 100MB
worker.postMessage(
  { buffer: bigBuffer2 },
  [bigBuffer2]  // 第2引数にTransferリストを指定
)
// ⚠️ 移転後は bigBuffer2 は使えなくなる（detached状態）
console.log(bigBuffer2.byteLength)  // → 0（空になっている）

// Transferableとして使えるオブジェクト：
// - ArrayBuffer
// - MessagePort
// - ReadableStream / WritableStream / TransformStream
// - ImageBitmap
// - OffscreenCanvas

>// image-worker.js - 画像処理Workerでの双方向Transferable活用

addEventListener('message', (event) => {
  const { buffer, width, height, filter } = event.data
  const data = new Uint8ClampedArray(buffer)

  // フィルター処理
  if (filter === 'grayscale') {
    for (let i = 0; i < data.length; i += 4) {
      const avg = (data[i] + data[i+1] + data[i+2]) / 3
      data[i] = data[i+1] = data[i+2] = avg
    }
  }

  // 処理済みバッファを所有権移転で返す（コピーなし）
  postMessage(
    { buffer, width, height },
    [buffer]  // 所有権を移転して返す
  )
})

>// main.js - Canvas画像をWorkerで処理する高速版

const imageWorker = new Worker('./image-worker.js', { type: 'module' })

async function applyFilterFast(canvas, filter) {
  const ctx = canvas.getContext('2d')
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)

  // ImageData.data（Uint8ClampedArray）のbufferをTransferableで送る
  const buffer = imageData.data.buffer

  return new Promise((resolve) => {
    imageWorker.addEventListener('message', (e) => {
      const resultData = new Uint8ClampedArray(e.data.buffer)
      const resultImageData = new ImageData(resultData, canvas.width, canvas.height)
      ctx.putImageData(resultImageData, 0, 0)
      resolve()
    }, { once: true })

    imageWorker.postMessage(
      { buffer, width: canvas.width, height: canvas.height, filter },
      [buffer]  // バッファの所有権を移転
    )
  })
}

>npm install comlink

>// heavy-worker.ts - Comlink で Worker の関数を公開する
import { expose } from 'comlink'

const api = {
  // 重い画像フィルター処理
  async applyGrayscale(imageData: ImageData): Promise<ImageData> {
    const data = imageData.data
    for (let i = 0; i < data.length; i += 4) {
      const avg = (data[i] + data[i+1] + data[i+2]) / 3
      data[i] = data[i+1] = data[i+2] = avg
    }
    return imageData
  },

  // 大規模なソート処理
  async sortLargeArray(arr: number[]): Promise<number[]> {
    return arr.sort((a, b) => a - b)
  },

  // ハッシュ計算（Web Crypto API はWorkerでも使える）
  async computeHash(text: string): Promise<string> {
    const encoder = new TextEncoder()
    const data = encoder.encode(text)
    const hashBuffer = await crypto.subtle.digest('SHA-256', data)
    const hashArray = Array.from(new Uint8Array(hashBuffer))
    return hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
  },

  // プログレス付き重い処理（コールバックを渡す例）
  async processWithProgress(
    data: number[],
    onProgress: (percent: number) => void
  ): Promise<number[]> {
    const result = []
    for (let i = 0; i < data.length; i++) {
      result.push(data[i] * 2)  // 重い処理のシミュレーション
      if (i % 1000 === 0) {
        onProgress(Math.floor((i / data.length) * 100))
      }
    }
    return result
  }
}

expose(api)

>// main.ts - Comlink で Worker を通常の関数のように呼び出す
import { wrap, proxy } from 'comlink'
import type { Remote } from 'comlink'

// Worker の型
type WorkerAPI = typeof import('./heavy-worker').api

const worker = new Worker(new URL('./heavy-worker.ts', import.meta.url), {
  type: 'module'
})
const api: Remote<WorkerAPI> = wrap<WorkerAPI>(worker)

// async/await で Worker の関数を直接呼び出せる
async function processImage(canvas: HTMLCanvasElement) {
  const ctx = canvas.getContext('2d')!
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)

  // Worker に処理をオフロード（UI はブロックされない）
  const processed = await api.applyGrayscale(imageData)
  ctx.putImageData(processed, 0, 0)
}

// コールバック付き処理（Comlink の proxy() を使う）
async function processWithProgress(data: number[]) {
  const result = await api.processWithProgress(
    data,
    proxy((percent: number) => {
      console.log(`進捗: ${percent}%`)
      updateProgressBar(percent)
    })
  )
  return result
}

>// worker-pool.ts - シンプルなWorker Pool実装

class WorkerPool {
  private workers: Worker[]
  private taskQueue: Array<{
    data: unknown
    resolve: (result: unknown) => void
    reject: (error: unknown) => void
  }> = []
  private idleWorkers: Worker[]

  constructor(workerUrl: URL, poolSize: number = navigator.hardwareConcurrency) {
    // CPUのコア数に合わせてWorkerを起動（デフォルト）
    this.workers = Array.from({ length: poolSize }, () =>
      new Worker(workerUrl, { type: 'module' })
    )
    this.idleWorkers = [...this.workers]

    console.log(`Worker Pool: ${poolSize}スレッドで起動しました`)
  }

  async execute(data: unknown): Promise<unknown> {
    return new Promise((resolve, reject) => {
      const task = { data, resolve, reject }

      const idleWorker = this.idleWorkers.pop()
      if (idleWorker) {
        this.runTask(idleWorker, task)
      } else {
        // 空きWorkerがなければキューに追加
        this.taskQueue.push(task)
      }
    })
  }

  private runTask(worker: Worker, task: typeof this.taskQueue[0]) {
    const handler = (event: MessageEvent) => {
      worker.removeEventListener('message', handler)
      worker.removeEventListener('error', errorHandler)

      task.resolve(event.data)

      // 次のタスクを取り出して実行
      const nextTask = this.taskQueue.shift()
      if (nextTask) {
        this.runTask(worker, nextTask)
      } else {
        this.idleWorkers.push(worker)
      }
    }

    const errorHandler = (error: ErrorEvent) => {
      worker.removeEventListener('message', handler)
      worker.removeEventListener('error', errorHandler)
      task.reject(error)
      this.idleWorkers.push(worker)
    }

    worker.addEventListener('message', handler)
    worker.addEventListener('error', errorHandler)
    worker.postMessage(task.data)
  }

  terminate() {
    this.workers.forEach(w => w.terminate())
  }
}

// 使用例：100枚の画像を並列処理
const pool = new WorkerPool(new URL('./image-worker.ts', import.meta.url))

const images = getImageDataArray()  // 100個のImageData
const results = await Promise.all(
  images.map(img => pool.execute({ imageData: img, filter: 'grayscale' }))
)
console.log(`${results.length}枚の画像処理完了`)
pool.terminate()

>// hooks/useWorker.ts - Web WorkerをReact Hooksで管理する

import { useEffect, useRef, useState, useCallback } from 'react'

type WorkerState<T> = {
  result: T | null
  loading: boolean
  error: string | null
}

export function useWorker<T = unknown>(workerUrl: URL) {
  const workerRef = useRef<Worker | null>(null)
  const [state, setState] = useState<WorkerState<T>>({
    result: null,
    loading: false,
    error: null,
  })

  useEffect(() => {
    workerRef.current = new Worker(workerUrl, { type: 'module' })

    workerRef.current.addEventListener('message', (event: MessageEvent<T>) => {
      setState({ result: event.data, loading: false, error: null })
    })

    workerRef.current.addEventListener('error', (error: ErrorEvent) => {
      setState(prev => ({ ...prev, loading: false, error: error.message }))
    })

    return () => {
      workerRef.current?.terminate()
    }
  }, [workerUrl])

  const execute = useCallback((data: unknown) => {
    if (!workerRef.current) return
    setState(prev => ({ ...prev, loading: true, error: null }))
    workerRef.current.postMessage(data)
  }, [])

  return { ...state, execute }
}

>// components/DataProcessor.tsx - カスタムHookを使うコンポーネント
'use client'

import { useWorker } from '@/hooks/useWorker'
import { useState } from 'react'

type SortResult = { sorted: number[]; time: number }

export function DataProcessor() {
  const [inputText, setInputText] = useState('')
  const { result, loading, error, execute } = useWorker<SortResult>(
    new URL('../workers/sort-worker.ts', import.meta.url)
  )

  const handleProcess = () => {
    const numbers = inputText
      .split(',')
      .map(Number)
      .filter(n => !isNaN(n))
    execute({ numbers })
  }

  return (
    <div className="p-4 space-y-4">
      <textarea
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        placeholder="カンマ区切りで数値を入力（例: 3,1,4,1,5,9,2,6）"
        className="w-full border rounded p-2 h-24"
      />
      <button
        onClick={handleProcess}
        disabled={loading || !inputText}
        className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50"
      >
        {loading ? 'ソート中...' : 'Workerでソート'}
      </button>

      {error && <p className="text-red-500">{error}</p>}

      {result && (
        <div className="bg-gray-50 p-3 rounded">
          <p className="text-sm text-gray-500">処理時間: {result.time}ms</p>
          <p className="mt-1">{result.sorted.slice(0, 20).join(', ')}...</p>
        </div>
      )}
    </div>
  )
}

>// Vite（Next.js / React）での Worker ファイルのインポート方法

// ✅ Vite 推奨の書き方（import.meta.url を使う）
const worker = new Worker(new URL('./heavy-worker.ts', import.meta.url), {
  type: 'module'
})

// ✅ Vite の ?worker サフィックスを使う書き方
import HeavyWorker from './heavy-worker.ts?worker'
const worker = new HeavyWorker()

// ✅ Next.js での書き方（package.json の type: "module" が必要）
// next.config.ts で worker を設定
// module.exports = { experimental: { workerThreads: true } }

>【OMTアーキテクチャの分担】

メインスレッド（UIスレッド）：
→ DOMの更新・アニメーション・CSS適用
→ ユーザー操作のイベント受信
→ Workerから受け取った状態変化をレンダリング
→ 担当するJavaScriptは最小限に抑える

Workerスレッド：
→ アプリケーション状態管理（Redux相当）
→ ビジネスロジック・計算
→ データの取得・変換・バリデーション
→ 状態変化をメインスレッドに通知

メリット：
✅ ローエンドデバイス（Android エントリーモデル等）でもUIが滑らかになる
✅ ロジックがDOMから分離されてユニットテストが書きやすくなる
✅ 将来的にマルチコアへのスケールアウトが容易
✅ UIとロジックの関心事を明確に分離できる

注意点：
→ Worker-メインスレッド間の通信オーバーヘッドが発生する
→ DOM操作は依然メインスレッドのみ可能
→ 初期実装コストがやや高い（設計を丁寧に考える必要がある）

>// state-worker.ts - OMTパターンでのステート管理Worker

type State = {
  items: Item[]
  filter: string
  sortBy: string
}

type Action =
  | { type: 'SET_FILTER'; filter: string }
  | { type: 'SET_SORT'; sortBy: string }
  | { type: 'LOAD_ITEMS'; items: Item[] }

let state: State = {
  items: [],
  filter: '',
  sortBy: 'name'
}

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'SET_FILTER':
      return { ...state, filter: action.filter }
    case 'SET_SORT':
      return { ...state, sortBy: action.sortBy }
    case 'LOAD_ITEMS':
      return { ...state, items: action.items }
    default:
      return state
  }
}

function getFilteredSortedItems(state: State) {
  return state.items
    .filter(item =>
      item.name.toLowerCase().includes(state.filter.toLowerCase())
    )
    .sort((a, b) =>
      a[state.sortBy as keyof Item] > b[state.sortBy as keyof Item] ? 1 : -1
    )
}

addEventListener('message', (event) => {
  const action: Action = event.data

  // 状態を更新
  state = reducer(state, action)

  // フィルター・ソート済みのアイテムを計算（重い処理）
  const displayItems = getFilteredSortedItems(state)

  // 差分のみメインスレッドに送る
  postMessage({ type: 'STATE_UPDATE', displayItems })
})

>【Chrome DevTools でのWorkerパフォーマンス計測手順】

1. DevToolsを開く（F12）
2. Performanceタブを選択
3. 「Record」ボタンを押して処理を実行
4. 「Stop」で記録終了

確認ポイント：
- 「Main」スレッドの長いタスク（赤くマークされる50ms超のタスク）
- 「Worker」スレッドの処理時間
- postMessage の通信頻度とサイズ

最適化の指標：
- メインスレッドのタスクを 50ms 以下に抑える
- Workerへの postMessage は頻繁すぎない（バッチ処理を検討）
- 大きなデータはTransferableを使う

>// 頻繁すぎるpostMessageはオーバーヘッドになる
// バッチ処理で通信回数を減らす

// ❌ 悪い例：毎フレームworkerに送信（60fps = 1秒60回）
function onFrameUpdate(data) {
  worker.postMessage({ type: 'UPDATE', data })  // 1秒に60回送信
}

// ✅ 良い例：データを溜めてまとめて送信（通信回数を削減）
const pendingData: unknown[] = []

function onFrameUpdate(data) {
  pendingData.push(data)
}

// 100ms ごとにバッチ送信
setInterval(() => {
  if (pendingData.length === 0) return
  worker.postMessage({ type: 'BATCH_UPDATE', items: [...pendingData] })
  pendingData.length = 0
}, 100)