JavaScript Academy · レッスン

インデックスとクエリ

Q: 「インデックスとクエリ」で何を学びますか？

インデックスを使って効率よくデータを検索します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

インデックスを使って効率よくデータを検索します。

「インデックスとクエリ」はCoddyKit上の無料JavaScript Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

なぜインデックスを使うのか

デフォルトでは、主キーによってのみレコードを検索できます。インデックスを使うと、別のプロパティで効率的にクエリできます。たとえば、特定の姓を持つすべてのユーザーを検索できます。

インデックスの作成

onupgradeneeded内で、ストアを作成した直後にstore.createIndex(name, keyPath, options)を使ってインデックスを作成します。

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('byEmail', 'email', { unique: true });
};

一意と非一意

uniqueオプションを指定すると、2つのレコードが同じインデックス値を共有しないようにできます。都市名のように複数のレコードが同じ値を持てる場合は、デフォルト値であるunique: falseを使用します。

store.createIndex('byCity', 'city', { unique: false });
store.createIndex('byEmail', 'email', { unique: true });

インデックスを使ったクエリ

トランザクション内でストアからインデックスを取得し、インデックス付きプロパティの値を使ってgetまたはgetAllを呼び出します。

const tx = db.transaction('users', 'readonly');
const index = tx.objectStore('users').index('byEmail');
const req = index.get('ada@example.com');
req.onsuccess = () => console.log(req.result);

getAll

getAll()は、条件に一致するすべてのレコードを1回のリクエストで配列として返します。中程度の件数であれば、カーソルを使って反復処理するよりも簡単です。

const index = store.index('byCity');
const req = index.getAll('Paris');
req.onsuccess = () => {
  console.log('found', req.result.length, 'users in Paris');
};

キー範囲

IDBKeyRangeは、範囲クエリで対象にするキーの範囲を表します。only、lowerBound、upperBound、boundなどのヘルパーがあります。

const range = IDBKeyRange.bound(18, 65); // ages 18..65
const index = store.index('byAge');
index.getAll(range);

範囲のオプション

IDBKeyRange.bound(lower, upper, lowerOpen, upperOpen)では、範囲の端点を除外できます。Openな範囲では端点が排他的になります。

// 18 inclusive, 65 exclusive:
const range = IDBKeyRange.bound(18, 65, false, true);
// lowerBound(10) => keys >= 10
// upperBound(10, true) => keys < 10

カーソル

大量の結果を扱う場合や独自の反復処理を行う場合は、index.openCursor(range)でカーソルを開きます。カーソルは一致するレコードを1件ずつ処理するため、すべてをメモリに読み込まずに済みます。

const req = store.index('byCity').openCursor();
req.onsuccess = (e) => {
  const cursor = e.target.result;
  if (cursor) {
    console.log(cursor.value);
    cursor.continue(); // move to next match
  }
};

一致件数のカウント

index.count(range)は、レコードを取得せずに一致する件数を返します。そのため高速で、メモリの使用量も少なくて済みます。

const req = store.index('byCity').count('Paris');
req.onsuccess = () => console.log('count:', req.result);

キーだけを取得する

getAllKeysとキー用カーソルは、一致するレコードの主キーだけを返します。完全なオブジェクトではなく参照だけが必要な場合に便利です。

const req = store.index('byCity').getAllKeys('Paris');
req.onsuccess = () => console.log('keys:', req.result);

クエリのまとめ

インデックスによって、IndexedDBをクエリ可能なストアにできます。onupgradeneededでインデックスを作成し、get、getAll、キー範囲、カーソルを使って必要なレコードだけを取得します。

理解度チェック

インデックスとクエリについての理解度を確認しましょう。

まとめ

インデックスとクエリについて学びました。

onupgradeneeded内でcreateIndexを使ってインデックスを作成します。
uniqueオプションで値が重複しないようにします。
index.getやgetAllでクエリを実行します。
IDBKeyRangeで範囲クエリを実行できます。
カーソルで大量のデータを反復処理し、countで一致件数を数えます。

次は、バージョン管理とアップグレードです。

よくある質問

「インデックスとクエリ」レッスンは無料ですか？

はい。「インデックスとクエリ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「インデックスとクエリ」で何を学びますか？

インデックスを使って効率よくデータを検索します。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「インデックスとクエリ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← JavaScript Academyに戻る