libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

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

作成:2010-07-17 17:56
更新:2010-07-17 17:56

■transactionで実行された処理を考える

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

※addDataでのデータの追加

ここでは、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では、よく見ると2つのtransactionが実行されていますね。1つ目の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という項目……」といった具合に、1つ1つの項目を細かく定義したテーブルを作成します。そして、そのテーブルの中に、具体的なデータを追加するのです。テーブルは、データベースの中に複数作って置けます。こうして1つのデータベースの中に、何種類ものデータをきれいに整理して保管できるようになっているのです。

このテーブルが用意されていないと、データは保管できません。先ほど、INSERT INTOコマンドでデータを保管する方法を説明しましたが、これはすべて「テーブル」に保存をしました。つまり、事前にテーブルを用意しておかないといけないのです。このテーブルの作成をするのがCREATE TABLEです。
CREATE TABLE テーブル名 ( 項目名 タイプ, 項目名 タイプ, …… )
これは、このようにして作成をします。テーブル名の後に()をつけ、そこに各項目の名前とタイプ(値の種類)を指定していくのです。

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

※データ一覧の取得

showAllDataで行っているもう1つの処理は、全データを取得するためのものです。以下の部分です。
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でデータの表示を行っています。

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

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

※プログラムリストが表示されない場合

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));
			}
		});
	});
}

※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る