Upgrade to Pro — share decks privately, control downloads, hide ads and more …

XStateでReactに秩序を与えたい

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for gizm000 gizm000
September 06, 2024
Programming
1.2k
0

 XStateでReactに秩序を与えたい

Avatar for gizm000

gizm000

September 06, 2024

More Decks by gizm000

See All by gizm000
NestJSを実運用してみて.pdf
Avatar for gizm000 gizm000
1
170
営業製作所_採用ピッチ資料_202407
Avatar for gizm000 gizm000
3
5.2k
React_TypeScript_LT.pdf
Avatar for gizm000 gizm000
0
200
もう、例外投げたくないねん neverthrow
Avatar for gizm000 gizm000
1
460
サーバーサイドもTSにしたらモノレポになった.pdf
Avatar for gizm000 gizm000
2
180
レガシー業界を乗り越える
Avatar for gizm000 gizm000
1
65

Other Decks in Programming

See All in Programming
クラウドネイティブなエンジニアに向ける Raycastの魅力と実際の活用事例
Avatar for Nealle nealle
2
260
過去のレビュー知見をSkillsで資産化した話
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
1.9k
[RubyKaigi 2026] Require Hooks
Avatar for Vladimir Dementyev palkan
1
320
属人化しないコード品質の作り方_2026.04.07.pdf
Avatar for Masaki Murano muraaano
0
350
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
350
2026-04-15 Spring IO - I Can See Clearly Now
Avatar for Jonatan Ivanov jonatan_ivanov
1
200
ソースコード→AST→オペコード、の旅を覗いてみる
Avatar for hideki kinjyo o0h
PRO
1
130
UaaL×Androidアプリのメモリ計測 — Memory Profilerの先へ
Avatar for Ryosuke Shimizu (RIO) rio432
0
160
Surviving Black Friday: 329 billion requests with Falcon!
Avatar for Samuel Williams ioquatix
0
3.1k
AIベース静的検査器の偽陽性率を抑える工夫3選
Avatar for Kuniwak orgachem
PRO
4
460
20260514 - build with ai 2026 - build LINE Bot with Gemini CLI
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
420
t *testing.T は どこからやってくるの？
Avatar for Kotaro Otaka otakakot
1
930

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
360
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
550
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
190
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
210
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
920
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k

Transcript

  1. Reactに秩序が欲しい – XState – 営業製作所 白石 卓馬

  2. 会社紹介：営業製作所 ・設立 2020年4月 ・本社 大阪 (肥後橋駅 徒歩3分) ・従業員数 約150名 (2024年4月時点)

    ・目的 日本の製造業を支える ・特徴 泥臭い中にこそ本質がある

  3. 自己紹介 ・なまえ 白石 卓馬 (gizm000) ・出身地 大阪 ・職種 ソフトウェアエンジニア ・経歴

    SIer → 受託 → SaaS

  4. 営業製作所のざっくり技術スタック ・フロントエンド：Next.js ・サーバーサイド：NestJS ・IaC：Terraform (CDKじゃないヨ) 業務で使う 80 98%以上がTypeScript

  5. Reactが 好き / 嫌い

  6. Reactが 好き / 嫌い

  7. なぜReactは 嫌われるのか？ ※ 私は嫌いじゃないです

  8. 自由度が高すぎる のが一因か？

  9. 従来のMVCは ルールがある

  10. Model, View, Controller 最低限のレイヤーが 決まっている

  11. Reactにももっと ルール=秩序が欲しい

  12. フロントエンド開発を 分解していくと 秩序を見出せる？

  13. フロントエンド開発でやること

  14. フロントエンド開発でやること ・サーバーからデータを取得

  15. フロントエンド開発でやること ・サーバーからデータを取得 fetchするだけ！ codegenもあるし、 秩序は守れる

  16. フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示

  17. フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 デザインぐらい。 Storybookとか 使えばよい。

  18. フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 ・インタラクティブな操作

  19. フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 ・インタラクティブな操作 ・・・

  20. フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 ・インタラクティブな操作 ケースバイケースでイ イカンジに...

  21. フロントエンド開発でやること ・サーバーからデータを取得 ・データを表示 ・インタラクティブな操作 ケースバイケースでイ イカンジに...

  22. インタラクティブな 操作に秩序を与える

  23. XState by Stately.ai https://stately.ai/docs/quick-start

  24. XState is なに？ ・ステートマシン(ステートチャート)を使って、ロジックを管理 ・ステートマシンはイベントを通じて状態遷移 ・アクター同士でメッセージを送信 ・いろいろなことができるようです

  25. Stately Studio 試してみる

  26. どういう使い方をするのか？ ・状態を管理するところではどこでも使える ・フロントエンドに限った技術でもない ・非同期処理でも対応している ・アクター同士は相互にメッセージを送信しあうこともできる ・ステートマシンがクラスでアクターがインスタンスのようなイメージ

  27. Examples こちらにたくさんあります

  28. そもそもViewに 秩序のある時代は あったのだろうか？

  29. 私のチームにはまだ 秩序がありません...

  30. 他所のチームで どのように秩序を 保っているのか？

  31. 精進あるのみ🔥

  32. ご清聴ありがとうご ざいました

  33. さいごに ・絶賛採用活動中です❗ → X, LinkedIn, Green, LAPRAS, … 　情報交換程度でも良いので、 　よかったらご連絡を😆