Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ネタじゃないScala.js	
@takezoen	
  
BizReach,	
  Inc
Scala.jsとは?	
  
h5p://www.scala-­‐js.org/	
•  AltJSの一種	
  
•  ScalaコードからJavaScriptを生成	
  
•  Scalaのコンパイラプラグインとして実装されて
いる	
...
やってみよう	
•  Scala.js	
  Fiddle	
  
h5p://www.scala-­‐js-­‐fiddle.com/	
  
•  Play2	
  
$ activator new <project-name> play-s...
Scalaとの連携	
•  Play	
  Framework	
  
–  h5p://qiita.com/suin/items/cb7e03af25e55c9f8765	
  
•  Skinny	
  Framework	
  
–  h...
プロジェクト構成	
Playプロジェクト(サーバサイド)	
Scala.jsプロジェクト(クライアントサイド)	
Cross-­‐buildプロジェクト(クライアント・サーバ共通)	
Sbtのマルチプロジェクト形式	
  
JavaScriptとの連携	
•  jQuery	
  
–  h5ps://github.com/scala-­‐js/scala-­‐js-­‐jquery	
  
•  AngularJS	
  
–  h5ps://github.co...
Scala.jsをJavaScriptから呼び出す	
@JSExport
object HelloWorld {
@JSExport
def main(): Unit = {
println("Hello world!")
}
}
HelloW...
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...
Scala.jsのいいところ	
•  JavaScriptの代わりにScalaでコードが書ける	
  
•  生成されたJavaScriptの可読性が高く、動作も
比較的高速である	
  
•  サーバサイドと同じ開発環境が利用でき、
コードも...
Scala.jsの微妙なところ	
•  コンパイルが遅い(お約束)	
  
•  生成されるJavaScriptのファイルサイズがまあ
まあ大きい	
  
$ ls -l
total 3184
drwxr-xr-x 3 takezoe staf...
新コンパイラを開発中	
Scala	
  Source	
TASTY	
Classfiles	
Minimized	
  
JavaScript	
NaRve	
  Code	
NaRve	
  Code	
scalac	
JDK	
  JIT	...
出展:h5p://tototoshi.github.io/slides/tenka1altjs-­‐scalajs/	
  
Upcoming SlideShare
Loading in …5
×

ネタじゃないScala.js

4,321 views

Published on

Published in: Software
  • Be the first to comment

ネタじゃないScala.js

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

×