Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

KADOWAKI Takumi

August 30, 2020
Tweet

More Decks by KADOWAKI Takumi

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Takumi Kadowaki
    自称
    : Full "stuck" Scala Engineer
    Scala
    でなんでもやりたいひと
    おしごと
    :
    データ基盤の
    SRE

    GitHub: NomadBlacky

    Twitter: @nomadblacky
    Ammonite

    Scala
    スクリプトに入門する本出しました→
    だれ?

    View full-size slide

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

    React ? Vue ?
    よくわからん


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

    View full-size slide

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

    Scala

    JavaScript
    にトランスパイル

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ×

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. UI どうする問題
    ● せっかく動くものができたので見た目にもこだわりたい

    Material UI
    などの
    React
    コンポーネントを提供するライブラリを使いたい

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

    View full-size slide

  17. Scala.js界に救世主現わる(?)
    ScalablyTyped
    npm
    に公開されているライブラリから
    Scala

    JavaScript
    のつなぎ目となる
    "Facade"
    を自動生成してくれる
    sbt
    プラグイン
    TypeScript
    での型定義に沿って
    Scala
    のコードを生成してくれる
    !

    View full-size slide

  18. ScalablyTyped で Material UI のコードを生成
    npmDependencies

    @material-core
    などを追加
    sbt
    の起動時に
    npm
    からライブラリを取得
    および
    Scala
    への変換を行う

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide