ローカルアプリケーションと比較して、Web アプリケーションでファイルシステムを操作することは常に困難でした。

しかし、jsが誕生した当初はあらゆるファイルを直接読み書きできたため、当時はjsウイルスが大量に生成され、セキュリティ上重大な問題を引き起こしていました。その後、js はファイルの読み取りと書き込みが禁止されたため、多くの機能 (ファイルの選択、変更と保存など) が基本的に不可能になり、アップロード、変更、ダウンロード、その他のスムーズでない操作によってのみ実現できました。

しかし現在では、Web アプリケーションの継続的な開発により、上記の問題点は基本的に File System Access API によって解決されています。

ファイルシステムアクセスAPI

ファイルシステムアクセス API は、Web アプリケーションがユーザーデバイスのファイルシステムにアクセスして操作できるようにする API です。この API を通じて、ユーザーの許可を得てファイルの読み取りと変更、ディレクトリ構造へのアクセスを行うことができます。

window.showOpenFilePicker()

ユーザーが 1 つ以上のファイルを選択できるようにするファイルチューザが表示されます。FileSystemFileHandle オブジェクトの配列を非同期的に返します。

window.showSaveFilePicker()

ファイルピッカーが表示され、ユーザーは既存のファイルを選択するか、新しいファイルの名前を入力してファイルを保存できます。FileSystemFileHandle オブジェクトを非同期的に返します。

window.showDirectoryPicker()

ディレクトリチューザを表示し、ユーザーがディレクトリを選択できるようにします。FileSystemDirectoryHandle オブジェクトを非同期的に返す

DataTransferItem.getAsFileSystemHandle()

ドラッグイベントで使用され、ドラッグされた要素がファイルの場合、FileSystemFileHandle オブジェクトの配列が非同期的に返されます。ドラッグしている要素がディレクトリの場合、FileSystemFileHandle オブジェクトを非同期的に返します。

StorageManager.getDirectory()

現在の Web サイトまたはアプリケーションのプライベートストレージスペース (元のプライベートファイルシステム) からディレクトリとコンテンツを読み取ります。

知らせ：

OPFS 内のファイルにアクセスする場合、権限のプロンプトは必要ありません。
Web サイトのデータを消去すると、OPFS が削除されます。
OPFS はブラウザのストレージクォータによって制限されます。

使用例

ファイルを読み取る

ファイルを読み取るには、まずユーザーにファイルを選択させる必要があります。ファイルシステムアクセス API を使用すると、次の window.showOpenFilePicker() 関数でこれを実現できます。

async function readFile() {
  try {
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    const contents = await file.text();
    console.log(contents);
  } catch (err) {
    console.error('Error reading file:', err);
  }
}

readFile();

この関数は、ユーザーがファイルを選択できるファイル選択ダイアログをトリガーします。ファイルの取得に成功したら、 fileHandle.getFile() File オブジェクトを取得し、それを使用して file.text() ファイルの内容を読み取ることができます。

文書を保存する

ファイルの読み取りと同様に、 window.showSaveFilePicker() ユーザーがファイルの保存場所を選択できるようにする関数が必要です。

async function saveFile(contents) {
  try {
    const fileHandle = await window.showSaveFilePicker();
    const writable = await fileHandle.createWritable();
    await writable.write(contents);
    await writable.close();
  } catch (err) {
    console.error('Error saving file:', err);
  }
}

const contentsToSave = 'This is a test file.';
saveFile(contentsToSave);

window.showSaveFilePicker() ファイルハンドルを返します。 fileHandle.createWritable() 書き込み可能なストリームを作成してそれを使用することで、writable.write() ファイルにコンテンツを書き込むことができます。最後に、 writable.close() を使用してストリームを閉じます。

互換性と権限

2021 年 9 月の時点で、File System Access API は主に Chrome、Edge、Opera などの Chromium ベースのブラウザでサポートされています。ただし、テクノロジーが発展するにつれて、より多くのブラウザがこの API をサポートする可能性があります。アプリがさまざまなブラウザーで適切に動作することを確認するには、ブラウザーの互換性を必ず確認してください。

api.ファイルシステムハンドル

api.ファイルシステムファイルハンドル

ユーザーのプライバシーとセキュリティを保護するために、ファイルシステムアクセス API はユーザーからの明示的な承認を必要とします。API は、ユーザーがファイルまたはディレクトリをアクティブに選択した場合にのみファイルシステムにアクセスできます。

公式デモ:テキストエディター

API ドキュメント:ファイルシステムアクセス API - Web API | MDN