IndexedDB 実践：ブラウザでの大容量ファイル保存とオフラインアーキテクチャ

なぜ IndexedDB が必要か？

ブラウザのストレージ方式にはそれぞれ限界があります：

方式	容量	データ型	同期 API	用途
Cookie	~4KB	文字列	✅	セッション識別
localStorage	~5MB	文字列	✅	簡単な設定
sessionStorage	~5MB	文字列	✅	一時的な状態
IndexedDB	数百 MB～GB	任意の構造化データ	❌ 非同期	大容量ファイル、オフラインアプリ

PDF 処理の中間結果、WASM モジュール、ユーザーのアップロード履歴をブラウザにキャッシュする必要があるツールサイトにとって、IndexedDB は唯一の現実的な選択肢です。

基本概念

データベース → オブジェクトストア → レコード

Database: "toolsku-cache"
  ├── ObjectStore: "wasm-modules"     (key: moduleName)
  ├── ObjectStore: "file-cache"       (key: fileHash, index: timestamp)
  └── ObjectStore: "user-preferences" (key: settingKey)

トランザクションと並行処理

IndexedDB のトランザクションは自動コミットされ、同一 ObjectStore には同時に 1 つの読み書きトランザクションしか実行できません：

const tx = db.transaction(['file-cache'], 'readwrite');
const store = tx.objectStore('file-cache');
await store.put({ hash: 'abc123', data: arrayBuffer, timestamp: Date.now() });
await tx.done; // トランザクション完了を待つ

ToolsKu における IndexedDB の活用

WASM モジュールのキャッシュ

ffmpeg.wasm は約 30MB で、毎回の読み込みに 3～5 秒かかります。IndexedDB にキャッシュすれば、2 回目以降はほぼ待ち時間ゼロになります：

async function getWasmModule(name: string): Promise<ArrayBuffer> {
  const cached = await idb.get('wasm-modules', name);
  if (cached) return cached;

  const response = await fetch(`/wasm/${name}.wasm`);
  const buffer = await response.arrayBuffer();
  await idb.put('wasm-modules', buffer, name);
  return buffer;
}

大容量ファイルのチャンク保存

50MB を超えるファイルは IndexedDB に一度に保存するのに適していません。チャンク戦略：

ファイル (200MB) → 4MB チャンクに分割 → IndexedDB に個別保存
key: "file:{hash}:chunk:{index}"
読み取り時に順番に結合 → 完全なファイルを復元

バージョン移行

データベースのスキーマ変更時は onupgradeneeded で移行を処理します：

const request = indexedDB.open('toolsku-cache', 2); // バージョン 2

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  if (event.oldVersion < 2) {
    db.createObjectStore('processing-history', { keyPath: 'id' });
  }
};

ベストプラクティス：ObjectStore は追加のみ、削除しない。バージョン番号を増やして移行をトリガーし、ユーザーデータの削除を避けます。

IndexedDB vs OPFS

特性	IndexedDB	OPFS (Origin Private File System)
API の成熟度	広くサポート	Chrome 86+ / Safari 15.2+
読み書きモデル	キーバリューストア	本物のファイルシステム
パフォーマンス	中程度	より高い（特に同期アクセス）
用途	構造化キャッシュ	大容量ファイルの I/O

ToolsKu は主に IndexedDB を使用し、Chrome 上では OPFS をパフォーマンス最適化の代替として検討しています。

まとめ

IndexedDB はオフラインファーストのブラウザツールを構築するための重要な基盤です。ObjectStore の適切な設計、WASM キャッシュ、チャンク保存戦略により、ToolsKu は低速ネットワーク環境でもスムーズな体験を提供できます。