簡易データベースを作る
Jaxerの基本的な使い方が分かったところで、Jaxerでどのようなことができるのか、もう少し具体的なサンプルを作成しましょう。Jaxerには、さまざまな機能が実装されており、JavaScriptからそれらを呼び出せるようになっています。ここでは、一例としてデータベース機能を利用してみることにしましょう。
多くのWebサイトでは、データベースとして「SQLデータベース」というものを利用しています。これは「SQL」と呼ばれるデータアクセス言語を使ってデータを操作するものです。SQL言語で用意された命令（クエリーといいます）をデータベースに送信すると、データを操作したり、必要なデータを検索して受け取ったりすることができます。
Jaxerには、このSQLデータベースの一種である「SQLite3」というプログラムが組み込まれており、これを利用してJavaScriptのスクリプトからデータベースを利用することができます。この機能を使い、ごく簡単なデータの保管プログラムを作ってみます。これもindex.htmlを書き換えて試してみましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>index</title>
<script runat="server-proxy">
// サーバー側の初期化処理
function server_init(){
var sql = 'create table if not exists sampledata (id integer primary key auto_increment, name text not null, mail text)';
Jaxer.DB.execute(sql);
}
// テーブルを取得しHTMLを生成して返す
function getTable(){
try {
sql = 'select * from sampledata';
var res= Jaxer.DB.execute(sql);
var table = '<table border="1">';
for(var i = 0;i < res.rowsAsArrays.length;i++){
var row = res.rowsAsArrays[i];
table += '<tr><td>'+ row[0]+'</td><td>' + row[1] + '</td><td>' + row[2] + '</td></tr>';
}
table += '</table>';
} catch (e) {
Jaxer.Log.error(e);
}
return table;
}
// データを追加する
function addData(name,mail){
try {
sql = "insert into sampledata (name,mail) values (?, ?)";
Jaxer.Log.info(sql);
var re = Jaxer.DB.execute(sql,[name, mail]);
} catch (e) {
Jaxer.Log.error(e);
}
}
</script>
<script type="text/javascript" runat="client">
<!--
// クライアントの初期化（一覧表示）
function client_init(){
var res = getTable();
document.getElementById('table').innerHTML = res;
}
// データ追加の呼び出し
function add(){
var name = document.getElementById('name').value;
var mail = document.getElementById('mail').value;
addData(name,mail);
client_init();
}
//-->
</script>
</head>
<body onserverload="server_init();" onload="client_init();">
<h3>Jaxer Sample</h3>
<div id="msg" onclick="client_init();">initialize...</div>
<div>NAME:<input type="text" id="name" name="name"></div>
<div>MAIL:<input type="text" id="mail" name="mail"></div>
<input type="button" value="送信" onclick="add();">
<hr>
<div id="table"></div>
</body>
</html>
このWebページでは、簡単なフォームが置かれ、その下にデータの一覧が表示されるようになっています。実際にいくつかフォームからデータを送って登録してみましょう。記録されたデータがテーブルにまとめられ表示されるのが確認できます。
Jaxer.DB利用の流れ
ここでは、「Jaxer.DB」というオブジェクトを利用しています。これは、JaxerからSQLiteを利用するための機能をまとめたもので、ここに用意されているメソッド「execute」を使ってサーバーにSQLクエリを送り、処理を行わせるものです。
まず、データを追加する処理を行っているaddDataメソッドを見てみましょう。ここでは、以下のような形でSQLiteにデータ追加の命令を送っています。
sql = "insert into sampledata (name,mail) values (?, ?)"; Jaxer.Log.info(sql); var re = Jaxer.DB.execute(sql,[name, mail]);
途中にある「Jaxer.Log.info」というのは、Jaxerのログ情報にsqlの内容を書き出しているものです。Jaxerでは、Jaxer.Logを使い、ログ出力を行えます。これは不要であれば削除してもかまいません。
ここでは、クエリ文（データベースに送る命令）に"insert into sampledata (name,mail) values (?, ?)"というテキストを用意しています。「insert into ～ values ～」というのが、SQLでデータを追加するための命令なのです。valuesには?が値として設定されていますが、ここにexecute時に、別途用意された値をはめ込むようになっています。クエリを実行している部分を見ると、Jaxer.DB.execute(sql,[name, mail])というようになっていますね。第1引数にクエリ文を、そして第2引数にはクエリ内にはめ込む値を配列として用意しています。この[name, mail]の値を、2つの?部分にはめ込んで実行するのです。
続いて、SELECT文によるレコード一覧の取得部分を見てみましょう。これは、getTableメソッドで行っています。
sql = 'select * from sampledata'; var res= Jaxer.DB.execute(sql);
「select * from ～」というのが、必要なデータを検索して取得するためにSQLに用意されている命令です。クエリの実行は、先ほどと同様ですね。今回は、特にクエリに値を埋め込むような作業は不要ですので、単に用意されたクエリ文をexecuteに渡すだけです。
実行結果は、Jaxer.DB.ResultSetというオブジェクトとして返されます。ここから、取得されたレコードのデータを取り出します。データの取得はいくつかやり方がありますが、ここでは「rowsAsArrays」というプロパティから値を取り出しています。これは、レコード（保管されている１つ１つのデータ）を配列としてまとめているプロパティです。各レコードは更に各フィールド値の配列になっています。したがって、rowsAsArrays[番号]という形でレコードのデータを配列として取得し、そこから更に個々の値を取り出して処理すればいいわけです。
var table = '<table border="1">';
for(var i = 0;i < res.rowsAsArrays.length;i++){
var row = res.rowsAsArrays[i];
table += '<tr><td>'+ row[0]+'</td><td>' + row[1] + '</td><td>' + row[2] + '</td></tr>';
}
table += '</table>';
ここでは、繰り返しを利用してrowsAsArraysから順にレコードのデータを取り出し、変数tableにまとめています。データの取り出し方が分かれば、あとは説明の必要はないでしょう。
Jaxer.DBで注意すべきは、「サーバーサイドでなければ動かない」という点でしょう。Jaxer.DBに限らず、Jaxerに用意されているオブジェクト類は「クライアント側で動くか、サーバー側で動くか」をよく確かめて利用する必要があります。
また、Jaxer.DBで作成されるデータベースは、通常のHTMLページからのアクセスとサービスのアクセスで、使われるデータベースファイルが異なるので、この点も注意が必要でしょう。サービスは、各サービスごとにデータベースファイルが用意されます。HTMLページからアクセスされるデータベースファイルと共用されないため、サービスを経由してデータを作成したものがHTMLページ経由で取り出せない、といった問題を引き起こすこともあります。サービスを利用するのであれば、「あるデータベースを利用する処理は、すべて1つのサービスで完結する」というように作成しましょう。
JavaScriptプログラマである皆さんの中には、SQLという言語を見たことがない人も多いかもしれません。ここでは、「こういうデータアクセス言語を覚えて使えば、こんな具合にデータベースをJavaScriptから操作できるのだ」ということだけわかれば十分でしょう。もし興味が湧いたなら、SQLについて調べてみるとよいでしょう。簡単なデータベースの操作なら、少し勉強すればできるようになるはずですよ。
まとめ
ここでは、Jaxerのインストールから基本的な使い方、そして一つの利用例としてデータベースを使った簡単なプログラムの作成までを行ってみました。Jaxerは、文字通り「Ajax機能に特化したWebサーバー」といってよいものですが、実際に使ってみれば分かるように、ごく普通のWebサーバーとしても十分使うことができます。普通のWebサーバーとの違いは、単に「サーバーサイドで利用可能な言語がJavaScriptである」というだけなのです。そもそも、Webサーバー部分には、一般のWebサーバーとして広く遣われているApache HTTP Serverが用いられているのですから。
「JavaScriptだけでWeb開発ができれば」と思っている人にとって、Jaxerは非常に魅力的な選択肢です。Aptanaで開発しているAptana Studioでは、Jaxerを統合したエディションもリリースされており、「サーバーサイドJavaScript」を本格的に推進しようと考えているようです。
サーバーサイドJavaScriptが、PerlやPHPのように「当たり前のようにWebで動いている」というまでに普及するかどうかはまだ分かりません。が、JavaScriptの重要性が日に日に高まりつつあることを考えれば、十分可能性はありそうです。「とりあえず、JavaScriptは分かるけど、他の言語をまた覚えるのは大変そうだし……」という人。試してみませんか、サーバーサイドJavaScript。
