Play2におけるJSONおよびCoffeeScriptの使い方：Scala＋Play 2.0でWebアプリ開発入門（9）（3/3 ページ）

[中村修太，クラスメソッド]

Scala＋PlayでCoffee Scriptを使う

　「CoffeeScript」とは、JavaScriptにコンパイルできる言語です。構文はRubyやPythonに近く、コードを簡潔に記述でき、クライアント用にもサーバサイド用（Nodeなど）にも使えます。

　Play2でCoffeeScriptを使用する場合、ソースファイルはPlayコンソールでのcompileコマンドの実行時や、アプリ起動中のブラウザページリロード時（開発モード）にコンパイルされます。

　デフォルトでは、publicディレクトリは公開アセットとして、下記のようにroutesで定義されています。

GET  /assets/*file        controllers.Assets.at(path="/public", file)

　例えば、「app/assets/javascripts/sample.coffee」というCoffeeScriptファイルがあるとしましょう。この場合、アセットコントローラの機能により、「public/javascripts/sample.js」としてアクセスできます。

　なお、アセットコントローラについては､ドキュメント「Assets」を参照してください。

Scala＋PlayでCoffeeScriptを使うサンプルコードの実装

　CoffeeScriptファイルをアプリ上で実行してみましょう。まずは、app/assets/javascriptsディレクトリを作成し、「sample.coffee」という名前で格納します。

　app/assets以下に格納しておけば、Playによって自動的にコンパイルされます。

#app/assets/javascripts/sample.coffee
$ ->
  $('#btn').click ->
    console.log 'click!!'

　プログラム内容は、jQueryを使用してクリックイベントをボタンに設定し、ログ出力をするだけです。

　次にconf/routesファイルに、下記のようにURLマッピングを追加します。

GET     /coffeeSample     controllers.CoffeeController.index()

　app/controllersにCoffeeController.scalaを追加しましょう。OKを返すだけのindex関数を定義します。

package controllers
import play.api._
import play.api.mvc._
object CoffeeController extends Controller {
  def index = Action {
    Ok(views.html.coffee())
  }
}

　続いてapp/viewsディレクトリにcoffee.scala.htmlファイルを作成します。scriptタグでroutes.Assetsを使用し、先ほど作成したsample.coffeeのコンパイル後のファイルを指定しています。

@main("coffee sample") {
    <h1>CoffeeScript Sample</h1>
    <button id="btn">click</button>
    <script src="@routes.Assets.at("javascripts/sample.js")">
    </script>
}

　Playコンソールでrunコマンドを実行し、「http://localhost:9000/coffeeSample」へアクセスして画面のボタンをクリックしてみてください。クリックするたびにコンソールログが出力されます。

　CoffeeScriptのファイルが、自動でコンパイルされて実行できていますね。

　ちなみに、CoffeeScriptをコンパイルして生成されたjsファイルは、publicディレクトリに存在するわけではなく、「target/scala-2.x/resource_managed」以下に保存されます。

Scala＋PlayでJSONやCoffeeScriptを使ってみよう

　今回は、PlayでJSONを扱う方法とCoffeeScriptを使う方法を紹介しました。

　JSONについてはScalaと相互変換するための機能があり、アプリで扱うのも容易だと思います。また、CoffeeScriptについても自動でコンパイルできる仕組みを持っているので、JavaScriptの代わりに、CoffeeScriptの採用を検討してみてもいいのではないでしょうか。

　次回も引き続きPlay2の持ついろいろな機能を紹介する予定です。

「Scala＋Play 2.0でWebアプリ開発入門」バックナンバー

• Play2プラグインのインストールと使用と新規開発
• Play2＋nginx/Akka/WebSocketで高速双方向通信
• Play2（＋JavaScript）アプリを高速化、最適化する4つのテクニック
• Play2におけるJSONおよびCoffeeScriptの使い方
• Playのグローバルな設定＆spec2でBDDなテスト
• Play 2.xからMySQLに接続してAnormでCRUD操作するには
• Play 2.xのScala Templatesでビュー＆フォーム操作
• Play 2.1にアップグレードしてコントローラを使いこなす
• Playコントローラ／Action／HTTP Routerの基本的な使い方
• 便利なPlayコンソールとEclipseでのデバッグ方法
• Play 2.0のアーキテクチャとディレクトリ構成の基礎知識
• Play framework 2.0の概要／5つの特徴とScalaで作るための環境構築

著者プロフィール

中村修太（なかむら しゅうた）

クラスメソッド勤務の新しもの好きプログラマです。昨年、東京から山口県に引っ越し、現在はノマドワーカーとして働いています。好きなJazzを聴きながらプログラミングするのが大好きです。