Web/API/Response/bodyUsed を更新

files/ja/web/api/response/bodyused/index.md

@@ -1,11 +1,12 @@
 ---
-title: Response.bodyUsed
+title: "Response: bodyUsed プロパティ"
+short-title: bodyUsed
 slug: Web/API/Response/bodyUsed
 l10n:
-  sourceCommit: 84fc68f1674c9b2d1708fb38dc2824e228f9bb3f
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-{{APIRef("Fetch")}}
+{{APIRef("Fetch API")}}
 
 **`bodyUsed`** は {{domxref("Response")}} インターフェイスの読み取り専用プロパティで、本体が読み取り済みであるかどうかを示す論理値です。
 
@@ -15,38 +16,61 @@ l10n:
 
 ## 例
 
-[フェッチリクエストの例](https://github.com/mdn/dom-examples/tree/main/fetch/fetch-request)（[フェッチリクエストをライブで](https://mdn.github.io/dom-examples/fetch/fetch-request/)実行）では、 {{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して JPG を読み取ります。読み取りが成功したら、`blob()` を使用してレスポンスから {{domxref("Blob")}} を読み取り、{{domxref("URL.createObjectURL")}} を使用してオブジェクト URL に格納し、その URL を {{htmlelement("img")}} 要素のソースとして設定して画像を表示します。
+### `bodyUsed` のチェック
 
-`response.bodyUsed` を `response.blob()` の呼び出し前後にコンソールに記録していることに注目してください。 その時点で本文が読み取られたかによるため、これは呼び出し前では `false` を返し、その後では `true` を返します。
+この例は、レスポンスの本体を読み込むと `bodyUsed` の値が `false` から `true` に変わることを示しています。
 
-### HTML コンテンツ
+この例には、空の画像があります。
+
+この例の JavaScript を実行すると、画像を取得し、返されたプロミスを変数 `responsePromise` に代入します。
+
+ユーザーが「レスポンスを使用する」をクリックすると、レスポンスがすでに使用されているかどうかを調べます。もし指定されていたら、メッセージを出力します。もしまだ使用されていなければ、レスポンス本体を読み込み、それを用いて画像の `src` 属性の値を提供します。
+
+#### HTML
 
 ```html
-<img
-  class="my-image"
-  src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png" />
+<button id="use">レスポンスを使用する</button>
+<button id="reset">リセット</button>
+<br />
+<img id="my-image" src="" />
+<pre id="log"></pre>
 ```
 
-### JS コンテンツ
+#### JavaScript
 
 ```js
-const myImage = document.querySelector(".my-image");
-fetch("https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg")
-  .then((response) => {
-    console.log(response.bodyUsed);
-    const res = response.blob();
-    console.log(response.bodyUsed);
-    return res;
-  })
-  .then((response) => {
-    const objectURL = URL.createObjectURL(response);
+const useResponse = document.querySelector("#use");
+const reset = document.querySelector("#reset");
+const myImage = document.querySelector("#my-image");
+const log = document.querySelector("#log");
+
+const responsePromise = fetch(
+  "https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg",
+);
+
+useResponse.addEventListener("click", async () => {
+  const response = await responsePromise;
+  if (response.bodyUsed) {
+    log.textContent = "Body has already been used!";
+  } else {
+    const result = await response.blob();
+    const objectURL = URL.createObjectURL(result);
     myImage.src = objectURL;
+  }
+});
+
+reset.addEventListener("click", () => {
+  document.location.reload();
   });
 ```
 
-### 結果
+#### 結果
+
+初期状態では画像の値はありません。「レスポンスを使用する」を一度クリックすると、`bodyUsed` は `false` になるので、レスポンスを読み込んで画像を設定します。もう一度「レスポンスを使用する」をクリックすると、`bodyUsed` は `true` となり、メッセージを出力します。
+
+「リセット」をクリックすると、例が再読み込みされますので、もう一度試してみてください。
 
-{{ EmbedLiveSample('Examples', '100%', '250px') }}
+{{ EmbedLiveSample('Examples', '100%', '300px') }}
 
 ## 仕様書