このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

FileSystemDirectoryHandle

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2023年3月⁩.

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

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

このインターフェイスは、メソッド 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[Symbol.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
# api-filesystemdirectoryhandle

ブラウザーの互換性

関連情報