// TypeScript での各メソッドの実装例
 
// GET — リソースの取得
async function getUsers(page: number = 1, perPage: number = 20): Promise<User[]> {
  const response = await fetch(
    `https://api.example.com/api/users?page=${page}&per_page=${perPage}`,
    {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Authorization': `Bearer ${token}`,
      },
    },
  );
 
  if (!response.ok) {
    throw new HttpError(response.status, await response.text());
  }
 
  const data = await response.json();
  return data.users;
}
 
// POST — リソースの作成
async function createUser(userData: CreateUserInput): Promise<User> {
  const response = await fetch('https://api.example.com/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization': `Bearer ${token}`,
      'Idempotency-Key': generateIdempotencyKey(),
    },
    body: JSON.stringify(userData),
  });
 
  if (response.status !== 201) {
    const error = await response.json();
    throw new HttpError(response.status, error.message);
  }
 
  // Location ヘッダーから作成されたリソースのURLを取得
  const location = response.headers.get('Location');
  console.log(`Created at: ${location}`);
 
  return response.json();
}
 
// PUT — リソースの完全置換
async function replaceUser(id: string, userData: User): Promise<User> {
  const response = await fetch(`https://api.example.com/api/users/${id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify(userData),
  });
 
  if (!response.ok) {
    throw new HttpError(response.status, await response.text());
  }
 
  return response.json();
}
 
// PATCH — リソースの部分更新
async function updateUser(
  id: string,
  updates: Partial<User>,
): Promise<User> {
  const response = await fetch(`https://api.example.com/api/users/${id}`, {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/merge-patch+json',
      'Accept': 'application/json',
      'Authorization': `Bearer ${token}`,
      'If-Match': currentETag,  // 楽観的ロック
    },
    body: JSON.stringify(updates),
  });
 
  if (response.status === 409) {
    throw new ConflictError('Resource was modified by another request');
  }
 
  if (!response.ok) {
    throw new HttpError(response.status, await response.text());
  }
 
  return response.json();
}
 
// DELETE — リソースの削除
async function deleteUser(id: string): Promise<void> {
  const response = await fetch(`https://api.example.com/api/users/${id}`, {
    method: 'DELETE',
    headers: {
      'Authorization': `Bearer ${token}`,
    },
  });
 
  if (response.status === 404) {
    // 既に削除済み — 冪等性の観点から成功扱いにする場合もある
    console.warn(`User ${id} already deleted`);
    return;
  }
 
  if (!response.ok) {
    throw new HttpError(response.status, await response.text());
  }
}
 
// HEAD — 存在確認・メタデータ取得
async function checkUserExists(id: string): Promise<boolean> {
  const response = await fetch(`https://api.example.com/api/users/${id}`, {
    method: 'HEAD',
    headers: {
      'Authorization': `Bearer ${token}`,
    },
  });
 
  return response.status === 200;
}
 
