一部ブラウザのみ対応している JavaScript の機能に File System Access API というものがあります。
File System Access API – Web APIs ｜ MDN
“file system access api” ｜ Can I use… Support tables for HTML5, CSS3, etc
この機能はローカルのファイルシステムをブラウザから操作できる仕組みです。コンセプト上、危険な機能であり Firefox は実装しないと表明している機能でもあります。File System Access API を使うと次の様にファイルの読み書きができます。既存の操作との最大の違いはローカルのファイルシステムに保存されているファイルを上書きできることです。
例えば次の様に動作します。
// showOpenFilePicker の実行でブラウザ組み込みのファイル選択ダイアログが立ち上がります
// このダイアログは input[type="file"] のそれと同じです。
// ダイアログで選ばれたファイルやディレクトリがこの JavaScript の中で自由に操作されます。
const [fileHandle] = await window.showOpenFilePicker();
// ファイルオブジェクトを得ます
const file = await fileHandle.getFile();
// text メソッドでは中身を文字列型で受け取れます。
const fileContents = await file.text();
console.log(fileContents)
// 許可のおりたファイルの createWritable メソッド実行により、書き込み用のストリームが立ち上がります。
const writable = await fileHandle.createWritable();
// write メソッドでは追記ができます。
await writable.write('上書き内容');
// close で書き込みストリームを閉じます。
await writable.close();
もちろん新規作成もできます。
// ファイルをどこにどんな名前で保存するか訊くダイアログを表示
const saveHandle = await window.showSaveFilePicker({suggestedName: "README.md"})
// 保存先ファイルに書き込み準備
const writable = await saveHandle.createWritable();
// 先程同様に書き込んで終了
await writable.write('新規保存内容');
await writable.close();
なかなかすごい機能ですので File System Access API が使えるブラウザにおいては、ブラウザが提示してくる web ページの確認ダイアログは見逃せません。オンラインエディターなど、うまく安全に使えば便利そうな機能ではあります。
