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
1.1k
XStateでReactに秩序を与えたい
gizm000
September 06, 2024
Tweet
Share
More Decks by gizm000
See All by gizm000
NestJSを実運用してみて.pdf
gizm000
1
130
営業製作所_採用ピッチ資料_202407
gizm000
3
3.2k
React_TypeScript_LT.pdf
gizm000
0
160
もう、例外投げたくないねん neverthrow
gizm000
1
420
サーバーサイドもTSにしたらモノレポになった.pdf
gizm000
2
170
レガシー業界を乗り越える
gizm000
1
45
Other Decks in Programming
See All in Programming
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
990
AI時代に学習する意味はあるのか?
tomoyakamaji
0
110
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
200
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
360
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
230
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
290
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
1
300
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
160
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
Improving my own Ruby thereafter
sisshiki1969
1
140
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Embracing the Ebb and Flow
colly
87
4.8k
Documentation Writing (for coders)
carmenintech
73
5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Docker and Python
trallard
45
3.5k
Site-Speed That Sticks
csswizardry
10
800
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, … 情報交換程度でも良いので、 よかったらご連絡を😆