$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
XStateでReactに秩序を与えたい
Search
gizm000
September 06, 2024
Programming
0
1.2k
XStateでReactに秩序を与えたい
gizm000
September 06, 2024
Tweet
Share
More Decks by gizm000
See All by gizm000
NestJSを実運用してみて.pdf
gizm000
1
140
営業製作所_採用ピッチ資料_202407
gizm000
3
4k
React_TypeScript_LT.pdf
gizm000
0
170
もう、例外投げたくないねん neverthrow
gizm000
1
430
サーバーサイドもTSにしたらモノレポになった.pdf
gizm000
2
170
レガシー業界を乗り越える
gizm000
1
49
Other Decks in Programming
See All in Programming
Why Kotlin? 電子カルテを Kotlin で開発する理由 / Why Kotlin? at Henry
agatan
2
6.2k
開発に寄りそう自動テストの実現
goyoki
1
360
WebRTC と Rust と8K 60fps
tnoho
2
1.9k
CSC305 Lecture 15
javiergs
PRO
0
240
dnx で実行できるコマンド、作ってみました
tomohisa
0
130
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
tomohisa
5
18k
テストやOSS開発に役立つSetup PHP Action
matsuo_atsushi
0
140
Integrating WordPress and Symfony
alexandresalome
0
120
全員アーキテクトで挑む、 巨大で高密度なドメインの紐解き方
agatan
8
18k
MAP, Jigsaw, Code Golf 振り返り会 by 関東Kaggler会|Jigsaw 15th Solution
hasibirok0
0
210
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
sunabig
0
130
スタートアップを支える技術戦略と組織づくり
pospome
8
15k
Featured
See All Featured
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
380
Being A Developer After 40
akosma
91
590k
GitHub's CSS Performance
jonrohan
1032
470k
Git: the NoSQL Database
bkeepers
PRO
432
66k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.8k
Building an army of robots
kneath
306
46k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
Done Done
chrislema
186
16k
Building Adaptive Systems
keathley
44
2.9k
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, … 情報交換程度でも良いので、 よかったらご連絡を😆