Web Worker/Comlinkで”重い処理をUIから隔離”

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

worker.postMessage({ type: 'PROCESS_CSV', data: csvData });

worker.onmessage = (event) => {
  if (event.data.type === 'RESULT') {
    console.log(event.data.result);
  }
};

// worker.js
self.onmessage = (event) => {
  if (event.data.type === 'PROCESS_CSV') {
    const result = processCSV(event.data.data);
    self.postMessage({ type: 'RESULT', result });
  }
};

// worker.ts
import { expose } from 'comlink';

const api = {
  async processCSV(data: string): Promise<ProcessedData> {
    // 重い処理
    const rows = data.split('\n');
    const processed = rows.map(row => {
      // 複雑な集計処理
      return analyzeRow(row);
    });
    return { items: processed, total: processed.length };
  },
  
  async processImage(imageData: ImageData): Promise<Blob> {
    // 画像処理
    const canvas = new OffscreenCanvas(imageData.width, imageData.height);
    const ctx = canvas.getContext('2d')!;
    ctx.putImageData(imageData, 0, 0);
    // リサイズ・圧縮処理
    return canvas.convertToBlob({ type: 'image/jpeg', quality: 0.8 });
  }
};

expose(api);

// main.ts
import { wrap, Remote } from 'comlink';

const worker = new Worker(new URL('./worker.ts', import.meta.url), {
  type: 'module'
});

const api: Remote<typeof workerApi> = wrap(worker);

// 型安全に呼び出せる
const result = await api.processCSV(csvData);
console.log(result.total); // TypeScriptの型推論が効く

// 元のコード(main.ts)
function analyzeLogData(logs: LogEntry[]): AnalysisResult {
  // 重い集計処理
  const grouped = groupBy(logs, 'userId');
  const stats = calculateStatistics(grouped);
  return { grouped, stats };
}

// Worker化後(worker.ts)
import { expose } from 'comlink';

const api = {
  analyzeLogData(logs: LogEntry[]): AnalysisResult {
    const grouped = groupBy(logs, 'userId');
    const stats = calculateStatistics(grouped);
    return { grouped, stats };
  }
};

expose(api);

// main.ts
import { transfer } from 'comlink';

// ArrayBufferやImageDataなどは転送可能
const buffer = new ArrayBuffer(1024 * 1024 * 10); // 10MB
const result = await api.processBuffer(transfer(buffer, [buffer]));

// bufferはもう使えない(ポインタがWorkerに移動)
console.log(buffer.byteLength); // 0

// worker.ts
const api = {
  async processWithCancel(
    data: string,
    signal: AbortSignal
  ): Promise<Result> {
    const chunks = splitIntoChunks(data);
    const results = [];
    
    for (const chunk of chunks) {
      // キャンセルチェック
      if (signal.aborted) {
        throw new Error('処理がキャンセルされました');
      }
      results.push(processChunk(chunk));
    }
    
    return { results };
  }
};

// main.ts
const controller = new AbortController();

// 10秒でタイムアウト
const timeoutId = setTimeout(() => controller.abort(), 10000);

try {
  const result = await api.processWithCancel(data, controller.signal);
  clearTimeout(timeoutId);
} catch (error) {
  console.error('処理失敗:', error);
}

// workerAdapter.ts
import { wrap, Remote } from 'comlink';

export class WorkerAdapter<T> {
  private worker: Worker;
  private api: Remote<T>;
  private isTerminated = false;

  constructor(workerUrl: URL) {
    this.worker = new Worker(workerUrl, { type: 'module' });
    this.api = wrap<T>(this.worker);
  }

  getAPI(): Remote<T> {
    if (this.isTerminated) {
      throw new Error('Worker is already terminated');
    }
    return this.api;
  }

  terminate(): void {
    this.worker.terminate();
    this.isTerminated = true;
  }

  // エラーハンドリング
  onError(handler: (error: ErrorEvent) => void): void {
    this.worker.addEventListener('error', handler);
  }
}

// 使用例
const csvWorker = new WorkerAdapter<typeof csvWorkerApi>(
  new URL('./csvWorker.ts', import.meta.url)
);

csvWorker.onError((error) => {
  console.error('Worker error:', error);
  // エラーログ送信、再起動など
});

const result = await csvWorker.getAPI().processCSV(data);

// 1件ずつWorkerに送る(非効率)
for (const item of items) {
  await api.processItem(item); // シリアライズが毎回発生
}

// バッチで送る
const result = await api.processBatch(items); // シリアライズは1回だけ

// worker.ts
const api = {
  async processData(data: string): Promise<Result> {
    try {
      return heavyProcess(data);
    } catch (error) {
      // エラーを適切に伝える
      console.error('Worker error:', error);
      throw new Error(`処理失敗: ${error.message}`);
    }
  }
};

// main.ts
try {
  const result = await api.processData(data);
} catch (error) {
  // エラーログ送信
  sendErrorLog({
    message: error.message,
    stack: error.stack,
    context: 'CSV processing'
  });
  // ユーザーへのフィードバック
  showErrorNotification('データ処理に失敗しました');
}

// メモリリーク検出
class WorkerPool {
  private workers: Worker[] = [];

  createWorker(): Worker {
    const worker = new Worker('./worker.js');
    this.workers.push(worker);
    return worker;
  }

  terminateAll(): void {
    this.workers.forEach(w => w.terminate());
    this.workers = [];
  }
}

// Reactでの使用例
useEffect(() => {
  const pool = new WorkerPool();
  const worker = pool.createWorker();
  
  return () => {
    pool.terminateAll(); // クリーンアップ必須
  };
}, []);