FileSystemDirectoryHandle

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

File System Access API の FileSystemDirectoryHandle インターフェイスは、ファイルシステムのディレクトリーへのハンドルを提供します。

このインターフェイスは、メソッド window.showDirectoryPicker()・StorageManager.getDirectory()・DataTransferItem.getAsFileSystemHandle()・FileSystemDirectoryHandle.getDirectoryHandle() からアクセス可能です。

FileSystemHandle FileSystemDirectoryHandle

インスタンスプロパティ

親の FileSystemHandle からプロパティを継承します。

インスタンスメソッド

親の FileSystemHandle からメソッドを継承します。

FileSystemDirectoryHandle.entries()

オブジェクト自身の列挙可能なプロパティの [key, value] ペアの新しい 非同期イテレーター を返します。

FileSystemDirectoryHandle.getFileHandle()

メソッドが呼ばれたディレクトリー内の指定の名前のファイルを表す FileSystemFileHandle で解決する Promise を返します。

FileSystemDirectoryHandle.getDirectoryHandle()

メソッドが呼ばれたディレクトリー内の指定の名前のサブディレクトリーを表す FileSystemDirectoryHandle で解決される Promise を返します。

FileSystemDirectoryHandle.keys()

FileSystemDirectoryHandle 内の各アイテムのキーを含む新しい 非同期イテレーター を返します。

FileSystemDirectoryHandle.removeEntry()

ディレクトリーハンドルに指定の名前のファイルまたはディレクトリーがある場合、非同期でエントリーを削除しようとします。

FileSystemDirectoryHandle.resolve()

親ハンドルから指定の子エントリーへのディレクトリー名の Array (最後の要素は指定した子エントリーの名前) で解決する Promise を返します。

FileSystemDirectoryHandle.values()

FileSystemDirectoryHandle 内の各インデックスに対応する値を含む新しい 非同期イテレーター を返します。

FileSystemDirectoryHandle[@@asyncIterator]()

デフォルトでは entries 関数を返します。

例

以下の例では、指定の名前のディレクトリーハンドルを返します。指定したディレクトリーが存在しない場合は、作成されます。

js
const dirName = "directoryToGetName";

// ディレクトリーハンドル 'currentDirHandle' があると仮定
const subDir = currentDirHandle.getDirectoryHandle(dirName, { create: true });

以下の非同期関数は、resolve() を用いて、選択されたファイルの指定のディレクトリーハンドルを基準とする相対パスを取得します。

js
async function returnPathDirectories(directoryHandle) {
  // ファイルピッカーを開いてファイルハンドルを得る
  const handle = await self.showOpenFilePicker();
  if (!handle) {
    // ユーザーがキャンセルしたか、ファイルを開くのに失敗した
    return;
  }

  // ハンドルがディレクトリーハンドルが表すディレクトリー内にあるかを確認する
  const relativePaths = await directoryHandle.resolve(handle);

  if (relativePath === null) {
    // ディレクトリーハンドル内にない
  } else {
    // relativePath は相対パスを表す名前の配列

    for (const name of relativePaths) {
      // 各エントリーを記録する
      console.log(name);
    }
  }
}

以下の例では、ディレクトリーを再帰的に走査し、ディレクトリー内の各ファイルを表す FileSystemFileHandle オブジェクトを返します。

js
async function* getFilesRecursively(entry) {
  if (entry.kind === "file") {
    const file = await entry.getFile();
    if (file !== null) {
      file.relativePath = getRelativePath(entry);
      yield file;
    }
  } else if (entry.kind === "directory") {
    for await (const handle of entry.values()) {
      yield* getFilesRecursively(handle);
    }
  }
}
for await (const fileHandle of getFilesRecursively(directoryHandle)) {
  console.log(fileHandle);
}

仕様書

Specification
File System Standard
# api-filesystemdirectoryhandle

ブラウザーの互換性

BCD tables only load in the browser

関連情報