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

Transcript

1. Slinky で Scala.js 製 React Webアプリケーションを つくったはなし 2020-10-17 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の基本を覚える React.js のチュートリアルをやってみた https://reactjs.org/tutorial/tutorial.html ◦✕ゲーム ( 三目並べ ) を作る

    ◦ ×

11. Slinky で React プログラミング Props, State を使ったコンポーネント 本家React.jsとよく似ている

12. Slinky で React プログラミング Props, State は case class で表現

    initialState で初期の State を表現 @react アノテーションでコンポーネントを定義 (マクロ) setState で State を更新

13. JSX に似たインターフェースで DOM をレンダリング Slinky で React プログラミング attribute を設定するDSL

    ユーザー定義のコンポーネントを使う

14. より型安全に。 Slinky で React プログラミング sealed abstract class で マス目の

    空白 / ◦ / × を表現

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

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

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

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

    sbt プラグイン TypeScript での型定義に沿って Scala のコードを生成してくれる !

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

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

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

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

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

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

22. まとめ • Slinky は Scala.js 向けの React.js ライブラリ ◦ Scala.js

    でも React.js を使った Web アプリケーションを作れる ! ◦ React.js に似た API なので、基本を押さえていれば開発にはそこまで困らない • ScalablyTyped で TypeScript のライブラリを Scala.js で型安全に使える ! ◦ Material UI などの UI コンポーネントも利用可能 ◦ ( 昔を知らないけど ) Scala.js 周りのエコシステムが整ってきた印象 • まずは shadaj/create-react-scala-app.g8 から始めるのがオススメ

23. 関連資料 • 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