// XMLHttpRequest（旧来のパターン）
function fetchDataXHR(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        callback(null, JSON.parse(xhr.responseText));
      } else {
        callback(new Error(`HTTP ${xhr.status}`));
      }
    }
  };
  xhr.onerror = function () {
    callback(new Error('Network error'));
  };
  xhr.send();
}
 
// Fetch API（モダンなパターン）
async function fetchData(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }
  return response.json();
}

// 最もシンプルなGET
const response = await fetch('/api/users');
const users = await response.json();
console.log(users);
 
// URLSearchParams によるクエリパラメータの構築
const params = new URLSearchParams({
  page: '1',
  limit: '20',
  sort: 'created_at',
  order: 'desc',
});
const response = await fetch(`/api/users?${params}`);
const data = await response.json();
 
// 配列パラメータの追加
const params = new URLSearchParams();
params.append('tag', 'javascript');
params.append('tag', 'typescript');
params.append('tag', 'react');
// → tag=javascript&tag=typescript&tag=react
 
// URL オブジェクトとの組み合わせ
const url = new URL('/api/search', 'https://api.example.com');
url.searchParams.set('q', 'fetch api');
url.searchParams.set('lang', 'ja');
const response = await fetch(url);
// → https://api.example.com/api/search?q=fetch+api&lang=ja

// JSON送信
const response = await fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: '田中太郎',
    email: 'taro@example.com',
    role: 'admin',
  }),
});
 
if (!response.ok) {
  throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
 
const created = await response.json();
console.log('Created user:', created.id);
 
// FormData送信（ファイルアップロード含む）
const formData = new FormData();
formData.append('name', '田中太郎');
formData.append('avatar', fileInput.files[0]);
formData.append('documents', file1);
formData.append('documents', file2);
 
// FormDataの場合、Content-Typeは自動設定される（boundary含む）
const response = await fetch('/api/users', {
  method: 'POST',
  body: formData,
  // headers: { 'Content-Type': 'multipart/form-data' } は設定しない！
});
 
// URLSearchParams送信（application/x-www-form-urlencoded）
const body = new URLSearchParams({
  username: 'taro',
  password: 'secret123',
  grant_type: 'password',
});
 
const response = await fetch('/oauth/token', {
  method: 'POST',
  body, // Content-Typeは自動でapplication/x-www-form-urlencodedになる
});

// PUTリクエスト（リソース全体の置換）
const response = await fetch(`/api/users/${userId}`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    name: '田中太郎',
    email: 'taro@example.com',
    role: 'editor',
    active: true,
  }),
});
 
// PATCHリクエスト（部分更新）
const response = await fetch(`/api/users/${userId}`, {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    role: 'admin',
  }),
});
 
// JSON Patch形式（RFC 6902）
const response = await fetch(`/api/users/${userId}`, {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json-patch+json' },
  body: JSON.stringify([
    { op: 'replace', path: '/role', value: 'admin' },
    { op: 'add', path: '/permissions/-', value: 'manage_users' },
    { op: 'remove', path: '/temporaryFlag' },
  ]),
});
 
// DELETEリクエスト
const response = await fetch(`/api/users/${userId}`, {
  method: 'DELETE',
});
 
if (response.status === 204) {
  console.log('Successfully deleted (no content)');
} else if (response.ok) {
  const result = await response.json();
  console.log('Deleted:', result);
}
 
// DELETEリクエストにボディを含める場合
const response = await fetch('/api/users/batch', {
  method: 'DELETE',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    ids: [1, 2, 3, 4, 5],
    reason: 'Account cleanup',
  }),
});

// ★ 注意1: fetchはネットワークエラー時のみrejectする
// → 404や500はrejectされない！
try {
  const response = await fetch('/api/nonexistent');
  // response.status === 404 だが、catchには入らない
  console.log(response.ok); // false
  console.log(response.status); // 404
} catch (err) {
  // ネットワーク切断・DNS解決失敗・CORSエラー等の場合のみ
  console.error('Network error:', err);
}
 
// ★ 注意2: レスポンスボディは1回しか読めない
const response = await fetch('/api/data');
const json = await response.json();
// const text = await response.text(); // エラー！bodyは消費済み
 
// 複数回読みたい場合はcloneを使う
const response = await fetch('/api/data');
const clone = response.clone();
const json = await response.json();
const text = await clone.text(); // これはOK
 
