angularでindexedDBを使う

Tweet

angularでindexedDBを使う場合、素のinedexedDBを使っても良いのだが、ラッパーがあるのでラッパーを使ったほうが楽ちん。

ラッパーは、ngx-indexed-dbを使う。

まずはモジュールのインストール。

npm install ngx-indexed-db

次にapp.module.tsに以下を記述する。

import { NgxIndexedDBModule } from 'ngx-indexed-db';
const dbConfig: DBConfig  = {
  name: 'MyDb',
  version: 1,
  objectStoresMeta: [{
    store: 'people',
    storeConfig: { keyPath: 'id', autoIncrement: true },
    storeSchema: [
      { name: 'name', keypath: 'name', options: { unique: false } },
      { name: 'email', keypath: 'email', options: { unique: false } }
    ]
  }]
};
@NgModule({
  ...
  imports: [
    ...
    NgxIndexedDBModule.forRoot(dbConfig)
  ],
  ...
})

これで準備完了。

あとは、DBに書き込みたいコンポーネントのファイルに以下を記述する。

import { NgxIndexedDBService } from 'ngx-indexed-db';
export class BlasDownloadService {
  constructor(private dbService: NgxIndexedDBService) {
   }
   downLoad(token:string, projectId:number) {
      this.dbService
      .add('people', {
        name: `Bruce Wayne`,
        email: `bruce@wayne.com`,
      })
      .subscribe((key) => {
        console.log('key: ', key);
      });
   }

これでindexedDBにレコードが書ける。簡単。

ここまではチュートリアルどおり。

問題は以下のdbConfig。

const dbConfig: DBConfig  = {
  name: 'MyDb',
  version: 1,
  objectStoresMeta: [{
    store: 'people',
    storeConfig: { keyPath: 'id', autoIncrement: true },
    storeSchema: [
      { name: 'name', keypath: 'name', options: { unique: false } },
      { name: 'email', keypath: 'email', options: { unique: false } }
    ]
  }]
};

これがそれぞれ何をやっているのかという問題。
恐らくDBの定義をやっているんだろなというのはわかるけど、RDBに慣れている人からすると、ちょっと何言ってるのかわからない感じがある。
これをRDBと関連付けて解説してみる。

まず、2行目の

  name: 'MyDb',

これはデータベースの名前。RDBでも同じ。

3行目のversionもそのまま、DBのバージョンなので解説不要。

問題は4行目から。4行目はstoreの定義をするよということだけど、storeとはRDBで言うところのテーブル名と同じ。
以下はpeopleテーブルを作るよと言っているのと同じ。

    store: 'people',

6行目。storeConfigはstoreの定義。RDBでいうところの制約を定義するイメージ。
keyPathはテーブルのカラム名のこと。idというはautoincrementですよと言っている。

8,9行目のstoreSchema。これがわかりにくい。
nameとkeypathの違いがよくわからない。
まず、keyPathはRDBの列の名前と同じと思ってよい。
nameもほぼほぼ列の名前と同じ。
だったら、なんで2個も同じ名前を定義するんだ？
ということだけど、どうやら
データを書き込むときはkeypathを指定して書き込む。
検索するときはnameに指定した名前を使って検索するっぽい。
RDBでもインデックスを付けて検索を速くするけど、indexedDBも同じことをやる。
SQLのときはあんまりインデックス名を意識しないけど、indexedDBでは意識するということかもしれない。
まだ始めたばかりなので、このあたりもう少し確信が得られれば改定します。
とりあえず、ココを見ればいいという話。
https://base64.work/so/javascript/1457479