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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
150
営業製作所_採用ピッチ資料_202407
gizm000
3
4.5k
React_TypeScript_LT.pdf
gizm000
0
180
もう、例外投げたくないねん neverthrow
gizm000
1
440
サーバーサイドもTSにしたらモノレポになった.pdf
gizm000
2
180
レガシー業界を乗り越える
gizm000
1
57
Other Decks in Programming
See All in Programming
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
180
CSC307 Lecture 08
javiergs
PRO
0
660
Oxlintはいいぞ
yug1224
5
1.3k
CSC307 Lecture 04
javiergs
PRO
0
650
AgentCoreとHuman in the Loop
har1101
5
220
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
cloverrose
2
510
AI時代の認知負荷との向き合い方
optfit
0
140
AIエージェントの設計で注意するべきポイント6選
har1101
7
3.4k
CSC307 Lecture 01
javiergs
PRO
0
680
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
4
240
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
4.3k
Grafana:建立系統全知視角的捷徑
blueswen
0
320
Featured
See All Featured
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
350
Rebuilding a faster, lazier Slack
samanthasiow
85
9.4k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
280
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
55
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
63
Why Our Code Smells
bkeepers
PRO
340
58k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.4k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.4k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
160
The untapped power of vector embeddings
frankvandijk
1
1.6k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
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, … 情報交換程度でも良いので、 よかったらご連絡を😆