Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Learn/JavaScript/Client-side_web_APIs/Client-side_storage を更新 #22743

Merged
merged 2 commits into from
Aug 1, 2024
Merged

Learn/JavaScript/Client-side_web_APIs/Client-side_storage を更新 #22743

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8cbf711
2024/07/26 時点の英語版に基づき更新
mfuji09 Jul 28, 2024
67b62a6
Update index.md
mfuji09 Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions files/ja/learn/javascript/client-side_web_apis/client-side_storage/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: クライアント側ストレージ
slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
l10n:
sourceCommit: 1b094710cd2816a6669ce616b6f56d0a5b25e6ad
sourceCommit: bc0d0d1ef796435e969f6d65c7e5d3c08f4023aa
---

{{LearnSidebar}}
Expand All @@ -28,9 +28,9 @@ l10n:
</td>
</tr>
<tr>
<th scope="row">目標:</th>
<th scope="row">目的:</th>
<td>
アプリケーションデータを格納するために、クライアント側ストレージ API を使用する方法について学ぶ。
アプリケーションデータを格納するために、クライアント側ストレージ API を使用する方法について学ぶこと。
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -235,7 +235,8 @@ MDN 学習領域の他の場所で、[静的サイト](/ja/docs/Learn/Server-sid

例が完成しました。よくできましたね! 現時点で残っているのは、コードを保存して HTML ページをブラウザーでテストすることだけです。[ライブ実行される完成版をここで](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html)見られます。

> **メモ:** [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。
> **メモ:**
> [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。
Comment on lines +238 to +239
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[mdn-linter] reported by reviewdog 🐶

Suggested change
> **メモ:**
> [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。
> **メモ:** > [ウェブストレージ API の使用](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)のところには、探究するにはほんの少しだけ更に複雑な別の例もあります。


> [!NOTE]
> 完成版のソースのうち `<script src="index.js" defer></script>` という行では、`defer` 属性により、ページを読み込み終わるまでは {{htmlelement("script")}} 要素の中身を実行しないように指定しています。
Expand Down Expand Up @@ -585,9 +586,9 @@ function deleteItem(e) {
}
```

3. 以下のスニペットは、`fetchVideoFromNetwork()` 内から引用したものです。ここでは、2 つの別々の {{domxref("fetch()")}} 要求を用いて MP4 版と WebM 版の動画を読み込んでいます。次に {{domxref("Response.blob()")}} メソッドを使用してそれぞれのレスポンスの本文を blob として抽出し、後で格納したり表示したりできる動画のオブジェクト表現を得ています。
3. 以下のスニペットは、`fetchVideoFromNetwork()` 内から引用したものです。ここでは、2 つの別々の {{domxref("Window/fetch", "fetch()")}} リクエストを用いて MP4 版と WebM 版の動画を読み込んでいます。次に {{domxref("Response.blob()")}} メソッドを使用してそれぞれのレスポンスの本文を blob として抽出し、後で格納したり表示したりできる動画のオブジェクト表現を得ています。

しかし、ここで問題があります。これらの二つの要求はどちらも非同期的なのですが、双方のプロミスが履行された (fulfilled) 場合にだけ動画を表示もしくは保存しようと試みたいのです。幸い、そうした問題を扱う組み込みメソッドがあります。すなわち {{jsxref("Promise.all()")}} です。これは一つの引数 — 成立したかどうかを調べたい個々のプロミスすべてに対する参照を配列に入れたもの — をとり、これ自体がプロミスに基づいています。
しかし、ここで問題があります。これらの 2 つのリクエストはどちらも非同期的なのですが、双方のプロミスが履行された (fulfilled) 場合にだけ動画を表示もしくは保存しようと試みたいのです。幸い、そうした問題を扱う組み込みメソッドがあります。すなわち {{jsxref("Promise.all()")}} です。これは一つの引数 — 成立したかどうかを調べたい個々のプロミスすべてに対する参照を配列に入れたもの — をとり、これ自体がプロミスに基づいています。

このプロミスの `then()` ハンドラー内で、先ほどと同様に `displayVideo()` 関数を呼び出して動画を UI に表示し、さらに `storeVideo()` 関数を呼び出して動画をデータベース内に格納しています。

Expand Down Expand Up @@ -737,7 +738,7 @@ self.addEventListener("install", (e) => {

このブロックの中では {{domxref("CacheStorage.match()")}} を使用して、一致するリクエスト（すなわち URL に一致する）がいずれかのキャッシュで得られるかどうかを調べています。このプロミスは、一致するものが得られた場合は一致するレスポンスで履行され、そうでない場合は `undefined` となります。

一致するものが見つかった場合、それを独自のレスポンスとして返します。そうでない場合は、ネットワークからのレスポンスを [fetch()](/ja/docs/Web/API/fetch) して、代わりにそれを返します。
一致するものが見つかった場合、それを独自のレスポンスとして返します。そうでない場合は、ネットワークからのレスポンスを [fetch()](/ja/docs/Web/API/Window/fetch) して、代わりにそれを返します。

```js
self.addEventListener("fetch", (e) => {
Expand All @@ -764,7 +765,7 @@ self.addEventListener("fetch", (e) => {

## まとめ

これで終わりです。クライアント側での保存の技術についてのこの概要を、皆さんが有用だと思ってくださったのであれば良いな、と望んでいます。
これで終わりです。クライアント側ストレージ技術の概要が有益なものであったことを期待しています。

## 関連情報

Expand Down
Loading