第1回　Aptana Jaxerとは？／Jaxerのここが素敵

Apatna Jaxerとは？

サーバサイドJavaScriptとは、その名の通りサーバ側で実行するJavaScriptのことです。

JavaScriptはクライアントのブラウザ上で実行するもの、というイメージが強いので、サーバ側で実行すると言われても、ピンと来ない方も多いかもしれません。

サーバサイドJavaScriptのエンジンは、いくつかのプロダクトが登場しています。Javaによる実装のRhinoやCによる実装のSpidermonkeyは、その代表格になります。

先日、統合開発環境Aptana Studioで有名なAptana社が、サーバサイドJavaScriptを実現する"Ajaxサーバ"Aptana Jaxer（以下、Jaxer）を発表しました。

Ajaxサーバ、とは耳慣れない言葉ですが、Jaxerの特徴をずばりと言い表すために作った造語だと思います。Jaxerを利用すると、Ajaxアプリケーションをシンプルに作ることができます。

本連載では、Jaxerの特徴から、簡単なサンプルアプリケーションの構築までを解説していきます。

Jaxerのここが素敵

まず手始めに、本家Jaxerのサイトに書かれているJaxerの特徴から、サーバサイドJavaScriptのメリットを挙げていきたいと思います。

1．たった1つのファイルでAjaxのアプリケーションやプレゼンテーションレイヤを全て記述できる

JaxerのコードはHTMLに、以下のように記述します。

<body>
  <script runat="server"> ... </script>
  <script runat="both"> ... </script>
  <script runat="client"> ... </script>
  <script runat="server-proxy"> ... </script>
</body>

※html、headタグは割愛しています。

パッと見て分かるように、scriptタグにrunatという属性が拡張されています。このrunat属性は、そのscriptタグ中のコードをサーバとクライアントのどちら側で実行するかを指定するものです。

それぞれの値の意味は以下のようになります。

server：サーバのみで利用されるコードを記述します。ここに記述した内容は、ページ出力時にカットされ、ユーザは見られないようになっています。
both：サーバ、クライアントの両方で利用されるコードを記述します。
client：クライアントのみで利用されるコードを記述します。runat属性を省略した場合は、runat="client"と同じ処理になります。
server-proxy：クライアントからサーバ側での処理を呼び出したいとき、ここに記述します。ページ出力時にはクライアント側からサーバへ関数をコールする内容に置き換えられます。

runatの値がserverとclientだけなら、PHPとあまり変わらないかも知れませんが、server-proxyという値を利用することにより、ページ表示後にAjaxでサーバ側と非同期通信する部分のコード量／ファイル数が激減します。

例えば、ページ表示後、Ajaxでサーバにアクセスして情報Aを取得しようとしたとき、PHPで実装すると、表示ページと情報Aを返すページの2つのphpファイルが必要になり、JavaScriptの中でもいちいちAjaxのコードを書かなければいけませんが、Jaxerでは情報Aを返すだけのページや、Ajaxのコードを書く必要はなくなります。

2．サーバサイドのJavaScriptでDOMが利用できる

Jaxerでは、サーバサイドでのDOM操作が可能になっています。

つまり、Prototype.jsやjQueryなどのライブラリを、サーバサイドで利用することができるのです。

例えば、値'foo'をid="hoge"のdivタグのテキストノードに指定したい場合、

document.getElementById('hoge').innerHTML = 'foo';

と書くことができます。サーバサイドでjQueryを利用すれば、さらに

$('#hoge').text('foo');

とより簡単に書くことが可能です。

これまでクライアントサイドのJavaScriptで培ってきたテクニックを、そのままサーバサイドのJavaScriptで活かすことができます。

ただし、ライブラリなどは完全にはサポートされていないので注意が必要です。jQueryのサポート状況は、Jaxerに付属しているjQueryのテスト実行ページで確認することができます。

3．ブラウザとサーバのシームレスなやりとり

HTML上で、あるボタンをクリックして、その時点のhogeテーブルの行数を取得したいとき、Jaxerでは以下のように書くことができます。

<script runat="server-proxy">
getHogeCount(){
    return Jaxer.DB.execute('select count(*) from hoge');
}
</server>
<input type="button" value="Hogeテーブルの行数"
onclick="alert(getHogeCount());">

scrptタグのrunat属性をserver-proxyにすることで、クライアント側のJavaScriptからサーバ側のJavaScriptの関数を直に指定して呼び出すことができます。

このシンプルさがJaxerのウリの一つになります。

4.他の言語で書かれた既存のページへアクセスすることができる

<script runat="server">
Jaxer.Web.get('http://gihyo.jp/')
</script>

これだけで、gihyo.jpのトップページを取得することができます。

クロスドメインの制約を受けることなく、ローカルの、或いは外部のサーバのページにアクセスすることができるのです。

読み込んできたHTMLの必要な部分を取り出し、表示を再加工し、出力する、なんてことは簡単にできてしまいます。サーバサイドでjQueryのようなライブラリを利用すれば、コードはより簡単に書くことができます。

5．Validationコードをブラウザとサーバで共有することができる

サーバサイドJavaScriptが実現してくれることの中で、個人的に一番嬉しいのがこの項目です。

皆さんはこれまでにWebアプリケーションを作成してきた中で、JavaScriptで実装したブラウザ上の入力値チェックの結果と、JavaやPerl、PHPなどで実装したサーバ側での入力値チェックの結果が異なる経験をしたことはないでしょうか？

異なる言語で、同じことを実装するのは2倍手間がかかりますし、メンテナンスも同じように2倍手間がかかります。テストに至っては2倍ではすまないかもしれません。

Jaxerを利用すると、入力値チェックのロジックを、<script runat="both"></script>の中に記述することで、サーバ側でもクライアント側でも利用することが可能になります。

6．JavaScriptでのDBアクセスやファイルアクセス、ソケット通信ができる

サーバサイドJavaScriptと聞いて、「⁠どうせDBアクセスやファイルの入出力の部分は別の言語にまかせるんだろう」と思っている方が、もしかしたらいるかもしれません。

Jaxerでは、サーバサイドでJaxerのフレームワークを利用することにより、DBへのアクセスやファイルの入出力、ソケット通信が可能になっています。

例えば、myTableをセレクトして、1行目のprice列の値を取り出すときは、以下のように記述します。

<script runat="server">
   var resultSet = Jaxer.DB.execute("SELECT * FROM myTable");
   var newPrice = resultSet.rows[0].price;
</script>

また、JaxerにはSQLiteが付属されており、プロトタイプアプリを作る場合に置いて、面倒なDBのセットアップ作業などが一切必要ないのも魅力の一つです。

7．オープンソースであり、標準に準拠しており、すでに知られているAPIを使うものである

JaxerはGPLライセンスの元に公開されているオープンソースプロダクトです。

バイナリと同時にソースコードも公開されており、誰でも中を見ることができます。

また、FireFox3で利用されているエンジンを活用しており、JavaScriptの標準に完全に則っています。

Jaxerアプリケーションは、HTMLとJavaScriptの知識があれば、誰でも簡単に構築することができます。

どうでしょうか？　少しはJaxerに興味をもっていただけたでしょうか？

次回以降、環境構築と簡単なサンプルアプリケーションの作成を通じて、より詳細なJaxerの解説を行いたいと思います。