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.1k
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
300
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
810
Reckoner の Scala プロジェクトにおける オブザーバビリティの取り組み / Observability Initiatives in Reckoner's Scala Project
nomadblacky
0
1.8k
AWS CDK on Scala ~ Scalaでインフラ管理してみたはなし / Manage infrastructure with AWS CDK on Scala
nomadblacky
0
4.6k
面倒なことはScalaスクリプトにやらせよう / let scala scripts do the troublesome things
nomadblacky
0
1k
Other Decks in Programming
See All in Programming
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
時計仕掛けのCompose
mkeeda
1
280
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
Domain-Driven Transformation
hschwentner
2
1.9k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Immutable ActiveRecord
megane42
0
130
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
チームリードになって変わったこと
isaka1022
0
190
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Ruby on cygwin 2025-02
fd0
0
140
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Documentation Writing (for coders)
carmenintech
67
4.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Typedesign – Prime Four
hannesfritz
40
2.5k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
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