File System Access API - ローカルファイルの読み書き

File System Access API検出

File System Access APIは、ファイルピッカーダイアログを通じてユーザーのローカルファイルシステム上のファイルを読み書きすることをWebアプリケーションに許可し、Webとデスクトップアプリケーションのギャップを埋めます。

検出

const hasFileSystemAccess = 'showOpenFilePicker' in window;
const hasSaveFilePicker = 'showSaveFilePicker' in window;
const hasDirectoryPicker = 'showDirectoryPicker' in window;

ファイルを開く

async function openFile() {
  const [handle] = await window.showOpenFilePicker({
    types: [{
      description: 'テキストファイル',
      accept: { 'text/plain': ['.txt', '.md'] },
    }],
    multiple: false,
  });
  const file = await handle.getFile();
  const text = await file.text();
  return { handle, text };
}

ファイルを保存

async function saveFile(handle, content) {
  if (!handle) {
    handle = await window.showSaveFilePicker({
      suggestedName: 'document.txt',
      types: [{
        description: 'テキストファイル',
        accept: { 'text/plain': ['.txt'] },
      }],
    });
  }
  const writable = await handle.createWritable();
  await writable.write(content);
  await writable.close();
  return handle;
}

ディレクトリアクセス

async function openDirectory() {
  const dirHandle = await window.showDirectoryPicker();
  for await (const entry of dirHandle.values()) {
    console.log(entry.kind, entry.name);
  }
}

セキュリティモデル

• ユーザージェスチャー必須: すべてのピッカーメソッドに最近のユーザーインタラクションが必要
• ファイルごとのパーミッション: ユーザーは個別のファイルまたはディレクトリへのアクセスを許可
• 取り消し可能: パーミッションはいつでも取り消し可能
• サイレントアクセスなし: ユーザーがピッカーを通じて明示的に選択しない限り、APIはファイルにアクセスできない

ブラウザサポート

現在Chromiumブラウザ（Chrome、Edge、Opera）で利用可能。FirefoxとSafariはファイルアクセスに異なるアプローチを使用しています。