木村 真幸（きむら まさゆき）

　株式会社DTS ネットワーク事業本部 プロジェクトマネージャ。Javaを中心にフレームワーク開発や開発プロセス定義など幅広く活躍中。StrutsIDEコミッタ。著書「まるごとEclipse!　Vol.1」（発行：インプレスコミュニケーションズ）。

　この連載では，現場のJava開発者が気になるJavaフレームワークを詳細に解説します。今後利用実績が伸びそうなフレームワーク，多少メインストリームから外れているけど，ユニークで注目に値するフレームワークなどを，一つずつ取り上げてじっくり解説していきます。今すぐでなくても，いずれ仕事に役立つはずです。ぜひ読んでください。

　第1回では，最近人気のAjaxアプリケーションを簡単に作れるフレームワークを取り上げます。Ajaxは，Webアプリケーションにリッチなユーザー・インタフェース（UI）をもたらす仕組みとして非常に注目されています。基礎的なアーキテクチャや従来の処理方式との違いなどについては「今からでも遅くないAjax基本のキ 第一回 What is Ajax?」を参照いただくとして，ここでの説明は省略します。

　ここでは乱立気味ともいえる多数のAjax対応フレームワークの中から，ユニークな開発手法が興味深いGoogle Web Toolkit（以下，GWT）を紹介します。GWTは，米Googleが提供している開発キットです。簡単にAjaxアプリケーションを作成できるので，ぜひ本稿を読みながら手を動かしてみてください。GWTの特徴が実感できるはずです。

JavaScriptの開発の難しさ

　Ajaxは，ブラウザ上でリッチなUIを実現するものですが，基本となる技術はJavaScriptです。筆者は，Ajaxについて初めて聞いたとき，真っ先に「JavaScriptバリバリの開発なんてイヤ過ぎる」と思いました。筆者のような人は少なからずいるのではないでしょうか？

図1●JavaScriptのエラー画面
図1●JavaScriptのエラー画面

　理由は明白です。JavaScriptを書いたことがある人ならば，このような警告をきっと見たことがあるでしょう（図1）。エラー情報の詳細を見ても不親切この上ないことに加えて，図2のようなエラー情報画面がいくどとなく出現するにおよんでは，「オブジェクトを指定してください？ いったい何のオブジェクトなのさ！」と血圧を上昇させ，マウスを壊れんばかりに握ってしまうことも少なくありません（ほかにも「オブジェクトはnullです」という簡潔で不明瞭なメッセージもあります）。

図2●エラー詳細画面を見ても，エラー原因の特定は難しい
図2●エラー詳細画面を見ても，エラー原因の特定は難しい

　ちなみに，リスト1が図2のエラーを表示させるために作った間抜けなJavaScritptのコードです。「エラー：オブジェクトを指定してください」で原因を突き止められるでしょうか？（答えはfunctionにtが抜けているからです）。

<script type="text/javascript">
funcion helloWorld(){
 alert('helloWorld');
}
</script>
リスト1●エラーが出る間抜けなJavaScript

　実際のWebアプリケーション開発で利用するJavaScriptは，リスト1のように単純ではなく，もっと複雑で長文になるでしょう。そうなるとエラー原因の特定はますます難しくなります。さらに，開発を困難にさせるのは複数のブラウザ（クロスブラウザ）に対応する必要がある場合です。OSやブラウザによって方言（JavaScript解釈の違い）があるので，これらに対応させるのは，技術力というより忍耐力との勝負になります。

　方言がやっかいなのは，開発だけでなく，テスト時にも問題になることです。JavaであればJUnitなどを使って，再帰テストはボタン一つで簡単に行えるのですが，JavaScriptではそうはいきません。jsUnitなどを利用してテスト・ケースを書く場合，プログラマが方言の違いを事前に把握・吸収し，コードを記述する必要があります。これがどれくらい難しいことかは，経験のある方ならよくわかるでしょう。

　そんなJavaScriptの開発しにくさを理解している人にも，“Ajaxをやってみよう！”と思わせる開発キット（以下SDK）がGWTです。

GWTとは？

　GWTの主な特徴をまとめると，表1のようになります（詳細はhttp://code.google.com/webtoolkit/の「Google Web Toolkit Features」を参照ください）。

表1●GWTの主な特徴
表1●GWTの主な特徴
[画像のクリックで拡大表示]

　GWTでは，HTMLでidを設定してUI部品（Widget）を挿入するか，パネルやWidgetをSwingのように組み合わせて，UIを構築します。そして，WebアプリケーションにデプロイするときにJavaScriptに変換することでAjaxを実現しています（図3）。パネルやWidgetという言葉を知っている人はピンくるように「GWTはSwing，SWTライクにAjaxをJavaで実装できる」というと，イメージがつかみやすいかもしれません。