// ★ 注意3: cookieのデフォルト送信挙動
// same-originリクエストではcookieが送信される（credentials: 'same-origin'がデフォルト）
// cross-originリクエストではcookieは送信されない
// cross-originでcookieを送信するにはcredentials: 'include'が必要
const response = await fetch('https://other-domain.com/api/data', {
  credentials: 'include', // クロスオリジンでcookieを送信
});
 
// ★ 注意4: リダイレクトの処理
const response = await fetch('/api/redirect', {
  redirect: 'follow',  // デフォルト: リダイレクトを自動追跡
  // redirect: 'error', // リダイレクト時にエラー
  // redirect: 'manual', // リダイレクトを手動処理
});
 
// manualの場合、opaqueredirect レスポンスが返る
if (response.type === 'opaqueredirect') {
  const redirectUrl = response.url;
  console.log('Redirected to:', redirectUrl);
}

// Requestオブジェクトの明示的な生成
const request = new Request('/api/users', {
  method: 'GET',
  headers: new Headers({
    'Accept': 'application/json',
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiJ9...',
  }),
  mode: 'cors',
  credentials: 'same-origin',
  cache: 'default',
  redirect: 'follow',
  referrer: 'about:client',
  referrerPolicy: 'strict-origin-when-cross-origin',
  integrity: 'sha256-abc123...', // Subresource Integrity
});
 
// Requestオブジェクトをfetchに渡す
const response = await fetch(request);
 
// Requestのクローン（Service Workerで頻用）
const clonedRequest = request.clone();
 
// Requestの主要プロパティ
console.log(request.url);        // 完全なURL
console.log(request.method);     // GET, POST, etc.
console.log(request.headers);    // Headers オブジェクト
console.log(request.body);       // ReadableStream | null
console.log(request.mode);       // cors, no-cors, same-origin
console.log(request.credentials);// include, same-origin, omit
console.log(request.cache);      // default, no-store, reload, etc.
console.log(request.redirect);   // follow, error, manual
console.log(request.signal);     // AbortSignal
 
// 既存Requestを基にオプションを上書き
const authenticatedRequest = new Request(request, {
  headers: new Headers({
    ...Object.fromEntries(request.headers.entries()),
    'Authorization': `Bearer ${newToken}`,
  }),
});

// Headersの作成と操作
const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Accept', 'application/json');
headers.append('X-Custom-Header', 'value1');
headers.append('X-Custom-Header', 'value2'); // 複数値の追加
 
// set は上書き、append は追加
headers.set('X-Custom-Header', 'single-value'); // 上書き
 
// 値の取得
console.log(headers.get('Content-Type'));      // 'application/json'
console.log(headers.has('Authorization'));       // false
console.log(headers.get('X-Custom-Header'));    // 'single-value'
 
// ヘッダーの削除
headers.delete('X-Custom-Header');
 
// イテレーション
for (const [name, value] of headers) {
  console.log(`${name}: ${value}`);
}
 
// オブジェクトからの初期化
const headers = new Headers({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer token123',
  'Accept-Language': 'ja,en;q=0.9',
});
 
// レスポンスヘッダーの読み取り
const response = await fetch('/api/data');
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('X-Request-Id'));
console.log(response.headers.get('X-RateLimit-Remaining'));
 
// ★ CORSではサーバーがAccess-Control-Expose-Headersで
//    公開していないヘッダーは読み取れない
// サーバー側: Access-Control-Expose-Headers: X-Request-Id, X-RateLimit-Remaining
 
// Headersをオブジェクトに変換
const headerObj = Object.fromEntries(headers.entries());

// Responseの主要プロパティ
const response = await fetch('/api/users');
 
console.log(response.ok);         // true（status 200-299）
console.log(response.status);     // 200
console.log(response.statusText); // 'OK'
console.log(response.url);        // リクエストの最終URL
console.log(response.redirected); // リダイレクトが発生したか
console.log(response.type);       // 'basic', 'cors', 'opaque', etc.
console.log(response.headers);    // Headers オブジェクト
console.log(response.body);       // ReadableStream
 
// レスポンスボディの読み取りメソッド
const json = await response.json();        // JSON → Object
const text = await response.text();        // テキスト
const blob = await response.blob();        // Blob（バイナリデータ）
const buffer = await response.arrayBuffer(); // ArrayBuffer
const formData = await response.formData(); // FormData
 
