Play Frameworkに挑戦(Java編 その5) ~JSON/ jQuery/CoffeeScriptを使用する

前回の続き

前回ではモデルの登録処理を実装した。

今回は登録したエンティティを取得し画面に表示する処理である。イントロダクション動画では13:00~終わりまで。
Introduction to Play Framework for Java developers on Vimeo

JSONでデータを返す

最近ではAjaxなどのデータ転送に使われるデータフォーマットととして、XML形式に代わってJSON形式が使用されることが多いようだ。
データベースに保存した全エンティティを取得しJSON形式で取得するために次のようにコードを追加する。

conf/routes に下記追加

GET		/bars		controllers.Application.getBars()

controllers/Application.java に下記追加。

import java.util.List;
import play.db.ebean.Model;
import static play.libs.Json.toJson;
    public static Result getBars() {
    	List<Bar> bars = new Model.Finder(String.class, Bar.class).all();
    	return ok(toJson(bars));
    }

ブラウザから localhost:9000/bars にアクセスしてみると、下記のようにJSON形式のデータが返されていることが分かる。

f:id:FryingHighAgain:20140317223822p:plain

CoffeeScriptjQueryを使う

いまさら言うまでもないことであるが、ブラウザで動作するプログラミング言語いわゆるクライアントサイドスクリプトとしての絶対的地位にあり、AjaxHTML5により益々重要度の増しているのがJavaScript(ECMAScript)であり、最新のプログラミング言語ランキング*1では、Javaを抜いて1位だという調査結果もあるほどである。
しかし、重要ではあるが皆が皆JavaScriptという言語を気に入っているというわけではないようである。JavaScriptへの変換を前提とした言語が複数生み出されており、その一つがCoffeeScriptという言語だそうだ。

views/index.scala.html を下記のように変更。

@(message: String)

@main("Welcome to Play") {

	<script src='@routes.Assets.at("javascripts/index.js")'></script>

	<ul id="bars"></ul>

	<form action="@routes.Application.addBar()" method="post">
		<input name="name">
		<input type="submit">
	</form>

}

<ul>タグの部分は、jQueryで操作することになるHTML要素だ。
javascripts/index.js は次のCoffeeScriptのソースファイルが変換されたJavaScriptファイルだ。

assets/javascripts/index.coffee

# ->
	$.get "/bars", (data) ->
		$.each data, (index, bar) ->
			$("#bars").append $("<li>").text bar.name

さて、今一度ブラウザから localhost:9000/ のページをリフレッシュすると
入力フォームの上部に、登録した名前の一覧が表示される。
f:id:FryingHighAgain:20140318000333p:plain

念のためHTMLソースも確認。
f:id:FryingHighAgain:20140318000402p:plain

記述したCoffeeScriptはこのようにJavaScriptへ変換されたようだ。
f:id:FryingHighAgain:20140318000415p:plain

今回のまとめ

5回にわたりPlay Frameworkのほんの触りの部分をイントロダクション動画をもとに挑戦してみたが、正直Webアプリ開発バリバリの人にとっては、これといって特に目新しいこともない退屈な内容ではなかったかと思う。だが、門外漢な私にとってはORマッピングや自動テストフレームワークなど普段ほとんど使ってこなかった現代的開発に触れることができ、「一から開発技術を鍛え直す」というブログタイトル通りのよいお勉強になったと満足している。