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
5k
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
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
0
63
Reckoner の Scala プロジェクトにおける オブザーバビリティの取り組み / Observability Initiatives in Reckoner's Scala Project
nomadblacky
0
1.2k
AWS CDK on Scala ~ Scalaでインフラ管理してみたはなし / Manage infrastructure with AWS CDK on Scala
nomadblacky
0
4.5k
面倒なことはScalaスクリプトにやらせよう / let scala scripts do the troublesome things
nomadblacky
0
910
Other Decks in Programming
See All in Programming
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
940
LangChainの現在とv0.3にむけて
os1ma
3
650
BasicBasic認証
sadnessojisan
5
2.5k
全力の跳躍を捉える計測アプリを作る
ogijun2018
0
1k
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
840
Swiftで高速フーリエ変換してオーディオビジュアライザーを作る / iOSDC Japan 2024 Day1 Track D
kyome22
2
460
実践 Advanced CallKit 〜快適な通話の実現に向けて〜
mot_techtalk
3
110
Uncharted packages (Laravel Live Denmark)
freekmurze
0
140
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.2k
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
570
めざせ!WKWebViewマスター! / WKWebView Master
marcy731
3
480
Scala におけるコンパイラエラーとの付き合い方
chencmd
1
150
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
359
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
27
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
[RailsConf 2023] Rails as a piece of cake
palkan
44
4.6k
Ruby is Unlike a Banana
tanoku
96
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
28
2.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Producing Creativity
orderedlist
PRO
340
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
The Invisible Side of Design
smashingmag
295
50k
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