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

Slinky で Scala.js 製 React Webアプリケーションを つくったはなし ...

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. Takumi Kadowaki 自称 : Full "stuck" Scala Engineer Scala でなんでもやりたいひと

    おしごと : データ基盤の SRE • GitHub: NomadBlacky • Twitter: @nomadblacky Ammonite で Scala スクリプトに入門する本出しました→ だれ?
  2. モチベーション 今日話すこと : Scala.js でフロントエンド開発に入門してアプリをひとつ作ったその経緯を紹介 • フロントエンドアプリケーションをちゃんと作ったことがない ◦ React ?

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

    にトランスパイル • Scala の強力な言語機能・ライブラリを JS の世界に持っていくことができる
  4. Scala.js における React.js ライブラリ shadaj / slinky Giter8 テンプレートが提供されており、取っ掛 かりやすかったのでこちらを採用

    shadaj/create-react-scala-app.g8 Webpackに対応 `sbt dev` で開発サーバを 起動 必要なファイルが 揃っているので すぐに開発を 始められる
  5. Slinky で React プログラミング Props, State は case class で表現

    initialState で初期の State を表現 @react アノテーションでコンポーネントを定義 (マクロ) setState で State を更新
  6. ScalablyTyped で Material UI のコードを生成 npmDependencies に @material-core などを追加 sbt

    の起動時に npm からライブラリを取得 および Scala への変換を行う
  7. Material UI を使うことができた! ScalablyTyped / SlinkyDemos には Material UI を含む、

    Slinky で様々なライブラリを利用す るサンプルが用意されている https://scalablytyped.github.io/SlinkyDemos/material-ui/
  8. まとめ • 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 から始めるのがオススメ
  9. 関連資料 • 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