Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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