図3●GWTでは，クライアント側の開発方法が2種類ある
図3●GWTでは，クライアント側の開発方法が2種類ある
[画像のクリックで拡大表示]

　多くのAjaxフレームワークは，JavaScriptのライブラリを提供することで開発コストを下げようとしています。これに対して，GWTはJavaからJavaScriptを生成するというユニークな手法により，Ajaxで必要となる多数のスキルセットそのものを減少させています。

　GWTのアプローチは，必要となるスキルセットが多く，敷居の高いAjax開発に大きなメリットをもたらします。半面，大きなデメリットも含んでいます。それについては最後に説明します。

インストールは解凍するだけ

　GWTの良さを理解するには，言葉で説明するより，自分のPCで実際に動かすほうが早いでしょう。まずJDK 1.4.2以上，Eclipse3.2＋LanguagePackを用意してください（Eclipseについては，GWTで必須ではありません。また，本稿ではWindows XP＋JDK 5.0 Update 9＋All-In-One-Eclipse V3.0.1を利用することを前提としています）。

　準備が整ったら，GWTのサイトからWindows用SDKのアーカイブ・ファイル（執筆時点での最新版はgwt-windows-1.1.10.zip）をダウンロードします。これを任意のフォルダに解凍（展開）すればインストールは完了です。

　ここではC:¥GWTに解凍したとします。操作の簡略化のため，環境変数PATHに「C:¥GWT¥gwt-windows-1.1.10」を設定します。

Hostedモードで確認，Webモードでデプロイ
　GWTは，コマンドラインで動作するスターター・アプリケーションを作成することができます。適当なフォルダ（ここではC:GWT¥HelloWorldProject）を作成します。コマンドプロンプトを起動して，作成したフォルダ（ディレクトリ）に移動して次のコマンドを実行します。

projectCreator -eclipse HelloWorldProject

　これでEclipseからインポートできるプロジェクト（HelloWorldProject）が作成されます。次に，スターター・アプリケーションを生成します。

applicationCreator -eclipse HelloWorldProject jp.co.nikkeibp.itpro.client.HelloWorld

を実行すると「jp.co.nikkeibp.itpro.client.HelloWorld」クラスやHTMLファイルなどが生成されます。

　GWTは，clientパッケージ下のクラスをクライアント側のJavaコードと判断し，JavaScript変換を行います。そのため，HellowWorldクラスのパッケージを＊.clientにすることは必須です。

　なおGWTには，applicationCreatorと同レベルのコマンドライン・ツールとしてi18nCreatorがあります。i18nCreatorはその名の通り，プロパティ・ファイルで国際化対応を行うためのプロジェクトやクラスを生成するものです。

　生成処理が終わったら，Eclipseのメニューから[ファイル]→[インポート]→[既存プロジェクトをワークスペースへ]を選択し，作成したC:¥GWT¥HelloWorldProjectフォルダをインポートしましょう。ここまでの作業が完了すると，パッケージ・エクスプローラは図4のようになります。これで動作準備は終了です。

図4●GWTのスターター・アプリケーションをインポートしたところ（パッケージ・エクスプローラーの画面）
図4●GWTのスターター・アプリケーションをインポートしたところ（パッケージ・エクスプローラーの画面）

　動作させるには[ウィンドウ]→[設定]…という作業が必要かと思いきや，起動構成の設定内容を記述した.launchファイルが生成されているため，Eclipse上での実行に必要なすべての設定は終わっています。

　メニューから[実行]→[構成および実行]→[Javaアプリケーション]→[HelloWorld]を選択し，実行ボタンを押下すると，図5のようにHostedブラウザと呼ばれる擬似ブラウザが立ち上がります。

図5●スターター・アプリケーションの起動画面（Hostedモード）
図5●スターター・アプリケーションの起動画面（Hostedモード）

　この状態をHostedモードと呼びます。これに対して，Hostedブラウザではなく，実際のアプリケーション・サーバーにデプロイできる（JavaからJavaScriptに変換した）状態をWebモードと呼びます。Webモードでは，この簡単なアプリケーションも，HTML＋JavaScript＋CSSなどを中心に構成されるAjaxのアプリケーションとなります。

　GWTでの開発プロセスと，Hostedモード，Webモードの区分けを図6にまとめます。これを見れば，Hostedモードでの工程が多く，ほとんどの部分をJava上でデバッグ/テストを行えることがわかります。

図6●GWTでの開発の流れ
図6●GWTでの開発の流れ