Statistical Programming

Scalaでフロントサイドが書ける!scala-js!!

scala-jsとはjavascriptに嫌気がさした僕のような人のためにscalaでサーバーからクライアントまで書けるようにしてくれる優れもの!!と言いたいところですがまだ開発途中なこともありドキュメントの整備や機能においても完成されたものではありません。それでももしscalaでクライアントサイドが書けるかと思うと心が躍ります^^

こちらがscala-jsのサイト、ドキュメントへのリンクです。

http://www.scala-js.org/doc/

見ていただければわかりますがドキュメント???というレベルです。笑

とりあえず俺をフォークしてみろよ!とのことなのでまあクローンしてみました。

んでターミナルを開きクローンしたフォルダへ行き、sbtコマンドを打ち込みます。

その後 packageJSと入力するとscalaで書かれたコードがjavascriptのコードへ変換されるということらしいです。このサンプルプログラムの例ではindex-dev.htmlの中身が変更されたらうまくいっているとのこと。このHTMLファイルが参照しているexample.jsというファイルの中身がpackageJSの前後で変わってくるということなのかな?というよりもpackgeJSコマンドによってtargetフォルダ自体が作成されてますね。。。これjQueryみたいな使い方できんのかな…

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/example-extdeps.js"></script>
<script type="text/javascript" src="./target/scala-2.10/example-intdeps.js"></script>
<script type="text/javascript" src="./target/scala-2.10/example.js"></script>

</body>
</html>

scala-js-example-app/src/main/scala/example以下にあるscalaJSExample.scalaがjsへと変換される具体的なコードです。

scalaJSExample.scala
package example

import scala.scalajs.js
import js.Dynamic.{ global => g }

object ScalaJSExample {
  def main(): Unit = {
    val paragraph = g.document.createElement("p")
    paragraph.innerHTML = "<ul><li>1</li><li>2</li>"
    g.document.getElementById("playground").appendChild(paragraph)
  }
}

そしてこちらが変換後のコードの一部だと思われます…
たぶん!笑

example.js
/** @constructor */
ScalaJS.c.example_ScalaJSExample$ = (function() {
  ScalaJS.c.java_lang_Object.call(this)
});
ScalaJS.c.example_ScalaJSExample$.prototype = new ScalaJS.inheritable.java_lang_Object();
ScalaJS.c.example_ScalaJSExample$.prototype.constructor = ScalaJS.c.example_ScalaJSExample$;
ScalaJS.c.example_ScalaJSExample$.prototype.main__V = (function() {
  var paragraph = ScalaJS.g["document"]["createElement"]("p");
  paragraph["innerHTML"] = "<ul><li>1</li><li>2</li>";
  ScalaJS.g["document"]["getElementById"]("playground")["appendChild"](paragraph)
});
ScalaJS.c.example_ScalaJSExample$.prototype.main = (function() {
  return this.main__V()
});
/** @constructor */
ScalaJS.inheritable.example_ScalaJSExample$ = (function() {
  /*<skip>*/