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アプリケーションを つくったはなし / How to build a Scala.js React web application in Slinky
Search
KADOWAKI Takumi
August 30, 2020
Programming
1
4.8k
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 の Scala プロジェクトにおける オブザーバビリティの取り組み / Observability Initiatives in Reckoner's Scala Project
nomadblacky
0
910
AWS CDK on Scala ~ Scalaでインフラ管理してみたはなし / Manage infrastructure with AWS CDK on Scala
nomadblacky
0
4.4k
面倒なことはScalaスクリプトにやらせよう / let scala scripts do the troublesome things
nomadblacky
0
820
Other Decks in Programming
See All in Programming
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
720
Netty Chicago Java User Group 2024-04-17
sullis
0
170
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4k
Milestoner
bkuhlmann
1
410
"config" ってなんだ? / What is "config"?
okashoi
0
240
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
820
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
330
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
210
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
雑に思考を整理する技術と効能
konifar
58
29k
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
Featured
See All Featured
Fireside Chat
paigeccino
21
2.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Embracing the Ebb and Flow
colly
80
4.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Become a Pro
speakerdeck
PRO
11
4.5k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Code Reviewing Like a Champion
maltzj
514
39k
Building an army of robots
kneath
300
41k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Gamification - CAS2011
davidbonilla
76
4.6k
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