IndexedDBを使ってみよう

こんにちは。HANOWAエンジニアの榎本です。

今回はフロントエンドの開発で利用される、IndexedDBについて紹介していきたいと思います。

はじめに

Webアプリケーションの開発において、クライアントサイドでデータ保存が必要になる場面は少なくないと思います。

ユーザーの設定、オフラインでの作業データ、または大量のデータを扱うWebアプリケーションなど、多岐にわたる用途でクライアントサイドストレージが利用されます。

IndexedDBとは

IndexedDBとは、ブラウザ内で動作する非同期のクライアントサイドストレージであり、大量の構造化データを保存し、高速な検索も可能なJavaScript APIです。

キーバリューストアの一種でありながらも、複雑なデータ構造を持つことができ、トランザクションによる操作も可能です。

これにより、Webアプリケーションはサーバーとの通信がなくても、複雑なクエリや大規模なデータの処理を行うことができます。

LocalStorageとの比較

多くのWebサイトにおいて、クライアントサイドでのデータ保存のためにLocalStorageを利用していますが、IndexedDBはLocalStorageに比べていくつかのメリットがあります。

まず、LocalStorageはキーと値のペアのみを保存することができ、値は文字列に限られます。これに対して、IndexedDBは様々な形式のデータ（数値、文字列、日付、バイナリデータ等）を保存することができます。

また、LocalStorageの容量制限は一般的に5MB程度ですが、IndexedDBはこれよりも大きなデータを扱うことが可能です。

さらに、IndexedDBは非同期APIであるため、大量のデータ操作によってUIのレスポンスが阻害されることがないという点も大きなメリットです。

基本的な使い方

IndexedDBはそのまま利用しようとすると少し扱いにくい部分もあるため、一般的にライブラリを利用することが多いかと思います。

ここでは、Dexie.jsというライブラリを利用して、その基本的な使い方を紹介したいと思います。

Dexie.jsのインストール

npm install dexie

yarnなどを利用している方はそれぞれのインストールコマンドに読み替えてください。

データベースの作成

Dexie.jsを使用してデータベースを作成するには、Dexieクラスのインスタンスを生成し、データベース名とスキーマを定義します。

import Dexie from 'dexie';

const db = new Dexie('myDatabase');
db.version(1).stores({
  friends: '++id,name,age'
});

このコードは、friends という名前のオブジェクトストアを持つ myDatabase という名前のデータベースを作成します。

オブジェクトストアは、id（自動インクリメント）、name、ageフィールドを持つように定義しています。

データの追加

データの追加は、Dexie.jsの add メソッドを使用して行います。

db.friends.add({
  name: 'Alice',
  age: 24
}).then(() => {
  console.log('Friend added');
});

データの読み出し

データを読み出すには、get メソッドを使用します。

ここではIDが 1 のデータを取得しています。

db.friends.get(1).then(friend => {
  console.log(friend);
});

where クエリを使用して検索することも可能です。

ここではageが 30 未満であるデータを取得しています。

db.friends.where('age').below(30).toArray().then(youngFriends => {
  console.log(youngFriends);
});

データの削除

データを削除するには、delete メソッドを使用します。

以下は、IDを指定して特定のデータを削除する例です。

db.friends.delete(1).then(() => {
  console.log('Friend deleted');
});

この操作は、指定されたIDのデータをオブジェクトストアから削除します。

必要に応じて、複数のデータを削除するためのクエリを実行することも可能です。

まとめ

IndexedDBはWebアプリケーション開発において、その非同期性、大規模データの扱いやすさ、複雑なデータ構造への対応など、LocalStorageやその他のクライアントサイドストレージと比較して多くの利点があります。

特に、データの量が多くなるアプリケーションや、オフラインでのデータ操作が必要な場合に、IndexedDBを利用する機会が多くなりそうです。

HANOWAでは他のメンバーもnoteを書いているので、ぜひ見に行ってみてください！

Tech Blog｜We HANOWA!!｜note