// カスタムResponseの生成（Service Workerで活用）
const customResponse = new Response(
  JSON.stringify({ message: 'Hello from cache' }),
  {
    status: 200,
    statusText: 'OK',
    headers: {
      'Content-Type': 'application/json',
      'X-Source': 'service-worker-cache',
    },
  }
);
 
// 静的メソッド
const redirectResponse = Response.redirect('https://example.com/new-url', 301);
const errorResponse = Response.error(); // ネットワークエラーレスポンス
const jsonResponse = Response.json({ ok: true }); // JSON レスポンス（新API）

// AbortControllerの基本
const controller = new AbortController();
const { signal } = controller;
 
// signalをfetchに渡す
const fetchPromise = fetch('/api/large-data', { signal });
 
// 何らかの条件でキャンセル
document.getElementById('cancelBtn').addEventListener('click', () => {
  controller.abort();
});
 
try {
  const response = await fetchPromise;
  const data = await response.json();
  console.log(data);
} catch (err) {
  if (err.name === 'AbortError') {
    console.log('Fetch was cancelled by user');
  } else {
    console.error('Fetch failed:', err);
  }
}

// 方法1: setTimeout + AbortController
function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const { signal } = controller;
 
  // 既存のsignalがある場合はany()で合成
  const combinedSignal = options.signal
    ? AbortSignal.any([signal, options.signal])
    : signal;
 
  const timeoutId = setTimeout(() => {
    controller.abort(new DOMException('Request timed out', 'TimeoutError'));
  }, timeout);
 
  return fetch(url, {
    ...options,
    signal: combinedSignal,
  }).finally(() => {
    clearTimeout(timeoutId);
  });
}
 
// 使用例
try {
  const response = await fetchWithTimeout('/api/slow-endpoint', {}, 3000);
  const data = await response.json();
} catch (err) {
  if (err.name === 'TimeoutError') {
    console.error('Request timed out after 3 seconds');
  } else if (err.name === 'AbortError') {
    console.error('Request was manually cancelled');
  }
}
 
// 方法2: AbortSignal.timeout()（推奨・ブラウザサポート確認が必要）
const response = await fetch('/api/data', {
  signal: AbortSignal.timeout(5000),
});
 
// 方法3: 複数シグナルの合成
const userController = new AbortController();
const combinedSignal = AbortSignal.any([
  userController.signal,
  AbortSignal.timeout(10000),
]);
 
const response = await fetch('/api/data', { signal: combinedSignal });
 
// ユーザーがキャンセルボタンを押した場合
cancelButton.onclick = () => userController.abort();

import { useEffect, useState, useCallback } from 'react';
 
// パターン1: useEffectでのクリーンアップ
function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const controller = new AbortController();
 
    async function loadUsers() {
      try {
        setLoading(true);
        const response = await fetch('/api/users', {
          signal: controller.signal,
        });
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const data = await response.json();
        setUsers(data);
        setError(null);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        if (!controller.signal.aborted) {
          setLoading(false);
        }
      }
    }
 
    loadUsers();
    return () => controller.abort(); // アンマウント時にキャンセル
  }, []);
 
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
 
// パターン2: カスタムフック
function useFetch<T>(url: string, options?: RequestInit) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
 
  useEffect(() => {
    const controller = new AbortController();
    let isMounted = true;
 
    async function fetchData() {
      try {
        setLoading(true);
        setError(null);
 
        const response = await fetch(url, {
          ...options,
          signal: controller.signal,
        });
 
        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
 
        const json = await response.json();
 
        if (isMounted) {
          setData(json);
        }
      } catch (err) {
        if (isMounted && err.name !== 'AbortError') {
          setError(err instanceof Error ? err : new Error(String(err)));
        }
      } finally {
        if (isMounted) {
          setLoading(false);
        }
      }
    }
 
    fetchData();
 
    return () => {
      isMounted = false;
      controller.abort();
    };
  }, [url]);
 
  return { data, loading, error };
}
 
