Reactで「名前を付けて保存」と「上書き保存」を作る方法

src/useSaveFile.ts(28,17): error TS2339: Property 'showSaveFilePicker' does not exist on type 'Window & typeof globalThis'.

src/nocheck.ts(3,10): error TS2722: Cannot invoke an object which is possibly 'undefined'.

// src/file-system-access.d.ts
// TypeScript の lib.dom.d.ts には showSaveFilePicker がないので、使う分だけ書き足す
interface SaveFilePickerOptions {
  suggestedName?: string;
  types?: { description?: string; accept: Record<string, string | string[]> }[];
  excludeAcceptAllOption?: boolean;
  id?: string;
}

interface Window {
  // 対応していないブラウザもあるので、省略可能にしておく
  showSaveFilePicker?: (options?: SaveFilePickerOptions) => Promise<FileSystemFileHandle>;
}

// src/useSaveFile.ts
import { useRef, useState } from 'react';

export type SaveResult = 'saved' | 'canceled' | 'downloaded';

const TYPES = [{ description: 'テキストファイル', accept: { 'text/plain': ['.txt'] } }];

async function writeText(handle: FileSystemFileHandle, text: string) {
  const writable = await handle.createWritable();
  await writable.write(text);
  await writable.close(); // close() まで終えて、はじめてファイルに書き込まれる
}

function download(text: string, name: string) {
  const url = URL.createObjectURL(new Blob([text], { type: 'text/plain' }));
  const a = document.createElement('a');
  a.href = url;
  a.download = name;
  a.click();
  URL.revokeObjectURL(url);
}

export function useSaveFile(suggestedName: string) {
  // 保存先のハンドルは画面に出さないので、state ではなく ref に持つ
  const handleRef = useRef<FileSystemFileHandle | null>(null);
  const [fileName, setFileName] = useState<string | null>(null);

  async function saveAs(text: string): Promise<SaveResult> {
    if (!window.showSaveFilePicker) {
      download(text, suggestedName);
      return 'downloaded';
    }
    let handle: FileSystemFileHandle;
    try {
      // クリックの処理の中で、ほかの await より先に呼ぶ
      handle = await window.showSaveFilePicker({ suggestedName, types: TYPES });
    } catch (e) {
      if (e instanceof DOMException && e.name === 'AbortError') return 'canceled';
      throw e;
    }
    await writeText(handle, text);
    handleRef.current = handle;
    setFileName(handle.name);
    return 'saved';
  }

  async function save(text: string): Promise<SaveResult> {
    if (!handleRef.current) return saveAs(text);
    await writeText(handleRef.current, text);
    return 'saved';
  }

  return { fileName, save, saveAs };
}

// src/App.tsx
import { useState } from 'react';
import { useSaveFile, type SaveResult } from './useSaveFile';

const MESSAGES: Record<SaveResult, string> = {
  saved: '保存しました',
  canceled: '保存を取り消しました',
  downloaded: 'ダウンロードとして保存しました',
};

export function App() {
  const [text, setText] = useState('買い物メモ\n- 牛乳\n- 卵\n');
  const [message, setMessage] = useState('');
  const { fileName, save, saveAs } = useSaveFile('memo.txt');

  async function run(action: (text: string) => Promise<SaveResult>) {
    try {
      setMessage(MESSAGES[await action(text)]);
    } catch (e) {
      setMessage(`保存できませんでした（${e instanceof Error ? e.name : String(e)}）`);
    }
  }

  return (
    <main>
      <p>ファイル：<output id="file">{fileName ?? '（未保存）'}</output></p>
      <textarea value={text} onChange={(e) => setText(e.target.value)} rows={6} cols={40} />
      <p>
        <button onClick={() => run(saveAs)}>名前を付けて保存</button>{' '}
        <button onClick={() => run(save)}>上書き保存</button>
      </p>
      <p id="message" role="status">{message}</p>
    </main>
  );
}

SecurityError: Failed to execute 'showSaveFilePicker' on 'Window': Must be handling a user gesture to show a file picker.