Scala.js 向けの React フレームワークである Slinky でWebアプリケーションを作成したはなし
Slinky でScala.js 製React Webアプリケーションをつくったはなし2020-10-17 ScalaMatsuri@nomadblacky
View Slide
Takumi Kadowaki自称: Full "stuck" Scala EngineerScalaでなんでもやりたいひとおしごと:データ基盤のSRE●GitHub: NomadBlacky●Twitter: @nomadblackyAmmoniteでScalaスクリプトに入門する本出しました→だれ?
モチベーション今日話すこと:Scala.jsでフロントエンド開発に入門してアプリをひとつ作ったその経緯を紹介● フロントエンドアプリケーションをちゃんと作ったことがない○React ? Vue ?よくわからん…●Scala.jsをちゃんと触ったことがない○ 最近v1も出てきたし、勢いづいてきている印象● 最近ハマっているゲームで何か役立つツールを作りたい○ 界隈に貢献して盛り上げていきたい
Scala.js についてざっくり● いわゆるAltJSの一種●Scala→JavaScriptにトランスパイル●Scalaの強力な言語機能・ライブラリをJSの世界に持っていくことができる
Scala.jsでモダンなWebアプリを書きたい
フロントエンドの著名なフレームワークといえばReact.jshttps://2019.stateofjs.com/front-end-frameworks/
Scala.jsでReact.jsを書きたい
Scala.js における React.js ライブラリjapgolly / scalajs-react shadaj / slinky
Scala.js における React.js ライブラリshadaj / slinkyGiter8テンプレートが提供されており、取っ掛かりやすかったのでこちらを採用shadaj/create-react-scala-app.g8Webpackに対応`sbt dev`で開発サーバを起動必要なファイルが揃っているのですぐに開発を始められる
Slinky でReactの基本を覚えるReact.jsのチュートリアルをやってみたhttps://reactjs.org/tutorial/tutorial.html○✕ゲーム(三目並べ)を作る○×
Slinky で React プログラミングProps, Stateを使ったコンポーネント本家React.jsとよく似ている
Slinky で React プログラミングProps, State は case class で表現initialState で初期の State を表現@react アノテーションでコンポーネントを定義(マクロ)setState で State を更新
JSXに似たインターフェースでDOMをレンダリングSlinky で React プログラミングattribute を設定するDSLユーザー定義のコンポーネントを使う
より型安全に。Slinky で React プログラミングsealed abstract class でマス目の 空白 / ○ / × を表現
Slinky でReactチュートリアルを完遂https://reactjs.org/tutorial/tutorial.html○✕ゲームができたNomadBlacky / scalajs-react-tutorial
UI どうする問題● せっかく動くものができたので見た目にもこだわりたい●Material UIなどのReactコンポーネントを提供するライブラリを使いたい●Scala.jsかつ、Slinkyに対応したライブラリなどあるのだろうか…
Scala.js界に救世主現わる(?)ScalablyTypednpmに公開されているライブラリからScalaとJavaScriptのつなぎ目となる"Facade"を自動生成してくれるsbtプラグインTypeScriptでの型定義に沿ってScalaのコードを生成してくれる!
ScalablyTyped で Material UI のコードを生成npmDependenciesに@material-coreなどを追加sbtの起動時にnpmからライブラリを取得およびScalaへの変換を行う
ScalablyTyped で Material UI のコードを生成こんなかんじのコードが生成されるReactコンポーネントをSlinky向けに変換してくれるオプションもある
Material UI を使うことができた!ScalablyTyped / SlinkyDemosにはMaterial UIを含む、Slinkyで様々なライブラリを利用するサンプルが用意されているhttps://scalablytyped.github.io/SlinkyDemos/material-ui/
最終的につくったものhttps://mmsf-hub.nomadblacky.dev/
まとめ●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から始めるのがオススメ
関連資料●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