ScalaコードをJavaScriptにコンパイルする、Scala.jsというものがあるらしいです。
Scala.jsを使って、ScalaをJavaScriptにコンパイルする
http://www.infoq.com/jp/news/2013/06/scalajs
これを使用すると、ScalaのコードをJavaScriptにコンパイルすることができる…らしいです。
オフィシャルサイトは、こちら。
Scala.js A Scala to JavaScript compiler
http://www.scala-js.org/
このサイトには、こんなことが書いてあります。
Important notice! Scala.js is still experimental! Although this is a project of LAMP/EPFL for which we will continue to provide best-effort improvements and bug fixes, it is not supported by Typesafe, and not part of any of their support contracts. You have been warned!
http://www.scala-js.org/
まあ、実験的なプロジェクトみたい？Typesafe社のサポートはないみたいですね。
それで、最近こちらのブログでScala.jsが盛り上がっていました。
Scala.jsが凄い
http://mizchi.hatenablog.com/entry/2014/02/14/211400
これを見た時は、「へぇ〜」といった感じだったのですが、とっかかりとして挙げられている以下のリポジトリの内容を見て、これまでCoffeeScriptみたいなJavaScriptを生成するものに興味を示したことがなかったのですが、Scalaを使っていることもあり「これは面白そうかも」と思いました。
Example application written in Scala.js
https://github.com/sjrd/scala-js-example-app
このリポジトリをcloneして遊んでみよう、みたいなチュートリアルなのですが、ここはまっさらから始めてみることにしましょう。
あ、最終的にできあがるものは、上記リポジトリと見た目は同じです。テストコードは抜きですが。
準備
どうも、Scala.jsはsbtのプラグインとして利用するみたいです。
なので、まずはプラグインの設定をします。
project/plugins.sbt
addSbtPlugin("org.scala-lang.modules.scalajs" % "scalajs-sbt-plugin" % "0.3")
現在の最新版は、0.3みたいですね。
そして、sbt自体の設定。
build.sbt
name := "scala-js-getting-started" version := "0.0.1-SNAPSHOT" scalaVersion := "2.10.3" organization := "org.littlewings" scalacOptions ++= Seq("-Xlint", "-deprecation", "-unchecked") scalaJSSettings // Specify additional .js file to be passed to package-js and optimize-js unmanagedSources in (Compile, ScalaJSKeys.packageJS) += baseDirectory.value / "js" / "startup.js"
いろいろ書いていますが、重要なのはここです。
scalaJSSettings // Specify additional .js file to be passed to package-js and optimize-js unmanagedSources in (Compile, ScalaJSKeys.packageJS) += baseDirectory.value / "js" / "startup.js"
Scala.jsプラグインの設定と、その下になんかJavaScriptの追加があります。このファイルは、後で出しましょう。
Scalaコードを書く
とりあえず、中身はほぼ一緒ですけど、パッケージ名／クラス名を変えてこんな感じにしました。
src/main/scala/org/littlewings/scalajs/ScalaJsGettingStarted.scala
package org.littlewings.scalajs import scala.scalajs.js import js.Dynamic.global object ScalaJsGettingStarted { def main(): Unit = { val p = global.document.createElement("p") p.innerHTML = "<strong>It works!</strong>" global.document.getElementById("playground").appendChild(p) } }
globalは、ブラウザ上のwindowオブジェクトに該当しそうですね。
起動スクリプトの追加
先ほど、build.sbtの中で書いていたJavaScriptですが、このような中身で用意します。
js/startup.js
ScalaJS.modules.org_littlewings_scalajs_ScalaJsGettingStarted().main();
「ScalaJS.modules」の後は、「.」で繋いで、作成したクラスのパッケージ名を「_」に変えて、エントリポイントのメソッドを呼び出せばよいみたいですね。
なお、このようなファイルを用意して、sbtに
// Specify additional .js file to be passed to package-js and optimize-js unmanagedSources in (Compile, ScalaJSKeys.packageJS) += baseDirectory.value / "js" / "startup.js"
のように追加をしてあげないと、ブラウザでロードしても動いてくれませんのでご注意を。
パッケージング
では、Scalaコードをパッケージング（JavaScriptに変換）してみましょう。
コマンドは、
> packageJS
です。
では、実行。
> packageJS [info] Updating {file:/xxxxx/scala-js-getting-started/}scala-js-getting-started... [info] Resolving org.fusesource.jansi#jansi;1.4 ... [info] Done updating. [info] Extracting /xxxxx/.ivy2/cache/org.scala-lang.modules.scalajs/scalajs-library_2.10/jars/scalajs-library_2.10-0.3.jar ... [info] Compiling 1 Scala source to /xxxxx/target/scala-2.10/classes... [info] Packaging /xxxxx/scala-js-getting-started/target/scala-2.10/scala-js-getting-started.js ... [info] Packaging /xxxxx/scala-js-getting-started/target/scala-2.10/scala-js-getting-started-extdeps.js ... [success] Total time: 23 s, completed 2014/02/21 22:58:40
できあがるファイルは、こんな感じです。
$ ll -h target/scala-2.10/ 合計 38M drwxrwxr-x 3 xxxxx xxxxx 4.0K 2月 21 22:58 ./ drwxrwxr-x 5 xxxxx xxxxx 4.0K 2月 21 22:58 ../ drwxrwxr-x 3 xxxxx xxxxx 4.0K 2月 21 22:58 classes/ -rw-rw-r-- 1 xxxxx xxxxx 22M 2月 21 22:58 scala-js-getting-started-extdeps.js -rw-rw-r-- 1 xxxxx xxxxx 16M 2月 21 22:58 scala-js-getting-started-extdeps.js.map -rw-rw-r-- 1 xxxxx xxxxx 0 2月 21 22:58 scala-js-getting-started-intdeps.js -rw-rw-r-- 1 xxxxx xxxxx 3.6K 2月 21 22:58 scala-js-getting-started.js -rw-rw-r-- 1 xxxxx xxxxx 1.2K 2月 21 22:58 scala-js-getting-started.js.map
この、「.js」で終わっている3ファイルを使用します。ファイル名は、sbtでのプロジェクト名が反映されています。
先のブログにも出ていましたが、確かに「extdeps.js」で終わっているファイルのサイズがヤバいですね。
あとは、このJavaScriptを読み込むHTMLを作成して、読み込ませます。
index-dev.html
<!DOCTYPE html> <html> <head> <title>Example Scala.js application</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> <h1>Example Scala.js application - development version</h1> <p>After having compiled and packaged properly the code for the application (using `sbt packageJS`), you should see "It works" herebelow. See README.md for detailed explanations.</p> <div id="playground"> </div> <script type="text/javascript" src="./target/scala-2.10/scala-js-getting-started-extdeps.js"></script> <script type="text/javascript" src="./target/scala-2.10/scala-js-getting-started-intdeps.js"></script> <script type="text/javascript" src="./target/scala-2.10/scala-js-getting-started.js"></script> </body> </html>
読み込ませているのは、ここですね。
<script type="text/javascript" src="./target/scala-2.10/scala-js-getting-started-extdeps.js"></script> <script type="text/javascript" src="./target/scala-2.10/scala-js-getting-started-intdeps.js"></script> <script type="text/javascript" src="./target/scala-2.10/scala-js-getting-started.js"></script>
ブラウザで開いて、「It works!」と表示されていれば成功です。
オプティマイズする
先ほどは「packageJS」でしたが、今度はオプティマイズして生成されるJavaScriptのサイズを小さくしてみます。
とりあえず、いったんクリア。
> clean [success] Total time: 1 s, completed 2014/02/21 23:04:13
実行するコマンドは、
> optimizeJS
です。
では、実行。
> optimizeJS [info] Updating {file:/xxxxx/scala-js-getting-started/}scala-js-getting-started... [info] Resolving org.fusesource.jansi#jansi;1.4 ... [info] Done updating. [info] Extracting /xxxxx/.ivy2/cache/org.scala-lang.modules.scalajs/scalajs-library_2.10/jars/scalajs-library_2.10-0.3.jar ... [info] Compiling 1 Scala source to /xxxxx/scala-js-getting-started/target/scala-2.10/classes... [info] Packaging /xxxxx/scala-js-getting-started/target/scala-2.10/scala-js-getting-started-extdeps.js ... [info] Packaging /xxxxx/scala-js-getting-started/target/scala-2.10/scala-js-getting-started.js ... [info] Optimizing /xxxxx/scala-js-getting-started/target/scala-2.10/scala-js-getting-started-opt.js ... [success] Total time: 191 s, completed 2014/02/21 23:08:25
うちの環境で、3分ちょいですか…まあ、Core 2 Duoという貧弱環境ですので。サイズは、確かにだいぶ小さくなりますね。
生成されるファイルは、このようになります。
$ ll -h target/scala-2.10/ 合計 38M drwxrwxr-x 3 xxxxx xxxxx 4.0K 2月 21 23:08 ./ drwxrwxr-x 5 xxxxx xxxxx 4.0K 2月 21 23:05 ../ drwxrwxr-x 3 xxxxx xxxxx 4.0K 2月 21 23:05 classes/ -rw-rw-r-- 1 xxxxx xxxxx 22M 2月 21 23:05 scala-js-getting-started-extdeps.js -rw-rw-r-- 1 xxxxx xxxxx 16M 2月 21 23:05 scala-js-getting-started-extdeps.js.map -rw-rw-r-- 1 xxxxx xxxxx 0 2月 21 23:05 scala-js-getting-started-intdeps.js -rw-rw-r-- 1 xxxxx xxxxx 227K 2月 21 23:08 scala-js-getting-started-opt.js -rw-rw-r-- 1 xxxxx xxxxx 3.6K 2月 21 23:05 scala-js-getting-started.js -rw-rw-r-- 1 xxxxx xxxxx 1.2K 2月 21 23:05 scala-js-getting-started.js.map
この場合、使用するファイルは「scala-js-getting-started-opt.js」だけになります。
こちらも、同じようにJavaScriptを読み込むHTMLをこんな感じで用意します。
index.html
<!DOCTYPE html> <html> <head> <title>Example Scala.js application</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> <h1>Example Scala.js application - optimized version</h1> <p>After having compiled and optimized properly the code for the application (using `sbt optimizeJS`), you should see "It works" herebelow. See README.md for detailed explanations.</p> <div id="playground"> </div> <script type="text/javascript" src="./target/scala-2.10/scala-js-getting-started-opt.js"></script> </body> </html>
こちらも、同じようにブラウザで開いて「It works!」と表示されればOKです。
面白い試みなのですが、実際に使うには乗り越える必要があるものが多そうですね…。とりあえず、動かしてみましたよということで。
オマケ：オプティマイズして生成するJavaScriptを、PrettyPrintしてみよう
optimizeJSで生成されるJavaScriptですが、以下をbuild.sbtに加えておくと、最適化後のJavaScriptが整形されて出力されます。
ScalaJSKeys.optimizeJSPrettyPrint := true
以下の設定よりも後ろに入れるんでしょう。
scalaJSSettings
まあ、中身を見たいと思うかどうかはさておきですが。