// カスタムフックの使用
function UserProfile({ userId }: { userId: string }) {
  const { data, loading, error } = useFetch<User>(
    `/api/users/${userId}`
  );
 
  if (loading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  if (!data) return null;
 
  return <div>{data.name}</div>;
}
 
// パターン3: 検索のデバウンスとキャンセル
function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const controllerRef = useRef<AbortController | null>(null);
 
  const search = useCallback(async (searchQuery: string) => {
    // 前のリクエストをキャンセル
    if (controllerRef.current) {
      controllerRef.current.abort();
    }
 
    if (!searchQuery.trim()) {
      setResults([]);
      return;
    }
 
    const controller = new AbortController();
    controllerRef.current = controller;
 
    try {
      const params = new URLSearchParams({ q: searchQuery });
      const response = await fetch(`/api/search?${params}`, {
        signal: controller.signal,
      });
 
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const data = await response.json();
      setResults(data.results);
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error('Search failed:', err);
      }
    }
  }, []);
 
  // デバウンス処理
  useEffect(() => {
    const timeoutId = setTimeout(() => search(query), 300);
    return () => clearTimeout(timeoutId);
  }, [query, search]);
 
  return (
    <div>
      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {results.map(r => (
          <li key={r.id}>{r.title}</li>
        ))}
      </ul>
    </div>
  );
}

// fetch以外でのAbortController活用
// EventListenerのキャンセル
const controller = new AbortController();
 
document.addEventListener('click', handleClick, { signal: controller.signal });
document.addEventListener('keydown', handleKey, { signal: controller.signal });
document.addEventListener('scroll', handleScroll, { signal: controller.signal });
 
// まとめてリスナーを削除
controller.abort();
 
// カスタムの非同期処理でのキャンセル対応
async function processItems(items, signal) {
  const results = [];
 
  for (const item of items) {
    // 各イテレーションでキャンセルをチェック
    if (signal?.aborted) {
      throw new DOMException('Processing cancelled', 'AbortError');
    }
 
    const result = await processItem(item);
    results.push(result);
  }
 
  return results;
}
 
// signalのイベントリスナー
const controller = new AbortController();
 
controller.signal.addEventListener('abort', () => {
  console.log('Abort reason:', controller.signal.reason);
  // クリーンアップ処理
});
 
// abort理由を指定
controller.abort(new Error('User navigated away'));
console.log(controller.signal.reason); // Error: User navigated away

// ReadableStreamの基本構造
const stream = new ReadableStream({
  start(controller) {
    // ストリーム初期化時に呼ばれる
    controller.enqueue('Hello');
    controller.enqueue(' ');
    controller.enqueue('World');
    controller.close();
  },
 
  pull(controller) {
    // コンシューマーがデータを要求した時に呼ばれる
    // 非同期データソースからの読み取りに適している
  },
 
  cancel(reason) {
    // ストリームがキャンセルされた時に呼ばれる
    console.log('Stream cancelled:', reason);
  },
});
 
// Readerを使った読み取り
const reader = stream.getReader();
 
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  console.log(value);
}
 
reader.releaseLock(); // ロックを解放
 
// カウンティングストラテジー（バックプレッシャー制御）
const stream = new ReadableStream(
  {
    start(controller) {
      // データをエンキュー
    },
    pull(controller) {
      // desiredSizeが0以下ならバッファが満杯
      console.log('Desired size:', controller.desiredSize);
    },
  },
  new CountQueuingStrategy({ highWaterMark: 10 }) // 最大10チャンク
);
 
// ByteLengthQueuingStrategy
const stream = new ReadableStream(
  {
    // ...
  },
  new ByteLengthQueuingStrategy({ highWaterMark: 1024 * 64 }) // 64KB
);

// 実務で使えるダウンロード進捗コンポーネント
async function downloadWithProgress(url, onProgress) {
  const response = await fetch(url);
 
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }
 
  // Content-Lengthヘッダーからファイルサイズを取得
  const contentLength = response.headers.get('Content-Length');
  const total = contentLength ? parseInt(contentLength, 10) : null;
 
  if (!response.body) {
    // body が null の場合（通常は発生しない）
    return response.blob();
  }
 
  const reader = response.body.getReader();
  const chunks = [];
  let received = 0;
  const startTime = Date.now();
 
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
 
    chunks.push(value);
    received += value.length;
 
    const elapsed = (Date.now() - startTime) / 1000;
    const speed = received / elapsed; // bytes/sec
 
    onProgress({
      loaded: received,
      total,
      percentage: total ? Math.round((received / total) * 100) : null,
      speed, // bytes/sec
      eta: total ? Math.round((total - received) / speed) : null, // 残り秒数
    });
  }
 
  // チャンクを結合してBlobを生成
  const blob = new Blob(chunks);
  return blob;
}
 
