Play2におけるJSONおよびCoffeeScriptの使い方:Scala+Play 2.0でWebアプリ開発入門(9)(3/3 ページ)
2.0からScalaに対応したWebアプリ開発の人気軽量フレームワーク「Play」について解説し、Webアプリの作り方を紹介する入門連載。今回は、JSONを扱うためのパッケージやJSONとScalaの相互変換の方法、JsPathの使い方、CoffeeScriptの使い方などを解説します。
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の持ついろいろな機能を紹介する予定です。
- 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を聴きながらプログラミングするのが大好きです。
関連記事
- スケーラブルで関数型でオブジェクト指向なScala入門
Scalaの特徴を紹介し、基本構文や関数、クラスなど、Scalaの基本的な機能について解説する入門連載 - Javaの常識を変えるPlay framework入門
サーブレット/JSPを基にする重厚長大なJavaのWeb開発のイメージを変える軽量フレームワーク「Play」について解説し、Webアプリの作り方を紹介する入門連載
Copyright © ITmedia, Inc. All Rights Reserved.