Scala製インタプリタをブラウザで動かす3分クッキング

Slide 1

Slide 1 text

Scala 製インタプリタをブラウザで動かす 3 分クッキング id:tanishiking24 Scala 関西 Summit2017 1

Slide 2

Slide 2 text

こんにちは • • twitter @tanishiking • id:tanishiking24 • Web アプリケーションエンジニア@はてな • 主に Scala、たまに TypeScript/Perl 2

Slide 3

Slide 3 text

今日作るもの • https://github.com/tanishiking/MLScala 3

Slide 4

Slide 4 text

手順 • インタプリタを作る • Scala.js でビルドする • UI を書く • 完成！ 4

Slide 5

Slide 5 text

インタプリタを作るこのあたりを参考に頑張る • https://github.com/ksuenaga/IoPLMaterials • http://esumii.github.io/min-caml/ パーサコンビネータに fastparse 使った 5

Slide 6

Slide 6 text

インタプリタを作るこちらにあらかじめ作ったものが 6

Slide 7

Slide 7 text

Scala.js でビルドする公式ドキュメントを参考に build.sbt をいじる • crossProject で shared,js,jvm 用にプロジェクト分ける • コアロジックは shared 以下につっこむ、雑に全部ごっちゃにすると sbt test が動かなくなったり • https://github.com/scala-js/scala-js/issues/739 7

Slide 8

Slide 8 text

Scala.js でビルドする • export するモジュールやメソッドを annotation で指定 • プログラムの文字列を入力として print メソッドに渡した値の文字列を返す簡素な API import scalajs.js.annotation._ @JSExportTopLevel(”ML”) object Interpreter { @JSExport def interpret(input: String): String = { // ... 8

Slide 9

Slide 9 text

UI を作る • ビルド成果物の JS を雑に読み込んで、さっき export したメソッドを実行したらなんか動く • 標準出力は console に出てくる ... const result = ML.interpret('let x = 1 in print x;;'); 評価結果を適当な div につっこんで表示する感じで 9

Slide 10

Slide 10 text

完成！！ http://tanishiking.github.io/MLScala/ 10

Slide 11

Slide 11 text

まとめ • 普通に動いてすごい • 面白 AltJS くらいの印象だったけど Scala 製モジュールのデモに良さそう • ブラウザで動かしたいけど JS で書きたくないモジュールあるよね 11