Play FrameworkでScala.jsを使いたい #Scala

Play FrameworkでScala.jsを使うためのセットアップ手順です。

play-scala-scalajsというテンプレートがあるので利用する。

activator new new-ui play-scala-scalajs

次のファイルが作成される。

.
├── LICENSE
├── README.md
├── activator
├── activator-launch-1.3.2.jar
├── build.sbt
├── play ... Play Frameworkのプロジェクト
│   ├── app
│   │   ├── controllers
│   │   │   └── Application.scala
│   │   └── views
│   │       ├── index.scala.html
│   │       └── main.scala.html
│   ├── conf
│   │   ├── application.conf
│   │   └── routes
│   ├── public
│   │   ├── images
│   │   │   └── favicon.png
│   │   ├── javascripts
│   │   │   └── hello.js
│   │   └── stylesheets
│   │       └── main.css
│   └── test
│       ├── ApplicationSpec.scala
│       └── IntegrationSpec.scala
├── project
│   ├── build.properties
│   └── plugins.sbt
└── scalajs ... Scala.jsのプロジェクト
    └── src
        └── main
            └── scala
                └── hello.scala

作られたプロジェクトでactivatorを起動する。

cd ./new-ui
./activator

ライブラリのダウンロードが行われるので終わるまでしばらく待つ。ダウンロードが完了したら早速サーバを立ち上げてみる。

run

コンパイルに少々時間がかかる。コンパイルが終わったら、 http://localhost:9000/ をブラウザで開く。

テンプレートでScala.jsを呼び出している部分

main.scala.htmlの@playscalajs.html.scripts("scalajsclient")がScala.jsを読み込んでいる部分です。

play/app/views/main.scala.html

@(title: String)(content: Html)
@import play.api.Play

<!DOCTYPE html>

<html>
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
        @playscalajs.html.scripts("scalajsclient")
    </head>
    <body>
        @content
    </body>
</html>

HTMLではこのようにレンダリングされています。

<script src="/assets/scalajsclient-fastopt.js" type="text/javascript"></script>
<script src="/assets/scalajsclient-launcher.js" type="text/javascript"></script>

JavaScriptのコードはどこに生成されるか？

上のHTMLの<script>タグからファイル名を手がかりに探してみると、play/target/web/public/mainに生成されていることが分かります。

% find . -name scalajsclient-fastopt.js
./play/target/web/public/main/scalajsclient-fastopt.js
./scalajs/target/scala-2.11/scalajsclient-fastopt.js

Scala.jsは自動でコンパイルされる

activatorでrunしている状態であれば、Scala.jsに書いたコードは自動的にJavaScriptにコンパイルされて配置されます。

new-ui/scalajs/src/main/scala/hello.scala

import scala.scalajs.js
import scala.scalajs.js.Dynamic.global

object Hellp extends js.JSApp {
  def main(): Unit ={
    if (!js.isUndefined(global.window.console)) {
      global.console.log("Welcome to your Play application's JavaScript!")
      global.console.log("書き換えてみた！") // この行を追加
    }
  }
}

この状態で、 http://localhost:9000/ を開き、インスペクタのコンソールを見ると「書き換えてみた！」が表示されているはずです。