はじめに
Web開発をしていると、バックグラウンドで重い処理を行うためにWeb Workerを使用することがあります。しかし、Web Workerには一部の制限があり、その中の1つがlocalStorageへのアクセスができないということです。
この記事では、なぜWeb WorkerでlocalStorageが使えないのか、そしてその代替手段について説明します。
なぜlocalStorageが使えないのか？
Web WorkerでlocalStorageが使えない理由は、以下の2つの要因によります：
- Web Workerは独自の実行コンテキストを持っています
-
localStorageはwindowオブジェクトの一部として実装されています
Web Workerは、メインスレッドとは異なるグローバルスコープ（WorkerGlobalScope）で実行されます。このスコープでは、windowオブジェクトにアクセスすることができません。
そのため、window.localStorageにアクセスしようとすると、以下のようなエラーが発生します：
// worker.js
console.log(window.localStorage); // ReferenceError: window is not defined
console.log(localStorage); // ReferenceError: localStorage is not defined
代替手段：IndexedDB
Web Workerで永続的なデータストレージが必要な場合、IndexedDBを使用することができます。IndexedDBは以下の特徴を持っています：
- Web Workerからアクセス可能
- キー・バリューストアとして機能
- 非同期APIを提供
- より大きなデータ量を扱える
基本的な使用例
以下は、IndexedDBを使用してデータを保存・取得する簡単な例です：
// worker.js
let db;
const request = indexedDB.open("MyDatabase", 1);
request.onerror = (event) => {
console.error("Database error: " + event.target.error);
};
request.onsuccess = (event) => {
db = event.target.result;
console.log("Database opened successfully");
};
request.onupgradeneeded = (event) => {
const db = event.target.result;
const store = db.createObjectStore("MyStore", { keyPath: "id" });
};
// データの保存
function saveData(data) {
const transaction = db.transaction(["MyStore"], "readwrite");
const store = transaction.objectStore("MyStore");
store.put(data);
}
// データの取得
function getData(id) {
const transaction = db.transaction(["MyStore"], "readonly");
const store = transaction.objectStore("MyStore");
const request = store.get(id);
request.onsuccess = (event) => {
const data = event.target.result;
self.postMessage({ type: 'getData', data });
};
}
idb-keyvalライブラリの利用
より簡単にIndexedDBを使用したい場合は、idb-keyvalというライブラリを使用することができます。このライブラリは、localStorageに似た簡単なAPIを提供します：
import { get, set } from 'idb-keyval';
// データの保存
await set('user', { name: 'John', age: 30 });
// データの取得
const user = await get('user');
トラブルシューティング
Web Workerを使用する際によくある問題と解決方法をまとめます：
-
ImportScriptsエラー
// エラー: Failed to execute 'importScripts' on 'WorkerGlobalScope' importScripts('https://example.com/script.js');- 原因: CORSポリシーやセキュリティ上の制限
- 解決: 同一オリジンのスクリプトを使用するか、適切なCORSヘッダーを設定
-
SharedWorkerの接続エラー
// エラー: Failed to construct 'SharedWorker' const worker = new SharedWorker('worker.js');- 原因: プライベートブラウジングモードや異なるオリジン間での共有
- 解決: 同一オリジンで実行されていることを確認
-
データ転送の問題
// 注意: 構造化クローンアルゴリズムの制限 worker.postMessage(window); // エラー: window オブジェクトは転送不可- 原因: 転送できないオブジェクトタイプの使用
- 解決: シリアライズ可能なデータ形式に変換
まとめ
Web WorkerでlocalStorageが使えない理由は、Web Workerが独自の実行コンテキストを持ち、windowオブジェクトにアクセスできないためです。
代替手段として：
- IndexedDBを直接使用する
-
idb-keyvalのような補助ライブラリを使用する