Web SQL Database APIによるデータベース・アクセス (5/6)

今回、transactionを使ってデータベースにアクセスしているのは、「addData」と「showAllData」の２つの関数だけです。これらについて、もう少し詳しく見てみましょう。


ここでは、db.transaction内にコールバック関数が用意されていますね。以下のようなものです。

tx.executeSql(
    'INSERT INTO MsgData VALUES(?, ?, ?)',
    [name, message, time],
    function(tx, rs) {……成功時の処理……},
    function(tx, error) {……失敗時の処理……});
}

ここでは、実行するSQLステートメントにINSERT INTO MsgData VALUES(?, ?, ?)というものが用意され、これにはめ込む値として[name, message, time]という配列が用意されています。これは整理すると、以下のようなステートメントになります。

INSERT INTO MsgData VALUES(name, message, time)

これは、「INSERT INTO」というSQLのコマンドです。このコマンドは、指定したテーブル（<table>じゃなくて、データベースに用意された、データを格納するためのものです）にデータを追加する働きをします。このコマンドは、

INSERT INTO テーブル名 VALUES ( 各項目の値 );

整理するとこんな形で記述をします。後述しますが、SQLデータベースは、データベースの中にテーブルというものが用意され、そこにデータが保管されます。このINSERT INTOにより、データを指定のテーブルに追加できるのです。


データの一覧を取得し表示するのがshowAllDataです。このshowAllDataでは、よく見ると２つのtransactionが実行されていますね。１つ目のtransactionでは、以下のような処理が実行されています。

tx.executeSql(
    'CREATE TABLE IF NOT EXISTS MsgData(
            name TEXT,
            message TEXT,
            time INTEGER)',
    []);

なんか長ったらしいですが、要するにここでは、以下のようなSQLステートメントを実行していることがわかるでしょう。

CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, time INTEGER)

これは「CREATE TABLE」というコマンドです。これは、データベースに「テーブル」と呼ばれるものを作成するためのものです。

テーブルとは、保管するデータの細かな仕様などを決めたものです。データを保管すると言っても、何でもかんでも放り込んでおけばいいというわけではありません。多くのデータベースでは、あらかじめデータの形式が決まっており、それに従ってデータを保管していきます。

SQLデータベースでは、保管するデータを「テキストの値のNAMEという項目、整数の値のIDという項目、時間の値のTIMEという項目……」といった具合に、１つ１つの項目を細かく定義したテーブルを作成します。そして、そのテーブルの中に、具体的なデータを追加するのです。テーブルは、データベースの中に複数作って置けます。こうして１つのデータベースの中に、何種類ものデータをきれいに整理して保管できるようになっているのです。

このテーブルが用意されていないと、データは保管できません。先ほど、INSERT INTOコマンドでデータを保管する方法を説明しましたが、これはすべて「テーブル」に保存をしました。つまり、事前にテーブルを用意しておかないといけないのです。このテーブルの作成をするのがCREATE TABLEです。

CREATE TABLE テーブル名 ( 項目名 タイプ, 項目名 タイプ, …… )

これは、このようにして作成をします。テーブル名の後に()をつけ、そこに各項目の名前とタイプ（値の種類）を指定していくのです。

ただし！　注意しないといけないのは、「既にテーブルがあると、これはエラーになる」という点です。そこで、コマンド内に「IF NOT EXISTS」というものを付け足してあります。これは「もし、その後にある○○が存在しなければ」という条件を設定するものです。これにより、MsgDataテーブルが存在しない場合にのみテーブルの作成を行うようになります。


showAllDataで行っているもう１つの処理は、全データを取得するためのものです。以下の部分です。

tx.executeSql('SELECT * FROM MsgData', [], ……略…… );

ここでは「SELECT * FROM MsgData」というSQLステートメントを用意しています。これは以下のようにして、指定のテーブルからデータを取得するためのものです。

SELECT * FROM テーブル名

これで正しくデータが取得できた際には、引数に用意した関数が呼び出されます。ここでは以下のような処理を行っています。

function(tx, rs) {
    removeAllData();
    for(var i = 0; i < rs.rows.length; i++) {
        showData(rs.rows.item(i));
    }
}

removeAllDataを呼び出した後、繰り返しを使ってゼロからrs.rows.length未満の間、処理を行っています。ここでは、rs.rows.item(i)というようにしてデータを取り出し、showDataでデータの表示を行っています。

rowsのitemで取り出されるのは、保管されているデータをオブジェクトにまとめたものです。各項目は、項目名のプロパティとして値が保管されています。ということは、rs.rows.item(i)で取り出されたオブジェクトから、name、memo、timeといったプロパティの値を取得すれば、保管してあるデータが得られる、ということになります。

データベースアクセスの基本ともいえる「テーブルの作成」「データ一覧の取得」「データの追加」について、ざっと理解できたでしょうか。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※データの追加
function addData(name, message, time) {
	db.transaction(function(tx) {
		tx.executeSql('INSERT INTO MsgData VALUES(?, ?, ?)', [name, message, time],
			function(tx, rs) {
				alert("SUCCESS!!");
			},
			function(tx, error) {
				alert(source + "::" + message);
			});
		}
	);
}

※全データの取得
function showAllData() {
	db.transaction(function(tx) {
		tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, time INTEGER)',[]);
		tx.executeSql('SELECT * FROM MsgData', [], function(tx, rs) {
			removeAllData();
			for(var i = 0; i < rs.rows.length; i++) {
				showData(rs.rows.item(i));
			}
		});
	});
}