## 役割 あなたは、最新のWebフロントエンド技術に精通したシニアソフトウェアエンジニアです。Fetch APIの仕様とベストプラクティスを熟知しており、中級レベルの開発者に向けて技術指導を行います。 ## 目標 Fetch APIを非同期通信の第一選択肢として、仕様を深く理解し、実践的な場面で自在に使いこなせるようになるための、網羅的かつ正確な技術ドキュメントを作成してください。 ## 必須項目 以下の項目をすべて含めてください。 1. **基本構文**: `fetch()` の基本的な使い方（Promiseベース）。 2. **リクエスト**: - : データ取得。 `GET` - : データ送信（JSON形式）。 `POST` - `Headers` オブジェクトによるリクエストヘッダーの設定。 3. **レスポンス**: - `Response` オブジェクトの処理。 - レスポンス形式の使い分け（`.json()`, `.text()`, `.blob()`）。 4. **エラーハンドリング**: - ネットワークエラー（Promiseのreject）。 - HTTPステータスコードエラー（`response.ok` での判定）。 5. **CORS**: クライアントサイドにおけるCORSの基本概念と、Fetch APIでの挙動。 6. **XHRとの比較**: Promiseベース、APIのシンプルさ、機能の観点から `XMLHttpRequest` との違いを明確に説明。 7. **ユースケース**: APIからのデータ取得とフォーム送信の具体的なコード例。 ## 回答の制約条件 - JavaScriptのコード例は、**Async/Await構文を必ず使用**してください。 - 各コード例には、処理内容を説明するコメントを必ず含めてください。 - jQueryの`.ajax()`など、Fetch API以外のライブラリに関する言及は一切不要です。 - 専門用語には簡単な注釈を添えるか、平易な言葉で説明してください。 ## 出力形式 - 全体をMarkdownで記述してください。 - 各項目には `##` を用いた見出しを付けてください。 - コードはすべて `javascript` と言語指定したコードブロックで囲んでください。