// Reactでの使用例
function DownloadButton({ url, filename }) {
  const [progress, setProgress] = useState(null);
  const [downloading, setDownloading] = useState(false);
 
  const handleDownload = async () => {
    setDownloading(true);
    try {
      const blob = await downloadWithProgress(url, setProgress);
 
      // ダウンロードリンクを生成
      const objectUrl = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = objectUrl;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(objectUrl);
    } catch (err) {
      console.error('Download failed:', err);
    } finally {
      setDownloading(false);
      setProgress(null);
    }
  };
 
  return (
    <div>
      <button onClick={handleDownload} disabled={downloading}>
        {downloading ? 'Downloading...' : 'Download'}
      </button>
      {progress && (
        <div>
          <progress
            value={progress.loaded}
            max={progress.total || undefined}
          />
          <span>
            {progress.percentage !== null
              ? `${progress.percentage}%`
              : `${(progress.loaded / 1024 / 1024).toFixed(1)} MB`
            }
            {progress.speed && ` (${formatSpeed(progress.speed)})`}
            {progress.eta !== null && ` - 残り ${progress.eta}秒`}
          </span>
        </div>
      )}
    </div>
  );
}
 
function formatSpeed(bytesPerSec) {
  if (bytesPerSec > 1024 * 1024) {
    return `${(bytesPerSec / 1024 / 1024).toFixed(1)} MB/s`;
  }
  return `${(bytesPerSec / 1024).toFixed(1)} KB/s`;
}

// Fetch APIではアップロード進捗を直接取得できない（2024年時点）
// XMLHttpRequestのupload.onprogressを使用する
 
function uploadWithProgress(url, file, onProgress) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
 
    xhr.upload.addEventListener('progress', (event) => {
      if (event.lengthComputable) {
        onProgress({
          loaded: event.loaded,
          total: event.total,
          percentage: Math.round((event.loaded / event.total) * 100),
        });
      }
    });
 
    xhr.addEventListener('load', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error(`HTTP ${xhr.status}: ${xhr.statusText}`));
      }
    });
 
    xhr.addEventListener('error', () => reject(new Error('Upload failed')));
    xhr.addEventListener('abort', () => reject(new Error('Upload cancelled')));
 
    const formData = new FormData();
    formData.append('file', file);
 
    xhr.open('POST', url);
    xhr.setRequestHeader('Authorization', `Bearer ${getToken()}`);
    xhr.send(formData);
  });
}
 
// チャンクアップロード（大きなファイルの分割送信）
async function chunkedUpload(url, file, chunkSize = 5 * 1024 * 1024) {
  const totalChunks = Math.ceil(file.size / chunkSize);
  const uploadId = crypto.randomUUID();
 
  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);
 
    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('uploadId', uploadId);
    formData.append('chunkIndex', String(i));
    formData.append('totalChunks', String(totalChunks));
 
    const response = await fetch(url, {
      method: 'POST',
      body: formData,
    });
 
    if (!response.ok) {
      throw new Error(`Chunk ${i} upload failed: HTTP ${response.status}`);
    }
 
    console.log(`Uploaded chunk ${i + 1}/${totalChunks}`);
  }
 
  // 全チャンクのアップロード完了を通知
  const response = await fetch(`${url}/complete`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ uploadId, totalChunks }),
  });
 
  return response.json();
}

// TransformStreamの基本
const uppercaseTransform = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(chunk.toUpperCase());
  },
});
 
// JSONラインパーサー（NDJSON対応）
function createNDJSONParser() {
  let buffer = '';
 
  return new TransformStream({
    transform(chunk, controller) {
      buffer += chunk;
      const lines = buffer.split('\n');
      buffer = lines.pop(); // 不完全な最後の行をバッファに残す
 
      for (const line of lines) {
        const trimmed = line.trim();
        if (trimmed) {
          try {
            const parsed = JSON.parse(trimmed);
            controller.enqueue(parsed);
          } catch (e) {
            console.warn('Invalid JSON line:', trimmed);
          }
        }
      }
    },
 
    flush(controller) {
      // ストリーム終了時にバッファの残りを処理
      const trimmed = buffer.trim();
      if (trimmed) {
        try {
          controller.enqueue(JSON.parse(trimmed));
        } catch (e) {
          console.warn('Invalid final JSON line:', trimmed);
        }
      }
    },
  });
}
 
