Web SQL Databaseを使った例

Web SQL Databaseを使った例

Web SQL Databaseを使った簡単な例として、表5のような住所録（address）テーブルを操作する例を紹介します。

表5: テーブルの構造

まず、addressテーブルを作る処理は、以下のリストのようになります。1行目のopenDatabase関数でデータベースを開き、2行目以降でトランザクションを実行します。トランザクション内にはCREATE TABLE文があり、これによってテーブルが作成されます。

addressテーブルに表6のようなレコードを追加する場合、上のリストのexecuteSqlメソッドの部分を、以下のように変えます。

表6: 追加するレコード

また、追加したレコードを読み込んで、IDが「result」のHTML要素に流し込むには、上のリストの「function(tx) {・・・}」の内容を、以下のように変更します。

3行目のfor文で、読み込んだレコードの数だけ繰り返しを行います。そして、4行目の文で個々のレコードを変数rowに代入し、5行目でHTMLを整形します。変数のプロパティが、レコードの列に対応するようになっています。

ちなみに、SafariやGoogle Chromeでは、開発ツールでデータベースの内容を見ることができます（図1）。

Indexed Database APIの基本

Web SQL Databaseは、リレーショナル・データベースなので、強力なデータ処理を行える点がメリットです。しかし、前述したように、SQLの「方言」が発生する可能性があるという問題があります。また、リレーショナル・データベースには、テーブルの作成や変更の処理を書くのが面倒、というデメリットもあります。

そこで、キー・バリュー型のような使いやすさを持ちつつ、検索やトランザクションの機能も持ったデータベースのAPIとして、「Indexed Database API」が提案されています。

Indexed Database APIでは、1つのデータベースの中に、複数の「ObjectStore」を作ることができます。ObjectStoreは、リレーショナル・データベースで言うところのテーブルに相当します。そして、ObjectStoreには、JavaScriptの任意のオブジェクトを保存することができます。ObjectStore内の個々のオブジェクトが、リレーショナル・データベースで言うところのレコードに相当します。

スキーマをあらかじめ定義する必要がなく、また任意のオブジェクトを保存できることから、Indexed Database APIは、ドキュメント指向データベース的な雰囲気があります。JavaScriptではオブジェクトを柔軟に作ることができるので、Indexed Database APIはJavaScriptに適したAPIだと言えます。

ただし、Indexed Database APIは、初版が2010年1月に出たばかりなので、本記事の執筆時点では、実装しているWebブラウザがほとんどありません（Firefox 4βぐらい）。しかし、今後主流になりうる可能性を持っています。