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

Scala.js 向けの React フレームワークである Slinky でWebアプリケーションを作成したはなし

Transcript

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

   View Slide

2. Takumi Kadowaki
   自称
   : Full "stuck" Scala Engineer
   Scala
   でなんでもやりたいひと
   おしごと
   :
   データ基盤の
   SRE
   ●
   GitHub: NomadBlacky
   ●
   Twitter: @nomadblacky
   Ammonite
   で
   Scala
   スクリプトに入門する本出しました→
   だれ?
   

   View Slide

3. モチベーション
   今日話すこと
   :
   Scala.js
   でフロントエンド開発に入門してアプリをひとつ作ったその経緯を紹介
   ● フロントエンドアプリケーションをちゃんと作ったことがない
   ○
   React ? Vue ?
   よくわからん
   …
   ●
   Scala.js
   をちゃんと触ったことがない
   ○ 最近
   v1
   も出てきたし、勢いづいてきている印象
   ● 最近ハマっているゲームで何か役立つツールを作りたい
   ○ 界隈に貢献して盛り上げていきたい
   

   View Slide

4. Scala.js についてざっくり
   ● いわゆる
   AltJS
   の一種
   ●
   Scala
   →
   JavaScript
   にトランスパイル
   ●
   Scala
   の強力な言語機能・ライブラリを
   JS
   の世界に持っていくことができる
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Scala.js における React.js ライブラリ
   shadaj / slinky
   Giter8
   テンプレートが提供されており、取っ掛
   かりやすかったのでこちらを採用
   shadaj/create-react-scala-app.g8
   Webpackに対応
   `sbt dev`
   で開発サーバを
   起動
   必要なファイルが
   揃っているので
   すぐに開発を
   始められる
   

   View Slide

10. Slinky でReactの基本を覚える
    React.js
    のチュートリアルをやってみた
    https://reactjs.org/tutorial/tutorial.html
    ○✕ゲーム
    (
    三目並べ
    )
    を作る
    ○
    ×
    

    View Slide

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

    View Slide

12. Slinky で React プログラミング
    Props, State は case class で表現
    initialState で初期の State を表現
    @react アノテーションでコンポーネントを定義
    (マクロ)
    setState で State を更新
    

    View Slide

13. JSX
    に似たインターフェースで
    DOM
    をレンダリング
    Slinky で React プログラミング
    attribute を設定するDSL
    ユーザー定義のコンポーネントを使う
    

    View Slide

14. より型安全に。
    Slinky で React プログラミング
    sealed abstract class で
    マス目の 空白 / ○ / × を表現
    

    View Slide

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

    View Slide

16. UI どうする問題
    ● せっかく動くものができたので見た目にもこだわりたい
    ●
    Material UI
    などの
    React
    コンポーネントを提供するライブラリを使いたい
    ●
    Scala.js
    かつ、
    Slinky
    に対応したライブラリなどあるのだろうか
    …
    

    View Slide

17. Scala.js界に救世主現わる(?)
    ScalablyTyped
    npm
    に公開されているライブラリから
    Scala
    と
    JavaScript
    のつなぎ目となる
    "Facade"
    を自動生成してくれる
    sbt
    プラグイン
    TypeScript
    での型定義に沿って
    Scala
    のコードを生成してくれる
    !
    

    View Slide

18. ScalablyTyped で Material UI のコードを生成
    npmDependencies
    に
    @material-core
    などを追加
    sbt
    の起動時に
    npm
    からライブラリを取得
    および
    Scala
    への変換を行う
    

    View Slide

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

    View Slide

20. Material UI を使うことができた!
    ScalablyTyped / SlinkyDemos
    には
    Material UI
    を含む、
    Slinky
    で様々なライブラリを利用す
    るサンプルが用意されている
    https://scalablytyped.github.io/SlinkyDemos/material-ui/
    

    View Slide

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

    View Slide

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
    から始めるのがオススメ
    

    View Slide

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
    

    View Slide