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.

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

ja: WEB/API/IndexedDB_API/Using_indexedDB を更新 #24239

Merged
merged 3 commits into from
Oct 31, 2024
Merged
Changes from 2 commits
Commits
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
20 changes: 10 additions & 10 deletions files/ja/web/api/indexeddb_api/using_indexeddb/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ open メソッドの第 2 引数は、データベースのバージョンです

```js
request.onerror = (event) => {
// request.errorCode に対して行うこと!
// request.error に対して行うこと!
};
request.onsuccess = (event) => {
// request.result に対して行うこと!
Expand All @@ -63,9 +63,9 @@ request.onsuccess = (event) => {

2 つの関数 `onsuccess()` と `onerror()` のどちらが呼び出されるのでしょう? すべてが成功すると成功イベント (すなわち `type` プロパティが `"success"` である DOM イベント) が、`request` を `target` として発生します。イベントが発生すると `request` の `onsuccess()` 関数が、success イベントを引数として呼び出されます。一方、何らかの問題がある場合はエラーイベント (すなわち `type` プロパティが `"error"` である DOM イベント) が `request` で発生します。これは、エラーイベントを引数として `onerror()` 関数を呼び出します。

IndexedDB API は必要なエラー処理を最小限にするよう設計されていますので、多くのエラーイベントを見ることはないでしょう (少なくとも、API に慣れていなければ)。しかしデータベースを開く場合は、エラーイベントが発生する一般的な状況があります。もっとも多いであろう問題は、データベースを作成する許可をユーザーがウェブアプリに与えなかったことです。IndexedDB の主要な設計目標のひとつが、オフラインで使用するために大量のデータを保存できるようにすることです。(各ブラウザーでどれだけの量のストレージを持てるかについては、[ストレージの制限](/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#ストレージの制限)をご覧ください)
IndexedDB API は必要なエラー処理を最小限にするよう設計されていますので、多くのエラーイベントを見ることはないでしょう (少なくとも、API に慣れていなければ)。しかしデータベースを開く場合は、エラーイベントが発生する一般的な状況があります。もっとも多いであろう問題は、データベースを作成する許可をユーザーがウェブアプリに与えなかったことです。IndexedDB の主要な設計目標のひとつが、オフラインで使用するために大量のデータを保存できるようにすることです。(各ブラウザーでどれだけの量のストレージを持てるかについては、[ブラウザのストレージ制限と削除基準ページ内のどれだけのデータが格納できるか](/ja/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria#どれだけのデータが格納できるか)をご覧ください)
mahito1594 marked this conversation as resolved.
Show resolved Hide resolved

広告ネットワークやコンピューターを汚染させる悪意のあるウェブサイトをブラウザーが許可したくないことは明らかですので、ブラウザーは ウェブアプリが初めてストレージ用に IndexedDB を開こうとしたときに、ユーザーへプロンプトを表示します。ユーザーはアクセスを許可または拒否できます。またブラウザーのプライバシーモードでの IndexedDB ストレージは、匿名のセッションを閉じるまでの間だけメモリー上に存在します (Firefox のプライベートブラウジングモードや Chrome のシークレットモードのことですが、2021 年 5 月現在の Firefox ではこれが[未実装です](https://bugzilla.mozilla.org/show_bug.cgi?id=781982)ので、Firefox のプライベートブラウジングでは IndexedDB をまったく使用できません)
広告ネットワークやコンピューターを汚染させる悪意のあるウェブサイトをブラウザーが許可したくないことは明らかですので、ブラウザーは ウェブアプリが初めてストレージ用に IndexedDB を開こうとしたときに、ユーザーへプロンプトを表示します。ユーザーはアクセスを許可または拒否できます。またブラウザーのプライバシーモードでの IndexedDB ストレージは、匿名のセッションを閉じるまでの間だけメモリー上に存在します。

ユーザーがデータベース作成の要求を許可して、成功コールバックを実行する成功イベントを受け取ったと想定します。次は何を行うのでしょうか? 以下のリクエストは `indexedDB.open()` の呼び出しを伴って生成されており、`request.result` は `IDBDatabase` のインスタンスですので、以降のためにこれを保存したいことは確実です。よって、コードは以下のようになるでしょう。

Expand All @@ -90,7 +90,7 @@ request.onsuccess = (event) => {
db.onerror = (event) => {
// このデータベースのリクエストに対するすべてのエラー用の
// 汎用エラーハンドラー!
console.error(`Database error: ${event.target.errorCode}`);
console.error(`Database error: ${event.target.error?.message}`);
};
```