// ファイルアップロード（multipart/form-data）
async function uploadFile(file: File, description: string): Promise<string> {
  const formData = new FormData();
  formData.append('file', file);
  formData.append('description', description);
 
  const response = await fetch('https://api.example.com/api/files', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${token}`,
      // Content-Type は FormData の場合、ブラウザが自動設定
    },
    body: formData,
  });
 
  if (!response.ok) {
    throw new HttpError(response.status, await response.text());
  }
 
  const data = await response.json();
  return data.fileUrl;
}

// Express.js でのセキュリティヘッダー設定
import helmet from 'helmet';
 
app.use(helmet());
 
// カスタム設定
app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", 'https://cdn.example.com'],
      styleSrc: ["'self'", "'unsafe-inline'"],
      imgSrc: ["'self'", 'data:', 'https:'],
      connectSrc: ["'self'", 'https://api.example.com'],
      fontSrc: ["'self'", 'https://fonts.googleapis.com'],
      frameAncestors: ["'none'"],
    },
  },
  hsts: {
    maxAge: 31536000,
    includeSubDomains: true,
    preload: true,
  },
  referrerPolicy: { policy: 'strict-origin-when-cross-origin' },
}));
 
// Nginx でのセキュリティヘッダー設定
// add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
// add_header X-Content-Type-Options "nosniff" always;
// add_header X-Frame-Options "DENY" always;
// add_header Referrer-Policy "strict-origin-when-cross-origin" always;
// add_header Content-Security-Policy "default-src 'self';" always;
// add_header Permissions-Policy "camera=(), microphone=(), geolocation=(self)" always;

# === curl でHTTPを確認 ===
 
# リクエストとレスポンスの詳細表示
curl -v https://api.example.com/users/123
 
# レスポンスヘッダーのみ
curl -I https://api.example.com/users/123
 
# POSTリクエスト
curl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer my-token" \
  -d '{"name": "Taro", "email": "taro@example.com"}'
 
# PATCHリクエスト
curl -X PATCH https://api.example.com/users/123 \
  -H "Content-Type: application/merge-patch+json" \
  -H "Authorization: Bearer my-token" \
  -d '{"name": "Updated Taro"}'
 
# DELETEリクエスト
curl -X DELETE https://api.example.com/users/123 \
  -H "Authorization: Bearer my-token"
 
# レスポンスボディ + HTTPステータス
curl -s -o /dev/null -w "%{http_code}" https://api.example.com/health
 
# タイミング情報の表示
curl -s -o /dev/null -w "
DNS Lookup:    %{time_namelookup}s
TCP Connect:   %{time_connect}s
TLS Handshake: %{time_appconnect}s
TTFB:          %{time_starttransfer}s
Total Time:    %{time_total}s
" https://api.example.com/users
 
# リダイレクトを追跡
curl -L -v https://example.com/old-page
 
# ファイルアップロード
curl -X POST https://api.example.com/files \
  -H "Authorization: Bearer my-token" \
  -F "file=@/path/to/image.png" \
  -F "description=Profile image"
 
# Cookie を保存・送信
curl -c cookies.txt https://example.com/login
curl -b cookies.txt https://example.com/dashboard
 
# HTTP/2 で接続
curl --http2 -v https://api.example.com/users
 
# プロキシ経由
curl -x http://proxy.example.com:8080 https://api.example.com/users
 
# 条件付きリクエスト（ETag）
curl -H "If-None-Match: \"abc123\"" https://api.example.com/users/123
 
# HTTPie（curl の代替、より人間に優しい）
# GET
http GET https://api.example.com/users Authorization:"Bearer my-token"
 
# POST
http POST https://api.example.com/users \
  name=Taro email=taro@example.com \
  Authorization:"Bearer my-token"
 
# レスポンスのみ
http --body GET https://api.example.com/users

// === ブラウザでのHTTPデバッグ ===
 
// Fetch API でのデバッグ
async function debugRequest(url: string): Promise<void> {
  console.time('Request Duration');
 
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
    },
  });
 
  console.timeEnd('Request Duration');
 
  // ステータス情報
  console.log('Status:', response.status, response.statusText);
  console.log('OK:', response.ok);
  console.log('Redirected:', response.redirected);
  console.log('Type:', response.type);
  console.log('URL:', response.url);
 
  // レスポンスヘッダー
  console.log('Headers:');
  response.headers.forEach((value, key) => {
    console.log(`  ${key}: ${value}`);
  });
 
  // ボディ
  const data = await response.json();
  console.log('Body:', data);
}
 
// Performance API での計測
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'resource') {
      const resource = entry as PerformanceResourceTiming;
      console.log({
        name: resource.name,
        duration: `${resource.duration.toFixed(2)}ms`,
        dns: `${(resource.domainLookupEnd - resource.domainLookupStart).toFixed(2)}ms`,
        tcp: `${(resource.connectEnd - resource.connectStart).toFixed(2)}ms`,
        ttfb: `${(resource.responseStart - resource.requestStart).toFixed(2)}ms`,
        download: `${(resource.responseEnd - resource.responseStart).toFixed(2)}ms`,
        size: resource.transferSize,
        protocol: resource.nextHopProtocol,  // "h2", "h3"
      });
    }
  }
});
observer.observe({ type: 'resource', buffered: true });

// URL操作（JavaScript/TypeScript）
 
// URL オブジェクト
const url = new URL('https://api.example.com/v1/users?page=1&sort=name');
 
console.log(url.protocol);   // "https:"
console.log(url.hostname);   // "api.example.com"
console.log(url.port);       // "" (デフォルトポート)
console.log(url.pathname);   // "/v1/users"
console.log(url.search);     // "?page=1&sort=name"
console.log(url.hash);       // ""
console.log(url.origin);     // "https://api.example.com"
 
// クエリパラメータ操作
const params = url.searchParams;
console.log(params.get('page'));    // "1"
console.log(params.get('sort'));    // "name"
params.set('page', '2');
params.append('filter', 'active');
console.log(url.toString());
// "https://api.example.com/v1/users?page=2&sort=name&filter=active"
 
// URLSearchParams の活用
const searchParams = new URLSearchParams({
  page: '1',
  per_page: '20',
  sort: '-created_at',
  status: 'active',
});
const apiUrl = `https://api.example.com/users?${searchParams}`;
// "https://api.example.com/users?page=1&per_page=20&sort=-created_at&status=active"
 
// エンコーディング
encodeURIComponent('Hello World');    // "Hello%20World"
encodeURIComponent('名前=太郎');      // "%E5%90%8D%E5%89%8D%3D%E5%A4%AA%E9%83%8E"
decodeURIComponent('%E5%90%8D%E5%89%8D');  // "名前"
 
// encodeURI vs encodeURIComponent
encodeURI('https://example.com/path?q=hello world');
// "https://example.com/path?q=hello%20world"
encodeURIComponent('https://example.com/path?q=hello world');
// "https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dhello%20world"
// → encodeURIComponent は予約文字もエンコード

// Express.js でのHTTPサーバー実装
 
import express from 'express';
import helmet from 'helmet';
import compression from 'compression';
import morgan from 'morgan';
import { v4 as uuidv4 } from 'uuid';
 
const app = express();
 
// === ミドルウェア ===
 
// セキュリティヘッダー
app.use(helmet());
 
// レスポンス圧縮
app.use(compression({
  filter: (req, res) => {
    if (req.headers['x-no-compression']) {
      return false;
    }
    return compression.filter(req, res);
  },
  level: 6,  // 圧縮レベル（1-9）
  threshold: 1024,  // 1KB未満は圧縮しない
}));
 
// リクエストID付与
app.use((req, res, next) => {
  const requestId = req.headers['x-request-id'] as string || uuidv4();
  req.headers['x-request-id'] = requestId;
  res.setHeader('X-Request-Id', requestId);
  next();
});
 
// アクセスログ
app.use(morgan(':method :url :status :res[content-length] - :response-time ms'));
 
// JSONボディパース
app.use(express.json({ limit: '10mb' }));
app.use(express.urlencoded({ extended: true, limit: '10mb' }));
 
// === ルーティング ===
 
// GET — 一覧取得
app.get('/api/users', async (req, res) => {
  try {
    const page = parseInt(req.query.page as string) || 1;
    const perPage = Math.min(parseInt(req.query.per_page as string) || 20, 100);
    const sort = req.query.sort as string || 'created_at';
 
    const { users, total } = await getUsersList(page, perPage, sort);
 
    res.status(200).json({
      data: users,
      meta: {
        total,
        page,
        per_page: perPage,
        total_pages: Math.ceil(total / perPage),
      },
    });
  } catch (error) {
    handleError(res, error);
  }
});
 
// GET — 詳細取得（条件付きリクエスト対応）
app.get('/api/users/:id', async (req, res) => {
  try {
    const user = await getUserById(req.params.id);
 
    if (!user) {
      return res.status(404).json({
        type: 'https://api.example.com/errors/not-found',
        title: 'Not Found',
        status: 404,
        detail: `User ${req.params.id} not found`,
      });
    }
 
    // ETag生成
    const etag = generateETag(user);
    res.setHeader('ETag', etag);
    res.setHeader('Cache-Control', 'private, no-cache');
    res.setHeader('Last-Modified', user.updated_at.toUTCString());
 
    // 条件付きリクエストチェック
    if (req.headers['if-none-match'] === etag) {
      return res.status(304).end();
    }
 
    const ifModifiedSince = req.headers['if-modified-since'];
    if (ifModifiedSince && new Date(ifModifiedSince) >= user.updated_at) {
      return res.status(304).end();
    }
 
    res.status(200).json({ data: user });
  } catch (error) {
    handleError(res, error);
  }
});
 
// POST — リソース作成
app.post('/api/users', async (req, res) => {
  try {
    // バリデーション
    const errors = validateCreateUser(req.body);
    if (errors.length > 0) {
      return res.status(422).json({
        type: 'https://api.example.com/errors/validation',
        title: 'Validation Error',
        status: 422,
        detail: 'The request body contains invalid fields.',
        errors,
      });
    }
 
    const user = await createUser(req.body);
 
    res
      .status(201)
      .setHeader('Location', `/api/users/${user.id}`)
      .json({ data: user });
  } catch (error) {
    if (error instanceof DuplicateError) {
      return res.status(409).json({
        type: 'https://api.example.com/errors/conflict',
        title: 'Conflict',
        status: 409,
        detail: error.message,
      });
    }
    handleError(res, error);
  }
});
 
// PATCH — 部分更新（楽観的ロック付き）
app.patch('/api/users/:id', async (req, res) => {
  try {
    const user = await getUserById(req.params.id);
 
    if (!user) {
      return res.status(404).json({
        type: 'https://api.example.com/errors/not-found',
        title: 'Not Found',
        status: 404,
        detail: `User ${req.params.id} not found`,
      });
    }
 
    // 楽観的ロック: If-Match ヘッダーでETagを検証
    const ifMatch = req.headers['if-match'];
    if (ifMatch && ifMatch !== generateETag(user)) {
      return res.status(412).json({
        type: 'https://api.example.com/errors/precondition-failed',
        title: 'Precondition Failed',
        status: 412,
        detail: 'Resource has been modified since last retrieval.',
      });
    }
 
    const updatedUser = await updateUser(req.params.id, req.body);
    const newETag = generateETag(updatedUser);
 
    res
      .setHeader('ETag', newETag)
      .status(200)
      .json({ data: updatedUser });
  } catch (error) {
    handleError(res, error);
  }
});
 
// DELETE — リソース削除
app.delete('/api/users/:id', async (req, res) => {
  try {
    const deleted = await deleteUser(req.params.id);
 
    if (!deleted) {
      // 冪等性: 既に削除済みでも 204 を返す
      return res.status(204).end();
    }
 
    res.status(204).end();
  } catch (error) {
    handleError(res, error);
  }
});
 
// HEAD — 存在確認（GETと同じロジック、ボディなし）
app.head('/api/users/:id', async (req, res) => {
  try {
    const user = await getUserById(req.params.id);
 
    if (!user) {
      return res.status(404).end();
    }
 
    res.setHeader('ETag', generateETag(user));
    res.setHeader('Content-Type', 'application/json');
    res.status(200).end();
  } catch (error) {
    res.status(500).end();
  }
});
 
// OPTIONS — CORS対応は cors ミドルウェアが自動処理
 
// ヘルスチェック
app.get('/health', (req, res) => {
  res.status(200).json({ status: 'ok', timestamp: new Date().toISOString() });
});
 
// エラーハンドリング
function handleError(res: express.Response, error: unknown): void {
  console.error('Internal error:', error);
 
  res.status(500).json({
    type: 'https://api.example.com/errors/internal',
    title: 'Internal Server Error',
    status: 500,
    detail: 'An unexpected error occurred.',
  });
}
 
// サーバー起動
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

// === Fetch API の詳細 ===
 
// 基本的なオプション
const response = await fetch(url, {
  method: 'GET',                    // HTTPメソッド
  headers: new Headers({            // ヘッダー
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token',
  }),
  body: JSON.stringify(data),       // ボディ（GET/HEADでは不可）
  mode: 'cors',                     // CORS モード
  credentials: 'include',           // Cookie送信
  cache: 'no-cache',                // キャッシュ制御
  redirect: 'follow',               // リダイレクト制御
  referrerPolicy: 'strict-origin-when-cross-origin',
  signal: AbortSignal.timeout(5000), // タイムアウト（5秒）
  keepalive: true,                   // ページ離脱後も送信
  priority: 'high',                  // 優先度（high/low/auto）
});
 
// === レスポンスの読み取り ===
// response.json()   — JSON
// response.text()   — テキスト
// response.blob()   — バイナリ（Blob）
// response.arrayBuffer() — バイナリ（ArrayBuffer）
// response.formData() — FormData
// response.body     — ReadableStream（ストリーミング）
 
// ストリーミングレスポンスの読み取り
async function streamResponse(url: string): Promise<string> {
  const response = await fetch(url);
  const reader = response.body!.getReader();
  const decoder = new TextDecoder();
  let result = '';
 
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    result += decoder.decode(value, { stream: true });
    console.log('Received chunk:', decoder.decode(value));
  }
 
  return result;
}
 
// タイムアウトとキャンセル
async function fetchWithTimeout(
  url: string,
  timeoutMs: number = 5000,
): Promise<Response> {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
 
  try {
    const response = await fetch(url, {
      signal: controller.signal,
    });
    return response;
  } catch (error) {
    if (error instanceof DOMException && error.name === 'AbortError') {
      throw new Error(`Request timed out after ${timeoutMs}ms`);
    }
    throw error;
  } finally {
    clearTimeout(timeoutId);
  }
}
 
// リトライ付きfetch
async function fetchWithRetry(
  url: string,
  options: RequestInit = {},
  maxRetries: number = 3,
): Promise<Response> {
  let lastError: Error | null = null;
 
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url, options);
 
      // 5xx エラーはリトライ
      if (response.status >= 500 && attempt < maxRetries) {
        const delay = Math.pow(2, attempt) * 1000;  // 指数バックオフ
        const jitter = Math.random() * 1000;          // ジッター
        await new Promise(resolve => setTimeout(resolve, delay + jitter));
        continue;
      }
 
      return response;
    } catch (error) {
      lastError = error as Error;
 
      if (attempt < maxRetries) {
        const delay = Math.pow(2, attempt) * 1000;
        await new Promise(resolve => setTimeout(resolve, delay));
      }
    }
  }
 
  throw lastError || new Error('All retries failed');
}