1. ネタじゃないScala.js
@takezoen
BizReach,
Inc

2. Scala.jsとは？
h5p://www.scala-­‐js.org/
• AltJSの一種
• ScalaコードからJavaScriptを生成
• Scalaのコンパイラプラグインとして実装されて
いる
• ScalaとJavaScriptの相互運用が可能

3. やってみよう
• Scala.js
Fiddle
h5p://www.scala-­‐js-­‐fiddle.com/
• Play2
$ activator new <project-name> play-scala-scalajs

4. Scalaとの連携
• Play
Framework
– h5p://qiita.com/suin/items/cb7e03af25e55c9f8765
• Skinny
Framework
– h5p://skinny-­‐framework.org/documentaRon/assets.html
• Scalatra
– h5ps://codebreak.com/blog/takezoe/page/
6b03555f639f90af7/
sbtプラグインが提供されているので
様々なフレームワークと連携して利用可能

5. プロジェクト構成
Playプロジェクト（サーバサイド）
Scala.jsプロジェクト（クライアントサイド）
Cross-­‐buildプロジェクト（クライアント・サーバ共通）
Sbtのマルチプロジェクト形式

6. JavaScriptとの連携
• jQuery
– h5ps://github.com/scala-­‐js/scala-­‐js-­‐jquery
• AngularJS
– h5ps://github.com/greencatsoU/scalajs-­‐angular
– h5ps://github.com/jokade/scalajs-­‐angulate
• React.js
– h5ps://github.com/japgolly/scalajs-­‐react
主要なフレームワークについては連携用の
ライブラリが存在する

7. Scala.jsをJavaScriptから呼び出す
@JSExport
object HelloWorld {
@JSExport
def main(): Unit = {
println("Hello world!")
}
}
HelloWorld().main();
JavaScriptから呼び出し

8. Scala.jsからJavaScriptを呼び出す
def hello(name: String): Unit = {
js.Dynamic.global.alert(s"Hello ${name}!")
}

9. Scala.jsからJavaScriptを呼び出す
// Scalaからアクセスするためのインターフェースを定義
object DOMGlobalScope extends js.GlobalScope {
def alert(message: String): Unit = js.native
}
// 定義したインターフェースを使ってJSを呼び出す
def hello(name: String): Unit = {
DOMGlobalScope.alert(s"Hello ${name}!")
}
JSのDOMインターフェースを提供するライブラリが用意されている
h5p://scala-­‐js.github.io/scala-­‐js-­‐dom/

10. Scala.jsのいいところ
• JavaScriptの代わりにScalaでコードが書ける
• 生成されたJavaScriptの可読性が高く、動作も
比較的高速である
• サーバサイドと同じ開発環境が利用でき、
コードも共有できる
• ブラウザさえあればScalaで書いたコードを動
かすことができる

11. Scala.jsの微妙なところ
• コンパイルが遅い（お約束）
• 生成されるJavaScriptのファイルサイズがまあ
まあ大きい
$ ls -l
total 3184
drwxr-xr-x 3 takezoe staff 102 May 29 21:37 images
drwxr-xr-x 3 takezoe staff 102 May 29 21:37 javascripts
drwxr-xr-x 4 takezoe staff 136 May 30 02:43 lib
drwxr-xr-x 3 takezoe staff 102 May 29 21:37 scalajs
-rw-r--r-- 1 takezoe staff 864041 May 30 02:32 scalajsclient-fastopt.js
-rw-r--r-- 1 takezoe staff 758316 May 30 02:32 scalajsclient-fastopt.js.map
-rw-r--r-- 1 takezoe staff 120 May 30 03:38 scalajsclient-launcher.js
drwxr-xr-x 3 takezoe staff 102 May 30 02:23 shared
drwxr-xr-x 3 takezoe staff 102 May 29 21:37 stylesheets

12. 新コンパイラを開発中
Scala
Source
TASTY
Classfiles
Minimized
JavaScript
NaRve
Code
NaRve
Code
scalac
JDK
JIT
JS
JIT
packaging
tool
/
linker
TASTYという中間ファイルを作成し、
そこからバイトコードやJSを生成する
どうやら本気っぽい。

13. 出展：h5p://tototoshi.github.io/slides/tenka1altjs-­‐scalajs/