ネタじゃない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から呼び出す

@JSExportobject 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 -ltotal 3184drwxr-xr-x 3 takezoe staff 102 May 29 21:37 imagesdrwxr-xr-x 3 takezoe staff 102 May 29 21:37 javascriptsdrwxr-xr-x 4 takezoe staff 136 May 30 02:43 libdrwxr-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.jsdrwxr-xr-x 3 takezoe staff 102 May 30 02:23 shareddrwxr-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/