// 使用例
async function* streamNDJSON(url) {
  const response = await fetch(url);
  const reader = response.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(createNDJSONParser())
    .getReader();
 
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    yield value;
  }
}
 
// データフィルタリング TransformStream
function createFilterStream(predicate) {
  return new TransformStream({
    transform(chunk, controller) {
      if (predicate(chunk)) {
        controller.enqueue(chunk);
      }
    },
  });
}
 
// バッチング TransformStream
function createBatchStream(batchSize) {
  let batch = [];
 
  return new TransformStream({
    transform(chunk, controller) {
      batch.push(chunk);
      if (batch.length >= batchSize) {
        controller.enqueue(batch);
        batch = [];
      }
    },
    flush(controller) {
      if (batch.length > 0) {
        controller.enqueue(batch);
      }
    },
  });
}
 
// パイプライン構築
const response = await fetch('/api/events');
const reader = response.body
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(createNDJSONParser())
  .pipeThrough(createFilterStream(event => event.type === 'message'))
  .pipeThrough(createBatchStream(10))
  .getReader();
 
while (true) {
  const { done, value: batch } = await reader.read();
  if (done) break;
  await processBatch(batch); // 10件ずつバッチ処理
}

// WritableStreamの基本
const writableStream = new WritableStream({
  start(controller) {
    console.log('Stream started');
  },
 
  write(chunk, controller) {
    console.log('Writing chunk:', chunk);
    // 非同期処理も可能
    return processChunk(chunk);
  },
 
  close() {
    console.log('Stream closed');
  },
 
  abort(reason) {
    console.log('Stream aborted:', reason);
  },
});
 
// WriterでWritableStreamに書き込む
const writer = writableStream.getWriter();
await writer.write('Hello');
await writer.write(' World');
await writer.close();
 
// ReadableStreamからWritableStreamへのパイプ
const response = await fetch('/api/large-data');
await response.body.pipeTo(writableStream);
 
// ファイルへの書き込み（File System Access API）
async function saveStreamToFile(readableStream) {
  const fileHandle = await window.showSaveFilePicker({
    suggestedName: 'download.txt',
    types: [
      {
        description: 'Text files',
        accept: { 'text/plain': ['.txt'] },
      },
    ],
  });
 
  const writable = await fileHandle.createWritable();
 
  await readableStream
    .pipeThrough(new TextEncoderStream())
    .pipeTo(writable);
}
 
// DOM への段階的書き込み
function createDOMWritableStream(container) {
  return new WritableStream({
    write(chunk) {
      const element = document.createElement('div');
      element.textContent = typeof chunk === 'string' ? chunk : JSON.stringify(chunk);
      container.appendChild(element);
    },
  });
}
 
const container = document.getElementById('results');
const response = await fetch('/api/events');
await response.body
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(createNDJSONParser())
  .pipeTo(createDOMWritableStream(container));

// EventSource による SSE の受信
const eventSource = new EventSource('/api/events');
 
eventSource.onopen = () => {
  console.log('Connection opened');
};
 
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
};
 
eventSource.onerror = (event) => {
  console.error('EventSource error:', event);
  if (eventSource.readyState === EventSource.CLOSED) {
    console.log('Connection closed');
  }
};
 
// 名前付きイベントの受信
eventSource.addEventListener('user-update', (event) => {
  const user = JSON.parse(event.data);
  console.log('User updated:', user);
});
 
eventSource.addEventListener('notification', (event) => {
  const notification = JSON.parse(event.data);
  showNotification(notification);
});
 
// 接続を閉じる
eventSource.close();
 
// EventSourceの制限:
// - GETリクエストのみ
// - カスタムヘッダーを設定できない
// - 認証トークンの送信にはCookieかURLパラメータが必要

// Fetch APIを使ったSSE（カスタムヘッダー対応）
async function fetchSSE(url, options = {}) {
  const { onMessage, onError, signal, headers = {} } = options;
 
  const response = await fetch(url, {
    headers: {
      'Accept': 'text/event-stream',
      ...headers,
    },
    signal,
  });
 
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }
 
  const reader = response.body
    .pipeThrough(new TextDecoderStream())
    .getReader();
 
  let buffer = '';
 
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
 
    buffer += value;
    const events = buffer.split('\n\n');
    buffer = events.pop(); // 不完全なイベントをバッファに残す
 
    for (const eventStr of events) {
      if (!eventStr.trim()) continue;
 
      const event = parseSSEEvent(eventStr);
      if (event) {
        onMessage?.(event);
      }
    }
  }
}
 
