この記事について

フロントエンドの処理を Scala のシンタックスで記述できる Scala.js を試してみたのでまとめてみました。
Scala.js公式サイトの Basic tutorial の環境を整えるところまでやったことのメモです。

参考サイト

Scala.js公式サイト

あらかじめやっておくこと

JDK / sbt のインストールは行っておきます。

大雑把な流れ

下記のような流れで進めていきます。

プロジェクトのディレクトリを準備
Scala.js のプラグインを導入
build.sbt を用意する
実際に動かしてみる

プロジェクトのディレクトリを準備

プロジェクトのディレクトリを作成し、そのディレクトリで sbt を起動します。
sbt 起動コマンド : sbt

sbt を起動すると project/build.properties (sbt のバージョン記述ファイルなど) など基本的なフォルダやファイルが作られるので、楽をするためこれで済ませてしまいます

sbt プラグインを導入

Scala.js の sbt プラグインがあるのでそれを使用します。
(※sbt プラグイン = これを使用すると、sbtのプロジェクトに新しいセッティングやタスクを追加できます)

sbt プラグインを導入したい場合は、project フォルダに plugins.sbtを追加して、addSbtPlugin("プラグイン") を記述することで導入できます。

project/plugins.sbt

addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.3.1")

これで ScalaJsのPlugin が導入が完了します。
あとは、build.sbt でプラグインを有効にすることで利用できるようになります。

build.sbt を用意する

アプリケーションの設定 / 導入したプラグインを有効にするために、
下記のような build.sbt を用意します。

build.sbt


// アプリケーションの設定
name := "ScalaJsExample"
scalaVersion := "2.13.1"

// Scala.js Plugin を有効にする
enablePlugins(ScalaJSPlugin)
// fastOptJs で生成する js ファイルのメイン処理が Scala の main method に対応したものになる
scalaJSUseMainModuleInitializer := true

プラグインのおかげで簡潔にかけて嬉しいですね。
アプリケーションの設定は任意に変更してください。

実際に動かしてみる

ここまでで開発環境の下地はできたので、
簡単に.scalaのソースコードから、.jsファイルを作成して静的ファイルで読み込むところまでやってみます。

js ファイルの元になる Scala ソースコードを準備

適当に元となるソースを用意します。
今回は、src/main/scala/example/ScalaJsExample.scala でやってみました。

src/main/scala/example/ScalaJsExample.scala


package example

object ScalaJsExample{
    // build.sbt に scalaJSUseMainModuleInitializer := true があるので、js ではここの処理がメインの処理として起動します
    def main(args: Array[String]): Unit = {
        println("Hello world!")
    }
}

このファイルから js ファイルを作ってみます

js ファイルを生成する

fastOptJS コマンドを実行すると、.scalaのファイルを元に、.jsファイルが生成されます。

生成された .js ファイルは、target/${Scalaのバージョン}/${アプリケーション名}-fastopt.js として生成されます。

今回は、
Scalaのバージョンが、scala-2.13
アプリケーション名が、scalajsexample
なので、target/scala-2.13/scalajsexample-fastopt.js が生成されました。

作った js ファイルを読み込む

あとはhtmlから読み込んで実際に試してみます。
プロジェクトのルートに下記のhtmlを追加してブラウザで開いてみます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>The Scala.js Tutorial</title>
  </head>
  <body>
    <!-- Include Scala.js compiled code -->
    <script type="text/javascript" src="./target/scala-2.13/scalajsexample-fastopt.js"></script>
  </body>
</html>

ブラウザの開発者メニューからコンソールを確認すると、
無事 ScalaJsExample.scalaのメイン処理が走り、Hello world! が表示されました！

まとめ

ということで Scala.js の開発環境構築までやりました。
フロントエンドの処理も Scala で書けるので、Scala のシンタックスの恩恵を受けたり、Scala を書ける機会を増やせそうで面白いです。

公式ページの Tutorials には、SPAやらもできそうなので、もうちょっと掘り下げてみたいです。
(「Hands-on Scala.js」が色々処理について記載されていた非常に面白そうでした。)