File System API権限チェック

ブラウザのFile System APIで権限を確認し、必要に応じて要求を行う。

現在の権限がgrantedなら即座にtrueを返す。 権限がない場合は権限要求を行う。 権限要求はユーザーのクリックイベント内で呼ぶ必要がある。

async function verifyPermission(handle: FileSystemHandle, readWrite: boolean) {
  const options = {};
  if (readWrite) {
    options.mode = 'readwrite';
  }

  // 1. 現在の権限を確認
  if ((await handle.queryPermission(options)) === 'granted') {
    return true;
  }

  // 2. 権限がない場合、リクエストする
  if ((await handle.requestPermission(options)) === 'granted') {
    return true;
  }

  return false;
}

実装で効く場面

この helper は、queryPermission と requestPermission の流れを毎回書きたくない時に効く。特に handle を再利用する UI では、判定ロジックを 1 か所に寄せた方がクリック処理が読みやすい。

注意点は、権限要求が user gesture 前提であることと、readonly と readwrite を混ぜないこと。事前確認は背景でやれても、要求自体は click handler に寄せる方が安全。

実務メモ

このスニペットは、typescript、browser、file-system-api の周辺で同じ操作や判定を毎回書きたくない時に向く。小さな補助として切り出しておくと、呼び出し側では意図だけを追いやすい。

逆に、分岐や前提条件が増えて責務が膨らむなら、1本のスニペットに詰め込まない方がよい。手順と helper を分けるか、役割ごとに切り出す方が保守しやすい。

実装メモ

使う時は、入力、出力、副作用の3点を先に決めておくと流用しやすい。File System API権限チェック も typescript、browser、file-system-api の文脈で何を短くしたいスニペットなのかを先に固定すると、呼び出し側が読みやすくなる。

ブラウザのFile System APIで権限を確認し、必要に応じて要求を行う関数。読み取り専用・読み書き両用に対応。 という目的に対して、前提確認まで全部詰め込む必要はない。呼び出し側へ残す責務と、このスニペットで閉じる責務を分けた方が崩れにくい。