function parseSSEEvent(eventStr) {
  const lines = eventStr.split('\n');
  const event = { data: '', type: 'message', id: null, retry: null };
 
  for (const line of lines) {
    if (line.startsWith('data:')) {
      event.data += (event.data ? '\n' : '') + line.slice(5).trim();
    } else if (line.startsWith('event:')) {
      event.type = line.slice(6).trim();
    } else if (line.startsWith('id:')) {
      event.id = line.slice(3).trim();
    } else if (line.startsWith('retry:')) {
      event.retry = parseInt(line.slice(6).trim(), 10);
    }
  }
 
  return event.data ? event : null;
}
 
// 使用例: ChatGPT風のストリーミングレスポンス
async function streamChatResponse(prompt) {
  const controller = new AbortController();
 
  await fetchSSE('/api/chat/stream', {
    signal: controller.signal,
    headers: {
      'Authorization': `Bearer ${getToken()}`,
      'Content-Type': 'application/json',
    },
    onMessage(event) {
      if (event.data === '[DONE]') {
        console.log('Stream complete');
        return;
      }
 
      try {
        const data = JSON.parse(event.data);
        appendToChat(data.content);
      } catch (e) {
        console.warn('Failed to parse event:', event.data);
      }
    },
  });
 
  return controller;
}

// OpenAI互換APIのストリーミング処理
interface ChatChunk {
  id: string;
  object: string;
  created: number;
  model: string;
  choices: Array<{
    index: number;
    delta: {
      role?: string;
      content?: string;
    };
    finish_reason: string | null;
  }>;
}
 
async function* streamChatCompletion(
  messages: Array<{ role: string; content: string }>,
  options: { model?: string; temperature?: number; signal?: AbortSignal } = {}
): AsyncGenerator<string> {
  const response = await fetch('/api/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.API_KEY}`,
    },
    body: JSON.stringify({
      model: options.model || 'gpt-4',
      messages,
      temperature: options.temperature ?? 0.7,
      stream: true,
    }),
    signal: options.signal,
  });
 
  if (!response.ok) {
    const error = await response.json().catch(() => ({}));
    throw new Error(`API error ${response.status}: ${error.message || response.statusText}`);
  }
 
  const reader = response.body!
    .pipeThrough(new TextDecoderStream())
    .getReader();
 
  let buffer = '';
 
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
 
    buffer += value;
    const lines = buffer.split('\n');
    buffer = lines.pop()!;
 
    for (const line of lines) {
      const trimmed = line.trim();
      if (!trimmed || trimmed === 'data: [DONE]') continue;
      if (!trimmed.startsWith('data: ')) continue;
 
      try {
        const chunk: ChatChunk = JSON.parse(trimmed.slice(6));
        const content = chunk.choices[0]?.delta?.content;
        if (content) {
          yield content;
        }
      } catch (e) {
        // パースエラーは無視
      }
    }
  }
}
 
// React コンポーネントでの使用
function ChatStream({ messages }: { messages: Message[] }) {
  const [response, setResponse] = useState('');
  const [isStreaming, setIsStreaming] = useState(false);
  const controllerRef = useRef<AbortController | null>(null);
 
  const startStream = async () => {
    controllerRef.current = new AbortController();
    setResponse('');
    setIsStreaming(true);
 
    try {
      let fullResponse = '';
      for await (const chunk of streamChatCompletion(messages, {
        signal: controllerRef.current.signal,
      })) {
        fullResponse += chunk;
        setResponse(fullResponse);
      }
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error('Stream error:', err);
      }
    } finally {
      setIsStreaming(false);
    }
  };
 
  const stopStream = () => {
    controllerRef.current?.abort();
  };
 
  return (
    <div>
      <div className="response">{response}</div>
      {isStreaming ? (
        <button onClick={stopStream}>Stop</button>
      ) : (
        <button onClick={startStream}>Send</button>
      )}
    </div>
  );
}

// 指数バックオフ付きリトライ
interface RetryOptions {
  maxRetries?: number;
  baseDelay?: number;
  maxDelay?: number;
  retryableStatuses?: number[];
  onRetry?: (attempt: number, error: Error) => void;
}
 
