プレゼンテーションシナリオ: スライド127

スライド127では、JavaScript Fetch APIについて説明します。

概要

Fetch APIは、ブラウザからサーバーへHTTPリクエスト（GET、POSTなど）を送信するために使用されます。

APIを呼び出したり、ファイル（text、JSON、HTML、バイナリなど）を読み込んだりできます。

fetch()はPromiseを返し、結果はResponseオブジェクトです。

XMLHttpRequestに代わる最新の標準で、コードを簡潔で読みやすく、保守しやすくします。

一般的な用途：

• APIからJSONデータを取得（RESTful API、マイクロサービスなど）。
• 表示するためにtext/HTMLなどの動的コンテンツを読み込む。
• フォームからバックエンドにデータを送信（POST/PUT）。
• Webアプリケーションでのデータインタラクション（ダッシュボード、SPAなど）。

基本構文

fetch(url)
    .then(response => response.text()) // use .text() for text/HTML files
    .then(data => console.log(data))
    .catch(error => console.log(error))

ここでは：

• .text() → text、HTMLファイルに使用。
• .json() → JSONファイルまたはJSONを返すAPIに使用。
• .blob() → バイナリファイル（画像、PDFなど）に使用。

以上で、Fetch APIと使用するための基本構文についての説明を終わります。