Expand Down Expand Up @@ -481,7 +481,7 @@ index.openCursor().onsuccess = (event) => {
index.openKeyCursor().onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
// cursor.key は "Bill" のような名前、cursor.value は SSN です。
// cursor.key は "Bill" のような名前、cursor.primaryKey は SSN です。
// 保存されたオブジェクトの他の部分を直接取得する方法はありません。
console.log(`Name: ${cursor.key}, SSN: ${cursor.primaryKey}`);
cursor.continue();
Expand Down Expand Up @@ -664,17 +664,17 @@ IndexedDB API を使用した完全な例があります。この例では、出

### チュートリアルとガイド

- [Databinding UI Elements with IndexedDB (2012)](https://web.dev/indexeddb-uidatabinding/)
- [IndexedDB — The Store in Your Browser](<https://docs.microsoft.com/previous-versions/msdn10/gg679063(v=msdn.10)>)
- [Databinding UI Elements with IndexedDB (2012)](https://web.dev/articles/indexeddb-uidatabinding/)
- [IndexedDB — The Store in Your Browser](<https://learn.microsoft.com/ja-jp/previous-versions/msdn10/gg679063(v=msdn.10)>)

### ライブラリー

- [localForage](https://localforage.github.io/localForage/): クライアント側のデータストレージ向けに、シンプルな name:value 形式の構文を提供するポリフィルです。バックグラウンドで IndexedDB を使用しますが、IndexedDB をに対応していないブラウザーでは Web SQL (非推奨)や localStorage にフォールバックします。
- [Dexie.js](https://dexie.org/): 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。
- [JsStore](https://jsstore.net/): SQL 風の構文による IndexedDB のラッパーです。
- [MiniMongo](https://github.com/mWater/minimongo): クライアント側のインメモリーの mongodb で localstorage と server sync over http を元にしたもの。MiniMongo は MeteorJS で使われています。
- [PouchDB](https://pouchdb.com): クライアント側のブラウザー内の CouchDB 実装で IndexedDB を使っています。
- [MiniMongo](https://github.com/mWater/minimongo): クライアント側のインメモリーの Mongodb で localstorage と server sync over http を元にしたもの。MiniMongo は MeteorJS で使われています。
- [PouchDB](https://pouchdb.com/): クライアント側のブラウザー内の CouchDB 実装で IndexedDB を使っています。
- [IDB](https://github.com/jakearchibald/idb): IndexedDB API をほぼ反映した小さなライブラリーですが、使いやすさを大きく変える小さな改良が加えられています。
- [idb-keyval](https://www.npmjs.com/package/idb-keyval): IndexedDB で実装された超シンプルで小さな (\~600B) プロミスベースのキーバリューストア
- [$mol_db](https://github.com/hyoo-ru/mam_mol/tree/master/db): 小さな (\~1.3kB) TypeScript のファサードで、プロミスベースの API と自動マイグレーションを備えています。
- [RxDB](https://rxdb.info/) IndexedDB の上に使用することができる NoSQL クライアントサイドデータベースです。インデックス、圧縮、レプリケーションに対応して います。また、 IndexedDB にクロスタブ機能やオブザーバー機能を追加しています。
- [RxDB](https://rxdb.info/): IndexedDB の上に使用することができる NoSQL クライアントサイドデータベースです。インデックス、圧縮、レプリケーションに対応して います。また、 IndexedDB にクロスタブ機能やオブザーバー機能を追加しています。