async function fetchWithRetry(
  url: string,
  options: RequestInit = {},
  retryOptions: RetryOptions = {}
): Promise<Response> {
  const {
    maxRetries = 3,
    baseDelay = 1000,
    maxDelay = 30000,
    retryableStatuses = [408, 429, 500, 502, 503, 504],
    onRetry,
  } = retryOptions;
 
  let lastError: Error | null = null;
 
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url, options);
 
      // リトライ可能なステータスコードの場合
      if (retryableStatuses.includes(response.status) && attempt < maxRetries) {
        // Retry-Afterヘッダーの確認
        const retryAfter = response.headers.get('Retry-After');
        let delay: number;
 
        if (retryAfter) {
          // Retry-After は秒数またはHTTP日付形式
          const retrySeconds = parseInt(retryAfter, 10);
          if (!isNaN(retrySeconds)) {
            delay = retrySeconds * 1000;
          } else {
            delay = new Date(retryAfter).getTime() - Date.now();
          }
        } else {
          // 指数バックオフ + ジッター
          delay = Math.min(
            baseDelay * Math.pow(2, attempt) + Math.random() * 1000,
            maxDelay
          );
        }
 
        const error = new Error(`HTTP ${response.status}`);
        onRetry?.(attempt + 1, error);
        await new Promise(resolve => setTimeout(resolve, delay));
        continue;
      }
 
      return response;
    } catch (err) {
      lastError = err instanceof Error ? err : new Error(String(err));
 
      if (attempt < maxRetries) {
        const delay = Math.min(
          baseDelay * Math.pow(2, attempt) + Math.random() * 1000,
          maxDelay
        );
        onRetry?.(attempt + 1, lastError);
        await new Promise(resolve => setTimeout(resolve, delay));
      }
    }
  }
 
  throw lastError || new Error('Max retries reached');
}
 
// 使用例
const response = await fetchWithRetry('/api/unreliable', {}, {
  maxRetries: 5,
  baseDelay: 500,
  onRetry(attempt, error) {
    console.warn(`Retry ${attempt}: ${error.message}`);
  },
});

// Promise.all による並行リクエスト
async function fetchMultiple(urls: string[]) {
  const responses = await Promise.all(
    urls.map(url => fetch(url).then(r => {
      if (!r.ok) throw new Error(`${url}: HTTP ${r.status}`);
      return r.json();
    }))
  );
  return responses;
}
 
// Promise.allSettled でエラー耐性のある並行リクエスト
async function fetchMultipleSafe(urls: string[]) {
  const results = await Promise.allSettled(
    urls.map(url => fetch(url).then(r => {
      if (!r.ok) throw new Error(`HTTP ${r.status}`);
      return r.json();
    }))
  );
 
  return results.map((result, i) => ({
    url: urls[i],
    status: result.status,
    data: result.status === 'fulfilled' ? result.value : null,
    error: result.status === 'rejected' ? result.reason : null,
  }));
}
 
// 並行数制限（コンカレンシー制御）
async function fetchWithConcurrencyLimit<T>(
  urls: string[],
  concurrency: number,
  fetcher: (url: string) => Promise<T>
): Promise<T[]> {
  const results: T[] = new Array(urls.length);
  let index = 0;
 
  async function worker() {
    while (index < urls.length) {
      const currentIndex = index++;
      results[currentIndex] = await fetcher(urls[currentIndex]);
    }
  }
 
  const workers = Array.from(
    { length: Math.min(concurrency, urls.length) },
    () => worker()
  );
 
  await Promise.all(workers);
  return results;
}
 
// 使用例: 最大5並行でAPI呼び出し
const userIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
const users = await fetchWithConcurrencyLimit(
  userIds.map(id => `/api/users/${id}`),
  5,
  async (url) => {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  }
);
 
// Promise.race による最速レスポンス取得
async function fetchFastest(urls: string[]) {
  const controller = new AbortController();
 
  try {
    const result = await Promise.race(
      urls.map(async (url) => {
        const response = await fetch(url, { signal: controller.signal });
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.json();
      })
    );
 
    // 最初のレスポンスを受信したら他のリクエストをキャンセル
    controller.abort();
    return result;
  } catch (err) {
    controller.abort();
    throw err;
  }
}