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
XStateでReactに秩序を与えたい
Search
gizm000
September 06, 2024
Programming
0
720
XStateでReactに秩序を与えたい
gizm000
September 06, 2024
Tweet
Share
More Decks by gizm000
See All by gizm000
営業製作所_採用ピッチ資料_202407
gizm000
1
500
React_TypeScript_LT.pdf
gizm000
0
98
もう、例外投げたくないねん neverthrow
gizm000
1
300
サーバーサイドもTSにしたらモノレポになった.pdf
gizm000
2
110
レガシー業界を乗り越える
gizm000
1
24
Other Decks in Programming
See All in Programming
オートマトン学習しろ / Do automata learning
makenowjust
3
120
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
220
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
140
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
A New Era of Testing
mannodermaus
2
230
開発を加速する共有Swift Package実践
elmetal
PRO
0
400
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.5k
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
160
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
130
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
200
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
250
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
How to Think Like a Performance Engineer
csswizardry
16
950
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
For a Future-Friendly Web
brad_frost
174
9.3k
Design by the Numbers
sachag
277
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Transcript
Reactに秩序が欲しい – XState – 営業製作所 白石 卓馬
会社紹介:営業製作所 ・設立 2020年4月 ・本社 大阪 (肥後橋駅 徒歩3分) ・従業員数 約150名 (2024年4月時点)
・目的 日本の製造業を支える ・特徴 泥臭い中にこそ本質がある
自己紹介 ・なまえ 白石 卓馬 (gizm000) ・出身地 大阪 ・職種 ソフトウェアエンジニア ・経歴
SIer → 受託 → SaaS
営業製作所のざっくり技術スタック ・フロントエンド:Next.js ・サーバーサイド:NestJS ・IaC:Terraform (CDKじゃないヨ) 業務で使う 80 98%以上がTypeScript
Reactが 好き / 嫌い
Reactが 好き / 嫌い
なぜReactは 嫌われるのか? ※ 私は嫌いじゃないです
自由度が高すぎる のが一因か?
従来のMVCは ルールがある
Model, View, Controller 最低限のレイヤーが 決まっている
Reactにももっと ルール=秩序が欲しい
フロントエンド開発を 分解していくと 秩序を見出せる?
フロントエンド開発でやること
フロントエンド開発でやること ・サーバーからデータを取得
フロントエンド開発でやること ・サーバーからデータを取得 fetchするだけ! codegenもあるし、 秩序は守れる
フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示
フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 デザインぐらい。 Storybookとか 使えばよい。
フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 ・インタラクティブな操作
フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 ・インタラクティブな操作 ・・・
フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 ・インタラクティブな操作 ケースバイケースでイ イカンジに...
フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 ・インタラクティブな操作 ケースバイケースでイ イカンジに...
インタラクティブな 操作に秩序を与える
XState by Stately.ai https://stately.ai/docs/quick-start
XState is なに? ・ステートマシン(ステートチャート)を使って、ロジックを管理 ・ステートマシンはイベントを通じて状態遷移 ・アクター同士でメッセージを送信 ・いろいろなことができるようです
Stately Studio 試してみる
どういう使い方をするのか? ・状態を管理するところではどこでも使える ・フロントエンドに限った技術でもない ・非同期処理でも対応している ・アクター同士は相互にメッセージを送信しあうこともできる ・ステートマシンがクラスでアクターがインスタンスのようなイメージ
Examples こちらにたくさんあります
そもそもViewに 秩序のある時代は あったのだろうか?
私のチームにはまだ 秩序がありません...
他所のチームで どのように秩序を 保っているのか?
精進あるのみ🔥
ご清聴ありがとうご ざいました
さいごに ・絶賛採用活動中です❗ → X, LinkedIn, Green, LAPRAS, … 情報交換程度でも良いので、 よかったらご連絡を😆