Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Slinky で Scala.js 製 React Webアプリケーションを つくったはなし ...
Search
KADOWAKI Takumi
August 30, 2020
Programming
1
5.2k
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
Share
More Decks by KADOWAKI Takumi
See All by KADOWAKI Takumi
Reckoner における Datadog Browser Test の活用事例 / Datadog Browser Test at Reckoner
nomadblacky
0
440
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
990
Reckoner の Scala プロジェクトにおける オブザーバビリティの取り組み / Observability Initiatives in Reckoner's Scala Project
nomadblacky
0
2.1k
AWS CDK on Scala ~ Scalaでインフラ管理してみたはなし / Manage infrastructure with AWS CDK on Scala
nomadblacky
0
4.7k
面倒なことはScalaスクリプトにやらせよう / let scala scripts do the troublesome things
nomadblacky
0
1.1k
Other Decks in Programming
See All in Programming
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
670
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
310
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
150
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
220
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
GraphRAGの仕組みまるわかり
tosuri13
8
500
C++20 射影変換
faithandbrave
0
550
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
GoのGenericsによるslice操作との付き合い方
syumai
3
690
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
210
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
It's Worth the Effort
3n
185
28k
Become a Pro
speakerdeck
PRO
28
5.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building Applications with DynamoDB
mza
95
6.5k
Docker and Python
trallard
44
3.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Designing for Performance
lara
609
69k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Unsuck your backbone
ammeep
671
58k
KATA
mclloyd
30
14k
Transcript
Slinky で Scala.js 製 React Webアプリケーションを つくったはなし 2020-10-17 ScalaMatsuri @nomadblacky
Takumi Kadowaki 自称 : Full "stuck" Scala Engineer Scala でなんでもやりたいひと
おしごと : データ基盤の SRE • GitHub: NomadBlacky • Twitter: @nomadblacky Ammonite で Scala スクリプトに入門する本出しました→ だれ?
モチベーション 今日話すこと : Scala.js でフロントエンド開発に入門してアプリをひとつ作ったその経緯を紹介 • フロントエンドアプリケーションをちゃんと作ったことがない ◦ React ?
Vue ? よくわからん … • Scala.js をちゃんと触ったことがない ◦ 最近 v1 も出てきたし、勢いづいてきている印象 • 最近ハマっているゲームで何か役立つツールを作りたい ◦ 界隈に貢献して盛り上げていきたい
Scala.js についてざっくり • いわゆる AltJS の一種 • Scala → JavaScript
にトランスパイル • Scala の強力な言語機能・ライブラリを JS の世界に持っていくことができる
Scala.jsで モダンなWebアプリを書きたい
フロントエンドの 著名なフレームワークといえば React.js https://2019.stateofjs.com/front-end-frameworks/
Scala.jsでReact.jsを書きたい
Scala.js における React.js ライブラリ japgolly / scalajs-react shadaj / slinky
Scala.js における React.js ライブラリ shadaj / slinky Giter8 テンプレートが提供されており、取っ掛 かりやすかったのでこちらを採用
shadaj/create-react-scala-app.g8 Webpackに対応 `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界に救世主現わる(?) ScalablyTyped npm に公開されているライブラリから 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