Slinky で Scala.js 製 React Webアプリケーションを つくったはなし / How to build a Scala.js React web application in Slinky

Transcript

1. Slinky で Scala.js 製 React Webアプリケーションを つくったはなし 2020-08-30 プレ ScalaMatsuri

   @nomadblacky

2. Takumi Kadowaki 自称 : Full "stuck" Scala Engineer Scala でなんでもやりたいひと

   おしごと : データ基盤の SRE • GitHub: NomadBlacky • Twitter: @nomadblacky Ammonite で Scala スクリプトに入門する本出しました→ だれ?

3. モチベーション 今日話すこと : Scala.js でフロントエンド開発に入門してアプリをひとつ作ったその経緯を紹介 • フロントエンドアプリケーションをちゃんと作ったことがない ◦ React ?

   Vue ? よくわからん … • Scala.js をちゃんと触ったことがない ◦ 最近 v1 も出てきたし、勢いづいてきている印象 • 最近ハマっているゲームで何か役立つツールを作りたい ◦ 界隈に貢献して盛り上げていきたい

4. Scala.js についてざっくり • いわゆる AltJS の一種 • Scala → JavaScript

   にトランスパイル • Scala の強力な言語機能・ライブラリを JS の世界に持っていくことができる

5. Scala.jsで モダンなWebアプリを書きたい

6. フロントエンドの 著名なフレームワークといえば React.js https://2019.stateofjs.com/front-end-frameworks/

7. Scala.jsでReact.jsを書きたい

8. Scala.js における React.js ライブラリ japgolly / scalajs-react shadaj / slinky

9. Scala.js における React.js ライブラリ shadaj / slinky Giter8 テンプレートが提供されており、取っ掛 かりやすかったのでこちらを採用

   shadaj/create-react-scala-app.g8 Webpackに対応 `sbt dev` で開発サーバを 起動 必要なファイルが 揃っているので すぐに開発を 始められる

10. Slinky で React プログラミング Props, State を使ったコンポーネント

11. JSX に似たインターフェースで DOM をレンダリング Slinky で React プログラミング

12. より型安全に。 Slinky で React プログラミング

13. Slinky でReactチュートリアルを完遂 https://reactjs.org/tutorial/tutorial.html ◦✕ゲームをつくった NomadBlacky / scalajs-react-tutorial

14. UI どうする問題 • せっかく動くものができたので見た目にもこだわりたい • Material UI などの React コンポーネントを提供するライブラリを使いたい

    • Scala.js かつ、 Slinky に対応したライブラリなどあるのだろうか …

15. Scala.js界に救世主現わる(?) ScalablyTyped npm に公開されているライブラリから Scala と JavaScript のつなぎ目となる "Facade" を自動生成してくれる

    sbt プラグイン TypeScript での型定義に従った コード生成にも対応 !

16. ScalablyTyped で Material UI のコードを生成 npmDependencies に @material-core などを追加 sbt

    の起動時に npm からライブラリを取得 および Scala への変換を行う

17. ScalablyTyped で Material UI のコードを生成 こんなかんじのコードが生成される React コンポーネントを Slinky 向けに変換してくれるオプションもある

18. Material UI を使うことができた! ScalablyTyped / SlinkyDemos には Material UI を含む、

    Slinky で様々なライブラリを利用す るサンプルが用意されている https://scalablytyped.github.io/SlinkyDemos/material-ui/

19. 最終的につくったもの https://mmsf-hub.nomadblacky.dev/

20. まとめ • Scala でもモダンな Web アプリケーションは作れる ! ◦ とはいえ React

    その他 JavaScript の知識はある程度必要 ◦ ( 昔を知らないけど ) Scala.js 周りのエコシステムが整ってきた印象 • Slinky は Scala.js 向けの React.js ライブラリ • ScalablyTyped で TypeScript のライブラリを Scala.js で型安全に使える ! ◦ Material UI などの UI コンポーネントも利用可能 • まずは shadaj/create-react-scala-app.g8 から始めるのがオススメ

21. 関連資料 • Slinky ホームページ ◦ https://slinky.dev/ • React.js チュートリアル ◦

    https://reactjs.org/tutorial/tutorial.html • Material UI ホームページ ◦ https://material-ui.com/ • ScalablyTyped ホームページ ◦ https://scalablytyped.org/ • Slinky + ScalablyTyped のサンプル集 ◦ https://github.com/ScalablyTyped/SlinkyDemos • 今回作成したアプリケーションのソースコード ◦ https://github.com/NomadBlacky/mmsf-hub