ネタじゃないScala.js	
@takezoen	
  
BizReach,	
  Inc
Scala.jsとは?	
  
h5p://www.scala-­‐js.org/	
•  AltJSの一種	
  
•  ScalaコードからJavaScriptを生成	
  
•  Scalaのコンパイラプラグインとして実装されて
いる	
  
•  ScalaとJavaScriptの相互運用が可能	
  
やってみよう	
•  Scala.js	
  Fiddle	
  
h5p://www.scala-­‐js-­‐fiddle.com/	
  
•  Play2	
  
$ activator new <project-name> play-scala-scalajs
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プラグインが提供されているので	
  
様々なフレームワークと連携して利用可能	
  
プロジェクト構成	
Playプロジェクト(サーバサイド)	
Scala.jsプロジェクト(クライアントサイド)	
Cross-­‐buildプロジェクト(クライアント・サーバ共通)	
Sbtのマルチプロジェクト形式	
  
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	
  
主要なフレームワークについては連携用の	
  
ライブラリが存在する	
  
Scala.jsをJavaScriptから呼び出す	
@JSExport
object HelloWorld {
@JSExport
def main(): Unit = {
println("Hello world!")
}
}
HelloWorld().main();
JavaScriptから呼び出し
Scala.jsからJavaScriptを呼び出す	
def hello(name: String): Unit = {
js.Dynamic.global.alert(s"Hello ${name}!")
}
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/	
  
Scala.jsのいいところ	
•  JavaScriptの代わりにScalaでコードが書ける	
  
•  生成されたJavaScriptの可読性が高く、動作も
比較的高速である	
  
•  サーバサイドと同じ開発環境が利用でき、
コードも共有できる	
  
•  ブラウザさえあればScalaで書いたコードを動
かすことができる
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
新コンパイラを開発中	
Scala	
  Source	
TASTY	
Classfiles	
Minimized	
  
JavaScript	
NaRve	
  Code	
NaRve	
  Code	
scalac	
JDK	
  JIT	
 JS	
  JIT	
packaging	
  tool	
  /	
  linker	
TASTYという中間ファイルを作成し、	
  
そこからバイトコードやJSを生成する	
どうやら本気っぽい。	
  
出展:h5p://tototoshi.github.io/slides/tenka1altjs-­‐scalajs/	
  

ネタじゃないScala.js