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
480
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
1.1k
Reckoner の Scala プロジェクトにおける オブザーバビリティの取り組み / Observability Initiatives in Reckoner's Scala Project
nomadblacky
0
2.3k
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
CSC305 Lecture 04
javiergs
PRO
0
250
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
870
Advance Your Career with Open Source
ivargrimstad
0
330
CSC305 Lecture 01
javiergs
PRO
1
400
私はどうやって技術力を上げたのか
yusukebe
43
17k
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
380
Le côté obscur des IA génératives
pascallemerrer
0
120
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
130
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
180
Featured
See All Featured
Code Review Best Practice
trishagee
72
19k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Designing for Performance
lara
610
69k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Rails Girls Zürich Keynote
gr2m
95
14k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
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