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

» 2013年09月25日 18時00分公開

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

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アプリ開発入門」バックナンバー

著者プロフィール

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

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

スケーラブルで関数型でオブジェクト指向なScala入門
Scalaの特徴を紹介し、基本構文や関数、クラスなど、Scalaの基本的な機能について解説する入門連載
Javaの常識を変えるPlay framework入門
サーブレット／JSPを基にする重厚長大なJavaのWeb開発のイメージを変える軽量フレームワーク「Play」について解説し、Webアプリの作り方を紹介する入門連載

前のページへ 1|2|3 　　　　　　

SpecialPR