Seu Dev Notes

OPFS(Origin Private File System)

一言まとめ

ブラウザがオリジンごとに提供するプライベートなファイルシステム。権限ダイアログなしで GB 単位のバイナリを置け、Worker 限定の同期ハンドルが IndexedDB より大幅に速い。SQLite Wasm や DuckDB-Wasm の保存先に使われる。

作成 · 更新 · #opfs#browser#storage#wasm
目次 7 sections
  1. 01 何か
  2. 02 localStorage / IndexedDB との違い
  3. 03 典型ユースケース
  4. 04 createSyncAccessHandle() と FileSystemSyncAccessHandle
  5. 05 対応状況
  6. 06 関連
  7. 07 更新履歴

調査時点: 2026-04。

何か#

OPFS は File System Access API の一部として標準化された、オリジン(ドメイン)専用のファイルシステム。ユーザーの実ファイルシステムとは別の隔離領域で、OS のファイラーからは見えない。

特徴中身
オリジン専用そのオリジンだけがアクセスできる
権限不要showOpenFilePicker() と違い、ダイアログなしで使える
高速FileSystemSyncAccessHandle(Worker 限定の同期 API)は IndexedDB より桁違いに速い
大容量ブラウザのストレージクォータの範囲で GB 単位を保存できる

localStorage / IndexedDB との違い#

localStorageIndexedDBOPFS
データモデルKVS(文字列)オブジェクトストアファイル
容量小(5〜10MB)中〜大大
速度中遅〜中速(Sync Handle は特に)
Worker 対応×○○(Sync Handle は Worker 必須)
用途軽量な設定構造化データバイナリ・DB ファイル

典型ユースケース#

  • SQLite を Wasm でブラウザ実行し、DB ファイルを OPFS に置く(sql.js、wa-sqlite、SQLite 公式の wasm ビルド)。
  • DuckDB-Wasm で分析用 DB をブラウザで動かす。
  • 動画・画像編集ツールのスクラッチ領域。
  • PWA のオフラインキャッシュで大きなバイナリを扱う。

createSyncAccessHandle() と FileSystemSyncAccessHandle#

FileSystemFileHandle.createSyncAccessHandle() がメソッドで、FileSystemSyncAccessHandle はその戻り値の型。Worker スレッドでのみ使える。

const root = await navigator.storage.getDirectory();
const fileHandle = await root.getFileHandle("data.db", { create: true });
const syncHandle = await fileHandle.createSyncAccessHandle(); // FileSystemSyncAccessHandle
syncHandle.read(buffer, { at: 0 });
syncHandle.write(buffer, { at: 0 });
syncHandle.close();

対応状況#

Chrome・Edge・Firefox・Safari で対応済み(バージョン差あり)。ストレージクォータの実際の上限はブラウザ・OS ごとに異なる。

関連#

更新履歴#

  • 2026-04-18: 初版(ローカル調査ノート)
  • 2026-10-17: Wiki へ移植、概念ページとして再構成

同じトピック — Web