市ヶ谷Geek★Nightで「Scalaによるタイプセーフなフロントエンド開発」という発表をしました

Scala

普段フロントエンド開発は若者に丸投げしているバックエンドおじさんですが、ここのところScala Warriorを開発するためにScala.jsを触っていたということもあり、お声がけいただいてScala.jsの紹介をさせていただきました。

ichigayageek.connpass.com

発表資料はこちらです。

www.slideshare.net

結論としてはありがちですが、フロントエンドまで全てをScala.jsで書くのではなく、APIサーバへのアクセスや複数APIのアグリゲーション、フロント用に加工する処理などをラップしたライブラリをサーバサイドのエンジニアが提供するために利用し、フロントからはそれを呼ぶだけにするという使い方がよいのではないかと思います。

ところで会場からの質問でScala.jsでコンパイルしたJavaScriptをインポート/エクスポートできるのか？といご質問があり、その場では「できない」と回答してしまったのですが、実は今年の10月にリリースされたばかりのScala.js 0.6.13からCommonJS形式でのインポート/エクスポートがサポートされていました。

www.scala-js.org

build.sbtに以下の設定を行っておくと@JSExportアノテーションでエクスポートしたクラスやオブジェクトが利用可能なCommonJSモジュールにパッケージングすることができます。

scalaJSModuleKind := ModuleKind.CommonJSModule

たとえばこんなクラスをScala.jsでコンパイルします。

import scala.scalajs.js
import js.annotation._

@ScalaJSDefined
@JSExport("HelloWorld")
class HelloWorld extends js.Object {
  def sayHello(name: String): String = s"Hello ${name}!"
}

するとJavaScriptからは以下のようにして使用することができます。

var test = require("./test-fastopt.js")

var helloWorld = new test.HelloWorld();
console.log(helloWorld.sayHello("Scala.js"));

逆に@JSImportアノテーションを使うとScala.jsでCommonJSモジュールを使うことができます。

import scala.scalajs.js
import js.annotation._

@js.native
@JSImport("./test-fastopt.js", "HelloWorld")
class HelloWorld extends js.Object {
  def sayHello(name: String): String = js.native
}

Scala.jsでコンパイルしたJavaScriptをCommonJSモジュールとしてエクスポートすることができるようになったことでScala.jsを既存のJavaScriptのエコシステムに組み込むことが可能になり、サーバサイドエンジニアが提供するライブラリをフロントから使用するという分担もスムーズに連携できるようになりますね。Scala.jsの活用の幅はより広がってきていると言えそうです！

Scala.js is awesome!!